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.

Also known as: AG Grid Theme

Salt package	@salt-ds/ag-grid-theme
External dependency	ag-grid-theme
Compatible versions	>= 28.0.0 & <= 32.0.0

Code Design

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Using the package

When to use

When you want to use the Salt theme with AG Grid.

When not to use

When you want to use a component that is not related to AG Grid.

Note

If you're using ag grid v33, please set { theme: "legacy" }. Refer to ag grid upgrade guide for more information.

Import

Make sure to install the necessary AG Grid packages. You will need to install ag-grid-react. You should also install any packages and modules that are necessary for your project, such as ag-grid-community and ag-grid-enterprise.

To install the @salt-ds/ag-grid-theme package, run the command appropriate to your environment: yarn add @salt-ds/ag-grid-theme or npm install @salt-ds/ag-grid-theme

Import Salt AG Grid theme

To import the Salt AG Grid theme, use:

Then wrap your AG Grid with the corresponding class names shown below:

For light mode, use these CSS class name .ag-theme-salt-light.

For dark mode, use these CSS class name .ag-theme-salt-dark.

For compact version, use these CSS class names:

For variants add additional CSS class names:

For editable fields, add the class name .editable-cell to the cellClass array in your column definition.

For fields displaying numeric values, add the class name .numeric-cell to the cellClass array in your column definition.