Data grid
Data grid is an interactive table for efficiently displaying data, supporting advanced features such as frozen columns, editable cells, custom cell renderers and flexible selection capabilities for rows and columns.
In code, this is implemented using AG Grid library, with the Salt styles applied to ensure visual consistency with CSS files.
| Salt package | @salt-ds/ag-grid-theme |
|---|---|
| External dependency | ag-grid-theme |
| Compatible versions | >= 28.0.0 & <= 32.0.0 |
Applies the default look when applying the Salt theme.
Note
AG Grid Community does not have a menu, but can launch Column Filters if enabled (see Launching Filters for configuration details).
The Salt AG Grid theme supports three variants: primary (default), secondary and tertiary. Each variant adjusts the background color of the data grid, providing options to support the creation of a visual hierarchy. To use one of the non-default variants, add an additional class name to the container element above <AgGridReact/>.
The class names are:
ag-theme-salt-variant-secondaryag-theme-salt-variant-tertiary
The Salt AG Grid theme supports alternating row colors to improve readability. This is particularly useful for large datasets where distinguishing between rows can be challenging.
The color of the alternating rows is determined by the variant:
- primary variant uses the secondary background for alternating rows.
- secondary variant uses the primary background for alternating rows.
- tertiary variant uses the primary background for alternating rows.
Users will be able to select rows via checkboxes.
Salt provides styling for a few ag grid built in cell editor types to best match Salt theme. This is only enabled when editable-cell is applied in cellClass together with corresponding ag*CellEditor specified in cellEditor of ColDef, so this won't affect your own custom cell editors.
Note that Rich Select Cell Editor requires enterprise license which offers more functionality than Select Cell Editor.
You can also pair chosen editor with provided column filters types ag*ColumnFilter in filter of ColDef.
You can apply custom color to cells with cellStyle or cellClass.
Similar to row groups, column groups collapse columns behind a group name.
Rows can span multiple columns.
Users can open the menu on the column to view details or filters. Context Menu is an ag grid enterprise feature.
Users can quickly filter table information with the controls at the top.
Users can drag rows to rearrange.
The filter remains visible as the user scrolls.
The HD Compact theme for AG Grid can be applied by using the ag-theme-salt-compact-* class name; however, please note that this compact feature is available only in high density, applies exclusively to AG Grid, and is not a systemic feature of the Salt Design System—other Salt components and patterns do not support a compact mode.
The page continues to load as the user scrolls down the table.
This feature communicates to the user that the page is loading. Use loadingOverlayComponent
from ag grid to provide a custom overlay component.
Users can reveal a child grid when a row in the master grid is expanded. Master / Detail is an ag grid enterprise feature.
This overlay tells the user that there is no information to display.
Users can move between pages using the controls in the lower right.
These rows group items under headers and sub-headers. Tree Data is an ag grid enterprise feature.
The top row remains visible as the user scrolls.
Row groups collapse related items under a single group. Row Grouping is an ag grid enterprise feature.
Row groups display in the above panel. Row Group Panel is an ag grid enterprise feature.
The section below the table displays a status bar. Status Bar is an ag grid enterprise feature.
Text in header cells can be wrapped when space is limited.
Editable cells can show validation states (warning, success and error) using the class names .warning-cell, .success-cell and .error-cell.
Rows can show validation states (warning, success and error) using the class names .warning-row, .success-row and .error-row.