AG Grid theme

Available since

@salt-ds/ag-grid-theme@1.0.0

Resources

View source code

Support

AG Grid Theme is a package that adds Salt theme styles to AG Grid. The package contains CSS files only, and works with AG Grid from version 28 upwards which has CSS variable support. The examples provided below utilize AG Grid version 32.2.2.

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.

Import

Make sure to install the necessary AG Grid packages. You will need to install ag-grid-react@28. 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:

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.

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.

Import

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

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.

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.

Import

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

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.

Accordion

Avatar