Datatable View

The datatable is where the data contained in an object store is displayed in a grid view. Combinable filters allow to narrow down the displayed data in a variety of ways. And the data can be edited or deleted individually, in any selection, or in its entirety. If a table is empty, data can be imported if it is in Dexie, JSON, or CSV format. Or, the javascript textarea can be used to insert records.

1. The caption informs about the name and number of records in the displayed table.

2. With the icon on the left side of the filter elements the filter configuration can be invoked.

3. All filters configured for the table are displayed side by side. The order can be adjusted via drag & drop in the filter configuration. As long as no search value is entered and always when hovering with the mouse, the name of the filter field and the filter type are visible.

4. The search is triggered when the button is clicked or by pressing the Return key while entering a search value. Clicking the button resets all search fields. Search entries are saved as part of the filter configuration so that they remain active when a table is accessed again at a later time.

5. The table navigation consists of the four chevron buttons to scroll forward and backward through the records, two input fields to display and enter the start and end position of the displayed records and the total number of records that correspond to the search entries. How many records are displayed per page is set in the behavior configuration.

6. The order of the datatable columns is set via drag & drop in the column configuration. While the mouse is over a column heading, the column's delimiters are visible and can be dragged to adjust its width. A triangle icon indicates whether a column is sorted in ascending or descending order. To sort a column or change the sorting direction, click the column heading. Sorting data columns that contain non-indexed data can be very slow for tables with many records. Double-clicking on the heading of a sorted column will terminate the sorting. The column sorting is saved as part of the column configuration and remains active when the table is accessed again later.

7. An indicator that signals the presence of columns not currently displayed in the datatable. These may be columns that have been manually hidden in the column configuration, or newly discovered columns encountered while scrolling through the data, when the system is configured not to display such columns automatically. When hovering over the number, a tooltip appears showing details about the hidden columns, along with an icon that serves as a shortcut to the column configuration.

8. Clicking on a data row selects the row, clicking again deselects it. Selected rows are displayed with a different background color, and their total number is shown in .

9. When the mouse hover over a table row, icons appear that allow to delete or edit the displayed data. The editing of row data is done in a textarea below the datatable as javascript code.

10. Below the datatable, information about and actions for the selected records are displayed. The select all checkbox de-/selects all data rows that are displayed based on the filter entries. The select page checkbox does the same with the data rows on the currently displayed on the screen. The icon behind the number of selected records is used to display the selection tools.

Table Tools

While in the datatable view, the table tools are accessed via the icon displayed in the window title. In addition, the table tools can be accessed by clicking on the gear icon that appears when hovering over a row of the table list in the database view.

Import Data

Select which data format to use for the import: Dexie, JSON or CSV. After a file is selected, the contained data is imported into the displayed table and when finished, the datatable view is updated. Hovering over the icon displays the relevant import settings for the selected format and provides a shortcut to adjust the import configuration.

Export Data

Using the dropdown list, the export format can be changed between Dexie format, JSON and CSV. The file name for the export file follows the pattern saved in the export configuration. If the filename field is selected, the pattern is displayed and can be edited. A modified pattern is saved in the configuration of the table. If the mouse hovers over the icon, a layer with the export settings relevant for the selected format is displayed. The icon present in this settings layer can be used to adjust the export configuration.

Empty Table

By clicking on empty table and subsequent confirming, all existing records will be deleted from the table.

Drop Table

After confirmation, the table and all data it contains will be irrevocably deleted. Since the action modifies the database schema, the database version is incremented by 1.

Selection Tools

Clicking on the icon, which appears below the data table as soon as data records are selected, opens the layer with the tools available for actions on the selection.

By using invert selection the selection state is changed for all records in the table.

After using clear selection no records are selected anymore.

delete selected rows will ask for confirmation before the selected data sets are deleted from the table.

export data in the selection tools exports the selected data records in Dexie, JSON or CSV format. Except for the limitation of the amount of data by the selection, the use is identical to the table tools: export functionality. The settings available when exporting are described in the Configuration / Export section.

JavaScript Textarea

The text area is displayed below the data table by default, but can be hidden in the behavior configuration, item . In addition to executing arbitrary JavaScript, the text area is used to edit data records (see item above) and to modify database schemas.

Some global variables are available for use in the JavaScript code:

Name	Value
db	Dexie database object as returned from await Dexie.open('dbname') of the currently selected database.
table	Dexie Table object of the currently selected object store.
selection	Dexie Collection object of the selected data records.
row	a JavaScript object holding the data of a record that has been selected for editing. Only available when editing data.

The chevron navigation below the textarea can be used to switch between saved JavaScript codes. If the navigation is in the first position, the letter u signals that the code is unsaved. The icons on the right side of the navigation appear depending on the state of the entered code. The icon is used to save a new code, the to update a changed code and the to delete a previously saved code.