DataGrid overview
React DataGrid library is designed to be part of your React application for displaying data in a table with rows and columns. Data sorting, resizing, editing options 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.
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: combo, multicombo, text, textarea, datepicker, switch, checkbox.
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: