DataGrid overview
Svelte DataGrid library is designed to be part of your Svelte application for displaying data in a table with rows and columns. Data sorting, resizing and editing options, pagination and dynamic data loading are only a few of the various possibilities provided by the DataGrid widget API.
This page describes the Grid GUI.
Main UI elements
Default view
A basic table is made up of rows and columns with headers and footers. The selected row is highlighted.
Navigation keys
Down/Up Arrows
- use to move to the row below/above (default)Shift + Left click
- use to select the range of rows (if multiple selection is enabled via API)Ctrl + Left click
- use to select multiple rows (if multiple selection is enabled via API)
Columns resizing
When columns resizing is enabled via the widget API, you can change the column size by dragging the border of its header cell:
Data sorting
If data sorting is activated via the widget API, you can sort data by a single column clicking a column header.
For multiple sorting you should hold the Ctrl key and click column headers in the order you want to apply sorting, in this case the sort index appears in the column header.
Context menu
The context menu, if added via the widget API, appears with the right click. It has the following default options:
- Add before - to add a row before the selected one
- Add after - to add a row after the selected one
- Copy - to copy&paste the selected row
- Delete - to delete the selected row
Editors
The widget provides a number of predefined editors that you can apply to a column cell: text, combo, richselect, datepicker.
Tree table
The widget allows displaying data in a hierarchical format with collapsible rows:
Example with more features
If you apply the functionality provided by the widget API you can get a good-looking table with more features as the one in the image below: