AG Grid theme
v2AG Grid theme
Resources
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.
Applies the default look when applying the Salt theme.
There are three variants of the Salt AG Grid theme: primary (default), secondary and zebra. 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-zebra
Users will be able to select rows via checkboxes.
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.
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.
You can use the HD Compact theme by applying the ag-grid-salt-high-compact-* class name.
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.
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.
The top row remains visible as the user scrolls.
Row groups collapse related items under a single group.
Row groups display in the above panel.
The section below the table displays a status bar.
Text in header cells can be wrapped when space is limited.
Applies the default look when applying the Salt theme.
There are three variants of the Salt AG Grid theme: primary (default), secondary and zebra. 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-zebra
Users will be able to select rows via checkboxes.
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.
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.
You can use the HD Compact theme by applying the ag-grid-salt-high-compact-* class name.
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.
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.
The top row remains visible as the user scrolls.
Row groups collapse related items under a single group.
Row groups display in the above panel.
The section below the table displays a status bar.
Text in header cells can be wrapped when space is limited.
Applies the default look when applying the Salt theme.
There are three variants of the Salt AG Grid theme: primary (default), secondary and zebra. 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-zebra
Users will be able to select rows via checkboxes.
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.
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.
You can use the HD Compact theme by applying the ag-grid-salt-high-compact-* class name.
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.
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.
The top row remains visible as the user scrolls.
Row groups collapse related items under a single group.
Row groups display in the above panel.
The section below the table displays a status bar.
Text in header cells can be wrapped when space is limited.