Skip to main content

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.

License: SVAR DataGrid is free to use under the MIT license.

Main UI elements​

This section describes the Grid GUI.

Default view​

A basic table is made up of rows and columns with headers and footers. The selected row is highlighted.

Basic Grid

  • 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:

Resize column

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.

Sort data

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

Context menu

Editors​

The widget provides a number of predefined editors that you can apply to a column cell: text, combo, richselect, datepicker.

Inline editors

Tree table​

The widget allows displaying data in a hierarchical format with collapsible rows:

Tree table

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:

Good look