React Data GridCSS Variable Reference
Here is a list of variables accepted by the the grid:
--ag-alpine-active-colorTypeCSS 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-colorTypeCSS 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-colorTypeCSS 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-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of text and icons in primary UI elements like menus |
--ag-background-colorTypeCSS color (e.g. `red` or `#fff`) | Background colour of the grid |
--ag-secondary-foreground-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of text in grid cells |
--ag-header-foreground-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of text and icons in the header |
--ag-header-background-colorTypeCSS color (e.g. `red` or `#fff`) | Background colour for all headers, including the grid header, panels etc |
--ag-tooltip-background-colorTypeCSS color (e.g. `red` or `#fff`) | Background colour for all tooltips |
--ag-disabled-foreground-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Background colour for second level headings within UI components |
--ag-subheader-toolbar-background-colorTypeCSS color (e.g. `red` or `#fff`) | Background colour for toolbars directly under subheadings (as used in the chart settings menu) |
--ag-control-panel-background-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Background for the active tab on the side of the control panel |
--ag-selected-row-background-colorTypeCSS color (e.g. `red` or `#fff`) | Background color of selected rows in the grid and in dropdown menus |
--ag-odd-row-background-colorTypeCSS color (e.g. `red` or `#fff`) | Background colour applied to every other row |
--ag-modal-overlay-background-colorTypeCSS color (e.g. `red` or `#fff`) | Background color of the overlay shown over the grid e.g. a data loading indicator |
--ag-row-hover-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Background color when hovering over columns in the grid |
--ag-range-selection-border-colorTypeCSS color (e.g. `red` or `#fff`) | Color to draw around selected cell ranges |
--ag-range-selection-border-styleTypea 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-colorTypeCSS color (e.g. `red` or `#fff`) | Background colour of selected cell ranges. |
--ag-range-selection-background-color-2TypeCSS 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-3TypeCSS 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-4TypeCSS 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-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of the border drawn under selected tabs |
--ag-selected-tab-underline-widthTypeCSS length (e.g. `0`, `4px` or `50%`) | Thickness of the border drawn under selected tabs |
--ag-selected-tab-underline-transition-speedTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Background colour for cells that provide categories to the current range chart |
--ag-range-selection-chart-background-colorTypeCSS color (e.g. `red` or `#fff`) | Background colour for cells that provide data to the current range chart |
--ag-header-cell-hover-background-colorTypeCSS 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-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour to apply when a cell value changes and enableCellChangeFlash is enabled |
--ag-value-change-delta-up-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour to temporarily apply to cell data when its value decreases in an agAnimateShowChangeCellRenderer cell |
--ag-chip-background-colorTypeCSS color (e.g. `red` or `#fff`) | Colour for the 'chip' that represents a column that has been dragged onto a drop zone |
--ag-bordersTypea 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour for border around major UI components like the grid itself, headers; footers and tool panels. |
--ag-borders-criticalTypea 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-secondaryTypea 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour for borders used to separate elements within a major UI component |
--ag-row-border-styleTypea 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-widthTypea 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of the border between grid rows, or transparent to display no border |
--ag-cell-horizontal-borderTypea 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-inputTypea 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour for borders around inputs, if enabled with --ag-borders-input |
--ag-borders-input-invalidTypea 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-invalidTypeCSS color (e.g. `red` or `#fff`) | The color for the border around invalid inputs, if enabled with --ag-borders-input-invalid |
--ag-borders-side-buttonTypea 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-radiusTypeCSS length (e.g. `0`, `4px` or `50%`) | Border radius applied to many elements such as dialogs and form widgets |
--ag-invalid-colorTypeCSS color (e.g. `red` or `#fff`) | The color applied to form elements in an invalid state |
--ag-input-disabled-border-colorTypeCSS color (e.g. `red` or `#fff`) | The border around disabled text inputs |
--ag-input-disabled-background-colorTypeCSS color (e.g. `red` or `#fff`) | The background colour of disabled text inputs |
--ag-checkbox-background-colorTypeCSS color (e.g. `red` or `#fff`) | the background of an checkbox |
--ag-checkbox-border-radiusTypeCSS length (e.g. `0`, `4px` or `50%`) | edge rounding a checkboxes |
--ag-checkbox-checked-colorTypeCSS color (e.g. `red` or `#fff`) | color of the checkbox-checked icon that is shown in a checked checkbox |
--ag-checkbox-unchecked-colorTypeCSS color (e.g. `red` or `#fff`) | color of the checkbox-unchecked icon that is shown in an unchecked checkbox |
--ag-checkbox-indeterminate-colorTypeCSS color (e.g. `red` or `#fff`) | color of the checkbox-indeterminate icon that is shown in an indeterminate checkbox |
--ag-toggle-button-border-widthTypeCSS length (e.g. `0`, `4px` or `50%`) | size of the toggle button outer border |
--ag-toggle-button-on-border-colorTypeCSS color (e.g. `red` or `#fff`) | colour of the toggle button outer border in its 'on' state |
--ag-toggle-button-off-border-colorTypeCSS color (e.g. `red` or `#fff`) | colour of the toggle button's outer border in its 'off' state |
--ag-toggle-button-on-background-colorTypeCSS color (e.g. `red` or `#fff`) | colour of the toggle button background in its 'on' state |
--ag-toggle-button-off-background-colorTypeCSS color (e.g. `red` or `#fff`) | colour of the toggle button background in its 'off' state |
--ag-toggle-button-switch-background-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | border colour of the toggle button switch (the bit that slides from left to right) |
--ag-toggle-button-widthTypeCSS length (e.g. `0`, `4px` or `50%`) | width of the whole toggle button component |
--ag-toggle-button-heightTypeCSS length (e.g. `0`, `4px` or `50%`) | height of the whole toggle button component |
--ag-input-focus-box-shadowTypeCSS box-shadow value (e.g. `0 5px 10px black`) | box shadow around focussed inputs |
--ag-input-focus-border-colorTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Color of border around selected chart style |
--ag-minichart-selected-page-colorTypeCSS color (e.g. `red` or `#fff`) | Color of dot representing selected page of chart styles |
--ag-grid-sizeTypeCSS 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-sizeTypeCSS length (e.g. `0`, `4px` or `50%`) | The size of square icons and icon-buttons |
--ag-widget-container-horizontal-paddingTypeCSS 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-paddingTypeCSS 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-spacingTypeCSS 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-spacingTypeCSS length (e.g. `0`, `4px` or `50%`) | The vertical spacing between widgets in containers that contain vertically stacked widgets |
--ag-cell-horizontal-paddingTypeCSS 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-spacingTypeCSS 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-heightTypeCSS length (e.g. `0`, `4px` or `50%`) | Height of grid rows |
--ag-header-heightTypeCSS length (e.g. `0`, `4px` or `50%`) | Height of header rows |
--ag-list-item-heightTypeCSS 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-displayTypeCSS 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-heightTypeCSS 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-widthTypeCSS length (e.g. `0`, `4px` or `50%`) | Width of the header column separator |
--ag-header-column-separator-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of the header column separator |
--ag-header-column-resize-handle-displayTypeCSS 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-heightTypeCSS 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-widthTypeCSS length (e.g. `0`, `4px` or `50%`) | Width of the header resize handle. |
--ag-header-column-resize-handle-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of the header resize handle |
--ag-column-select-indent-sizeTypeCSS 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-sizeTypeCSS 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-sizeTypeCSS 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-sizeTypeCSS 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-indentTypeCSS 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-widthTypeCSS length (e.g. `0`, `4px` or `50%`) | Minimum width of a tabbed menu (usd in charts) |
--ag-menu-min-widthTypeCSS length (e.g. `0`, `4px` or `50%`) | Minimum width of a menu that is not tabbed |
--ag-side-bar-panel-widthTypeCSS length (e.g. `0`, `4px` or `50%`) | Width of the sidebar that contains the columns and filters tool panels |
--ag-font-familyTypeCSS font-family value (e.g. `font-family: `'Gill Sans', sans-serif`) | Font family used for all text |
--ag-font-sizeTypeCSS length (e.g. `0`, `4px` or `50%`) | Default font size for text in the grid |
--ag-icon-font-familyTypeCSS length (e.g. `0`, `4px` or `50%`) | The icon font used by the grid. |
--ag-card-radiusTypeCSS length (e.g. `0`, `4px` or `50%`) | cards are elements that float above the UI |
--ag-card-shadowTypeCSS 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-shadowTypeCSS 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-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of the join operator pills in the Advanced Filter Builder |
--ag-advanced-filter-column-pill-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of the column pills in the Advanced Filter Builder |
--ag-advanced-filter-option-pill-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of the filter option pills in the Advanced Filter Builder |
--ag-advanced-filter-value-pill-colorTypeCSS color (e.g. `red` or `#fff`) | Colour of the value pills in the Advanced Filter Builder |