React Data GridCSS Variable Reference

ReactAngularVueJavascript

(Quartz theme only) accent colour used for checked checkboxes, range selections, and input focus outlines in the Quartz theme

(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

(Balham theme only) accent colour used for checked checkboxes, range selections, row selections, and input focus outlines in the Balham theme

(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

(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

Colour of text and icons in primary UI elements like menus

Background colour of the grid

Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data

Colour of text in grid cells

Colour of text and icons in the header

Background colour for all headers, including the grid header, panels etc

Background colour for all tooltips

Color of elements that can't be interacted with because they are in a disabled state

Background colour for second level headings within UI components

Background colour for toolbars directly under subheadings (as used in the chart settings menu)

Background for areas of the interface that contain UI controls, like tool panels and the chart settings menu

Background for the active tab on the side of the control panel

Background color of selected rows in the grid and in dropdown menus

Background colour applied to every other row

Background color of the overlay shown over the grid e.g. a data loading indicator

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

Background color when hovering over columns in the grid

Color to draw around selected cell ranges

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

Background colour of selected cell ranges.

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

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

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

Background colour to briefly apply to a cell range when it is copied from or pasted into

Colour of the border drawn under selected tabs

Thickness of the border drawn under selected tabs

Duration of animation used to show and hide the border drawn under selected tabs

Background colour for cells that provide categories to the current range chart

Background colour for cells that provide data to the current range chart

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.

Colour applied to header cells when the column is being dragged to a new position

Colour to apply when a cell value changes and enableCellChangeFlash is enabled

Colour to temporarily apply to cell data when its value increases in an agAnimateShowChangeCellRenderer cell

Colour to temporarily apply to cell data when its value decreases in an agAnimateShowChangeCellRenderer cell

Colour for the 'chip' that represents a column that has been dragged onto a drop zone

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.

Colour for border around major UI components like the grid itself, headers; footers and tool panels.

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.

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.

Colour for borders used to separate elements within a major UI component

Default border style for the grid rows. Set this to a border style, e.g. solid, dotted.

The thickness of the border between grid rows. Set this to a border thickness, e.g. 1px.

Colour of the border between grid rows, or transparent to display no border

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.

Draw borders around inputs. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders.

Colour for borders around inputs, if enabled with --ag-borders-input

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.

The color for the border around invalid inputs, if enabled with --ag-borders-input-invalid

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.

Border radius applied to many elements such as dialogs and form widgets

The color applied to form elements in an invalid state

The border around disabled text inputs

The background colour of disabled text inputs

the background of an checkbox

edge rounding a checkboxes

color of the checkbox-checked icon that is shown in a checked checkbox

color of the checkbox-unchecked icon that is shown in an unchecked checkbox

color of the checkbox-indeterminate icon that is shown in an indeterminate checkbox

size of the toggle button outer border

colour of the toggle button outer border in its 'on' state

colour of the toggle button's outer border in its 'off' state

colour of the toggle button background in its 'on' state

colour of the toggle button background in its 'off' state

colour of the toggle button switch (the bit that slides from left to right)

border colour of the toggle button switch (the bit that slides from left to right)

width of the whole toggle button component

height of the whole toggle button component

box shadow around focussed inputs

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.

Color of border around selected chart style

Color of dot representing selected page of chart styles

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.

The size of square icons and icon-buttons

The font weight to apply to icon elements, used for icon fonts that require a specific weight to work

The horizontal padding of containers that contain stacked widgets, such as menus and tool panels

The vertical padding of containers that contain stacked widgets, such as menus and tool panels

The horizontal spacing between widgets in containers that contain horizontally stacked widgets such as the column groups header component.

The vertical spacing between widgets in containers that contain vertically stacked widgets

Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height

Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes)

Height of grid rows

Height of header rows

Height of items in lists (example of lists are dropdown select inputs and column menu set filters)

Whether to display the header column separator - a vertical line that displays between every header cell

Height of the header column separator. Percentage values are relative to the header height.

Width of the header column separator

Colour of the header column separator

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.

Height of the header resize handle. Percentage values are relative to the header height.

Width of the header resize handle.

Colour of the header resize handle

How much to indent child columns in the column tool panel relative to their parent

How much to indent child filter items in the Set Filter List relative to their parent

How much to indent child filter items in the Advanced Filter Builder relative to their parent

How much to indent child rows in the grid relative to their parent row

How much to indent child columns in the filters tool panel relative to their parent

Minimum width of a tabbed menu (usd in charts)

Minimum width of a menu that is not tabbed

Width of the sidebar that contains the columns and filters tool panels

Font family used for all text

Default font size for text in the grid

The icon font used by the grid.

cards are elements that float above the UI

the default card shadow applies to simple cards like column drag indicators and text editors

override the shadow for popups - cards that contain complex UI, like menus and charts

Colour of the join operator pills in the Advanced Filter Builder

Colour of the column pills in the Advanced Filter Builder

Colour of the filter option pills in the Advanced Filter Builder

Colour of the value pills in the Advanced Filter Builder