Themes

You can style your grid with a theme. AG Grid includes the following themes:

1. quartz
2. alpine
3. balham
4. material

The grid uses quartz by default. To use any other theme, set it using the theme prop, i.e. theme="alpine".

📊 Dataset source: gapminder2007.csv

The theme prop maps directly to one of AG Grid's built-in theme classes, which reflex-enterprise applies on the grid root element:

• theme="quartz" → .ag-theme-quartz
• theme="balham" → .ag-theme-balham
• theme="alpine" → .ag-theme-alpine
• theme="material" → .ag-theme-material

Each theme also has a dark variant (.ag-theme-quartz-dark, .ag-theme-balham-dark, etc.). The dark variant is only applied when the corresponding theme name is selected; listing both light and dark class selectors in your CSS lets the same overrides apply in either mode.

You can customize any theme by overriding the AG Grid CSS variables (the --ag-* custom properties) and by writing rules that target AG Grid's built-in classes. The full list of available variables is documented in the AG Grid theming reference.

AG Grid exposes most visual properties as CSS variables. Commonly customized ones:

• Typography: --ag-font-family, --ag-font-size
• Density and shape: --ag-grid-size (base unit), --ag-border-radius, --ag-wrapper-border-radius, --ag-cell-horizontal-padding
• Borders: --ag-border-color, --ag-row-border-color
• Backgrounds: --ag-background-color, --ag-odd-row-background-color, --ag-row-hover-color
• Headers: --ag-header-background-color, --ag-header-foreground-color, --ag-header-column-separator-color
• Accents (selection / focus): --ag-accent-color, --ag-selected-row-background-color, --ag-range-selection-background-color, --ag-input-focus-border-color, --ag-checkbox-checked-color

If you have multiple grids on a page, scope your overrides to a parent class so they don't leak to other grids. Wrap the grid in an rx.box (or any element) with a class such as custom-ag-grid, then target the theme class inside that wrapper in your CSS:

Listing every theme variant in the selector keeps the overrides applied no matter which built-in theme is selected at runtime, including its dark variant.

Place your CSS file under assets/ and add it to the stylesheets list on your rxe.App (or rx.App):

The path is relative to assets/, so assets/ag_grid_theme.css is referenced as /ag_grid_theme.css.

For one-off tweaks you don't need a separate stylesheet — you can set --ag-* variables directly in the style dict on the grid:

Built-in themes style the grid as a whole. To highlight individual cells based on their value, attach custom CSS classes via the cellClass and cellClassRules column-def keys, then style those classes in your stylesheet.

• cellClass always applies the listed class(es) to every cell in the column.
• cellClassRules is a mapping of class name -> JS expression; the class is applied when the expression evaluates truthy. The cell's value is available as params.value.

The same approach works for header cells (headerClass) and rows (rowClass / rowClassRules on the grid itself).