React Data GridCSS Variable Reference

Here is a list of variables accepted by the the grid:

--ag-active-color
CSS color (e.g. `red` or `#fff`)
(Quartz theme only) accent colour used for checked checkboxes, range selections, and input focus outlines in the Quartz theme
--ag-alpine-active-color
CSS color (e.g. `red` or `#fff`)
(Alpine theme only) accent colour used for checked checkboxes, range selections, row hover, row selections, selected tab underlines, and input focus outlines in the Alpine theme
--ag-balham-active-color
CSS color (e.g. `red` or `#fff`)
(Balham theme only) accent colour used for checked checkboxes, range selections, row selections, and input focus outlines in the Balham theme
--ag-material-primary-color
CSS color (e.g. `red` or `#fff`)
(Material theme only) the primary colour as defined in the Material Design colour system. Currently this is used on buttons, range selections and selected tab underlines in the Material theme
--ag-material-accent-color
CSS color (e.g. `red` or `#fff`)
(Material theme only) the accent colour as defined in the Material Design colour system. Currently this is used on checked checkboxes in the Material theme
--ag-foreground-color
CSS color (e.g. `red` or `#fff`)
Colour of text and icons in primary UI elements like menus
--ag-background-color
CSS color (e.g. `red` or `#fff`)
Background colour of the grid
--ag-secondary-foreground-color
CSS color (e.g. `red` or `#fff`)
Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data
--ag-data-color
CSS color (e.g. `red` or `#fff`)
Colour of text in grid cells
--ag-header-foreground-color
CSS color (e.g. `red` or `#fff`)
Colour of text and icons in the header
--ag-header-background-color
CSS color (e.g. `red` or `#fff`)
Background colour for all headers, including the grid header, panels etc
--ag-tooltip-background-color
CSS color (e.g. `red` or `#fff`)
Background colour for all tooltips
--ag-disabled-foreground-color
CSS color (e.g. `red` or `#fff`)
Color of elements that can't be interacted with because they are in a disabled state
--ag-subheader-background-color
CSS color (e.g. `red` or `#fff`)
Background colour for second level headings within UI components
--ag-subheader-toolbar-background-color
CSS color (e.g. `red` or `#fff`)
Background colour for toolbars directly under subheadings (as used in the chart settings menu)
--ag-control-panel-background-color
CSS color (e.g. `red` or `#fff`)
Background for areas of the interface that contain UI controls, like tool panels and the chart settings menu
--ag-side-button-selected-background-color
CSS color (e.g. `red` or `#fff`)
Background for the active tab on the side of the control panel
--ag-selected-row-background-color
CSS color (e.g. `red` or `#fff`)
Background color of selected rows in the grid and in dropdown menus
--ag-odd-row-background-color
CSS color (e.g. `red` or `#fff`)
Background colour applied to every other row
--ag-modal-overlay-background-color
CSS color (e.g. `red` or `#fff`)
Background color of the overlay shown over the grid e.g. a data loading indicator
--ag-menu-background-color
CSS color (e.g. `red` or `#fff`)
Background color of menus, including the column menu and right-click context menu
--ag-panel-background-color
CSS color (e.g. `red` or `#fff`)
Background color of panels, including the advanced filter builder and integrated charts
--ag-row-hover-color
CSS color (e.g. `red` or `#fff`)
Background color when hovering over rows in the grid and in dropdown menus. Set to transparent to disable the hover effect. Note: if you want a rollover on one but not the other, use CSS selectors instead of this property
--ag-column-hover-color
CSS color (e.g. `red` or `#fff`)
Background color when hovering over columns in the grid
--ag-range-selection-border-color
CSS color (e.g. `red` or `#fff`)
Color to draw around selected cell ranges
--ag-range-selection-border-style
a CSS border style (e.g. `dotted`, `solid` or `none`)
Border style for range selections, e.g. solid or dashed. Do not set to none, if you need to hide the border set the color to transparent
--ag-range-selection-background-color
CSS color (e.g. `red` or `#fff`)
Background colour of selected cell ranges.
--ag-range-selection-background-color-2
CSS color (e.g. `red` or `#fff`)
Background-color when 2 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^2) where X is the opacity of --ag-range-selection-background-color
--ag-range-selection-background-color-3
CSS color (e.g. `red` or `#fff`)
Background-color when 3 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^3) where X is the opacity of --ag-range-selection-background-color
--ag-range-selection-background-color-4
CSS color (e.g. `red` or `#fff`)
Background-color when 4 or more selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^4) where X is the opacity of --ag-range-selection-background-color
--ag-range-selection-highlight-color
CSS color (e.g. `red` or `#fff`)
Background colour to briefly apply to a cell range when it is copied from or pasted into
--ag-selected-tab-underline-color
CSS color (e.g. `red` or `#fff`)
Colour of the border drawn under selected tabs
--ag-selected-tab-underline-width
CSS length (e.g. `0`, `4px` or `50%`)
Thickness of the border drawn under selected tabs
--ag-selected-tab-underline-transition-speed
CSS time duration (e.g. `3s` or `250ms`)
Duration of animation used to show and hide the border drawn under selected tabs
--ag-range-selection-chart-category-background-color
CSS color (e.g. `red` or `#fff`)
Background colour for cells that provide categories to the current range chart
--ag-range-selection-chart-background-color
CSS color (e.g. `red` or `#fff`)
Background colour for cells that provide data to the current range chart
--ag-header-cell-hover-background-color
CSS color (e.g. `red` or `#fff`)
Rollover colour for header cells. If you set this variable and have enabled column reordering by dragging, you may want to set --ag-header-cell-moving-background-color to ensure that the rollover colour remains in place during dragging.
--ag-header-cell-moving-background-color
CSS color (e.g. `red` or `#fff`)
Colour applied to header cells when the column is being dragged to a new position
--ag-value-change-value-highlight-background-color
CSS color (e.g. `red` or `#fff`)
Colour to apply when a cell value changes and enableCellChangeFlash is enabled
--ag-value-change-delta-up-color
CSS color (e.g. `red` or `#fff`)
Colour to temporarily apply to cell data when its value increases in an agAnimateShowChangeCellRenderer cell
--ag-value-change-delta-down-color
CSS color (e.g. `red` or `#fff`)
Colour to temporarily apply to cell data when its value decreases in an agAnimateShowChangeCellRenderer cell
--ag-chip-background-color
CSS color (e.g. `red` or `#fff`)
Colour for the 'chip' that represents a column that has been dragged onto a drop zone
--ag-borders
a CSS border style and size (e.g. `solid 1px` or `none`)
Enable or disable borders around most UI elements in the grid. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders. Use the other --ag-borders-* variables for more fine grained control over which UI elements get borders.
--ag-border-color
CSS color (e.g. `red` or `#fff`)
Colour for border around major UI components like the grid itself, headers; footers and tool panels.
--ag-borders-critical
a CSS border style and size (e.g. `solid 1px` or `none`)
Enable or disable borders that are critical to UX, e.g. those between headers and rows. Themes that disable borders generally may want to enable these borders. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders.
--ag-borders-secondary
a CSS border style and size (e.g. `solid 1px` or `none`)
Draw decorative borders separating UI elements within components. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders.
--ag-secondary-border-color
CSS color (e.g. `red` or `#fff`)
Colour for borders used to separate elements within a major UI component
--ag-row-border-style
a CSS border style (e.g. `solid` or `dotted`)
Default border style for the grid rows. Set this to a border style, e.g. solid, dotted.
--ag-row-border-width
a CSS border style (e.g. `solid` or `dotted`)
The thickness of the border between grid rows. Set this to a border thickness, e.g. 1px.
--ag-row-border-color
CSS color (e.g. `red` or `#fff`)
Colour of the border between grid rows, or transparent to display no border
--ag-menu-border-color
CSS color (e.g. `red` or `#fff`)
Colour of the border around menus including the column menu and right-click context menu
--ag-panel-border-color
CSS color (e.g. `red` or `#fff`)
Colour of the border around panels including the advanced filter builder and integrated charts
--ag-cell-horizontal-border
a CSS border style and colour (e.g. `solid red`)
Default border for cells. This can be used to specify the border-style and border-color properties e.g. dashed red but the border-width is fixed at 1px. Set to solid transparent to show no border.
--ag-borders-input
a CSS border style and size (e.g. `solid 1px` or `none`)
Draw borders around inputs. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders.
--ag-input-border-color
CSS color (e.g. `red` or `#fff`)
Colour for borders around inputs, if enabled with --ag-borders-input
--ag-borders-input-invalid
a CSS border style and size (e.g. `solid 1px` or `none`)
Draw borders around inputs when their content has failed validation. Set this to a border style and thickness, e.g. solid 2px to enable borders. Set to none to disable borders but ensure that you have added styles to differentiate invalid from valid inputs.
--ag-input-border-color-invalid
CSS color (e.g. `red` or `#fff`)
The color for the border around invalid inputs, if enabled with --ag-borders-input-invalid
--ag-borders-side-button
a CSS border style and size (e.g. `solid 1px` or `none`)
Draw borders around the vertical tabs on the side of the control panel. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders.
--ag-border-radius
CSS length (e.g. `0`, `4px` or `50%`)
Border radius applied to many elements such as dialogs and form widgets
--ag-invalid-color
CSS color (e.g. `red` or `#fff`)
The color applied to form elements in an invalid state
--ag-input-disabled-border-color
CSS color (e.g. `red` or `#fff`)
The border around disabled text inputs
--ag-input-disabled-background-color
CSS color (e.g. `red` or `#fff`)
The background colour of disabled text inputs
--ag-checkbox-background-color
CSS color (e.g. `red` or `#fff`)
the background of an checkbox
--ag-checkbox-border-radius
CSS length (e.g. `0`, `4px` or `50%`)
edge rounding a checkboxes
--ag-checkbox-checked-color
CSS color (e.g. `red` or `#fff`)
color of the checkbox-checked icon that is shown in a checked checkbox
--ag-checkbox-unchecked-color
CSS color (e.g. `red` or `#fff`)
color of the checkbox-unchecked icon that is shown in an unchecked checkbox
--ag-checkbox-indeterminate-color
CSS color (e.g. `red` or `#fff`)
color of the checkbox-indeterminate icon that is shown in an indeterminate checkbox
--ag-toggle-button-border-width
CSS length (e.g. `0`, `4px` or `50%`)
size of the toggle button outer border
--ag-toggle-button-on-border-color
CSS color (e.g. `red` or `#fff`)
colour of the toggle button outer border in its 'on' state
--ag-toggle-button-off-border-color
CSS color (e.g. `red` or `#fff`)
colour of the toggle button's outer border in its 'off' state
--ag-toggle-button-on-background-color
CSS color (e.g. `red` or `#fff`)
colour of the toggle button background in its 'on' state
--ag-toggle-button-off-background-color
CSS color (e.g. `red` or `#fff`)
colour of the toggle button background in its 'off' state
--ag-toggle-button-switch-background-color
CSS color (e.g. `red` or `#fff`)
colour of the toggle button switch (the bit that slides from left to right)
--ag-toggle-button-switch-border-color
CSS color (e.g. `red` or `#fff`)
border colour of the toggle button switch (the bit that slides from left to right)
--ag-toggle-button-width
CSS length (e.g. `0`, `4px` or `50%`)
width of the whole toggle button component
--ag-toggle-button-height
CSS length (e.g. `0`, `4px` or `50%`)
height of the whole toggle button component
--ag-input-focus-box-shadow
CSS box-shadow value (e.g. `0 5px 10px black`)
box shadow around focussed inputs
--ag-input-focus-border-color
CSS color (e.g. `red` or `#fff`)
Colour of the border around focussed inputs. Set to var(--ag-input-border-color) if you do not want to change the border colour on focus.
--ag-minichart-selected-chart-color
CSS color (e.g. `red` or `#fff`)
Color of border around selected chart style
--ag-minichart-selected-page-color
CSS color (e.g. `red` or `#fff`)
Color of dot representing selected page of chart styles
--ag-grid-size
CSS length (e.g. `0`, `4px` or `50%`)
grid-size is the main control for affecting how tightly data and UI elements are packed together. All padding and spacing in the grid is defined as a multiple of grid-size, so increasing it will make most components larger by increasing their internal white space while leaving the size of text and icons unchanged.
--ag-icon-size
CSS length (e.g. `0`, `4px` or `50%`)
The size of square icons and icon-buttons
--ag-icon-font-weight
CSS length (e.g. `0`, `4px` or `50%`)
The font weight to apply to icon elements, used for icon fonts that require a specific weight to work
--ag-widget-container-horizontal-padding
CSS length (e.g. `0`, `4px` or `50%`)
The horizontal padding of containers that contain stacked widgets, such as menus and tool panels
--ag-widget-container-vertical-padding
CSS length (e.g. `0`, `4px` or `50%`)
The vertical padding of containers that contain stacked widgets, such as menus and tool panels
--ag-widget-horizontal-spacing
CSS length (e.g. `0`, `4px` or `50%`)
The horizontal spacing between widgets in containers that contain horizontally stacked widgets such as the column groups header component.
--ag-widget-vertical-spacing
CSS length (e.g. `0`, `4px` or `50%`)
The vertical spacing between widgets in containers that contain vertically stacked widgets
--ag-cell-horizontal-padding
CSS length (e.g. `0`, `4px` or `50%`)
Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height
--ag-cell-widget-spacing
CSS length (e.g. `0`, `4px` or `50%`)
Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes)
--ag-row-height
CSS length (e.g. `0`, `4px` or `50%`)
Height of grid rows
--ag-header-height
CSS length (e.g. `0`, `4px` or `50%`)
Height of header rows
--ag-list-item-height
CSS length (e.g. `0`, `4px` or `50%`)
Height of items in lists (example of lists are dropdown select inputs and column menu set filters)
--ag-header-column-separator-display
CSS display value - `block` to show or `none` to hide
Whether to display the header column separator - a vertical line that displays between every header cell
--ag-header-column-separator-height
CSS length (e.g. `0`, `4px` or `50%`)
Height of the header column separator. Percentage values are relative to the header height.
--ag-header-column-separator-width
CSS length (e.g. `0`, `4px` or `50%`)
Width of the header column separator
--ag-header-column-separator-color
CSS color (e.g. `red` or `#fff`)
Colour of the header column separator
--ag-header-column-resize-handle-display
CSS display value - `block` to show or `none` to hide
Whether to show the header column resize handle - a vertical line that displays only between resizeable header columns, indicating where to drag in order to resize the column.
--ag-header-column-resize-handle-height
CSS length (e.g. `0`, `4px` or `50%`)
Height of the header resize handle. Percentage values are relative to the header height.
--ag-header-column-resize-handle-width
CSS length (e.g. `0`, `4px` or `50%`)
Width of the header resize handle.
--ag-header-column-resize-handle-color
CSS color (e.g. `red` or `#fff`)
Colour of the header resize handle
--ag-column-select-indent-size
CSS length (e.g. `0`, `4px` or `50%`)
How much to indent child columns in the column tool panel relative to their parent
--ag-set-filter-indent-size
CSS length (e.g. `0`, `4px` or `50%`)
How much to indent child filter items in the Set Filter List relative to their parent
--ag-advanced-filter-builder-indent-size
CSS length (e.g. `0`, `4px` or `50%`)
How much to indent child filter items in the Advanced Filter Builder relative to their parent
--ag-row-group-indent-size
CSS length (e.g. `0`, `4px` or `50%`)
How much to indent child rows in the grid relative to their parent row
--ag-filter-tool-panel-group-indent
CSS length (e.g. `0`, `4px` or `50%`)
How much to indent child columns in the filters tool panel relative to their parent
--ag-tab-min-width
CSS length (e.g. `0`, `4px` or `50%`)
Minimum width of the legacy tabbed column menu. Set this to the largest content you expect to be displayed in the tabbed menu to prevent the menu from changing size as you switch between tabs.
--ag-menu-min-width
CSS length (e.g. `0`, `4px` or `50%`)
Minimum width of the filter menu
--ag-side-bar-panel-width
CSS length (e.g. `0`, `4px` or `50%`)
Width of the sidebar that contains the columns and filters tool panels
--ag-font-family
CSS font-family value (e.g. `font-family: `'Gill Sans', sans-serif`)
Font family used for all text
--ag-font-size
CSS length (e.g. `0`, `4px` or `50%`)
Default font size for text in the grid
--ag-icon-font-family
CSS length (e.g. `0`, `4px` or `50%`)
The icon font used by the grid.
--ag-card-radius
CSS length (e.g. `0`, `4px` or `50%`)
cards are elements that float above the UI
--ag-card-shadow
CSS box-shadow value (e.g. `0 5px 10px black`)
the default card shadow applies to simple cards like column drag indicators and text editors
--ag-popup-shadow
CSS box-shadow value (e.g. `0 5px 10px black`)
override the shadow for popups - cards that contain complex UI, like menus and charts
--ag-advanced-filter-join-pill-color
CSS color (e.g. `red` or `#fff`)
Colour of the join operator pills in the Advanced Filter Builder
--ag-advanced-filter-column-pill-color
CSS color (e.g. `red` or `#fff`)
Colour of the column pills in the Advanced Filter Builder
--ag-advanced-filter-option-pill-color
CSS color (e.g. `red` or `#fff`)
Colour of the filter option pills in the Advanced Filter Builder
--ag-advanced-filter-value-pill-color
CSS color (e.g. `red` or `#fff`)
Colour of the value pills in the Advanced Filter Builder
--ag-row-loading-skeleton-effect-color
CSS color (e.g. `red` or `#fff`)
Colour of the skeleton loading effect used in the SSRM