React Data Grid: CSS Variable Reference
Here is a list of variables accepted by the the grid:
| (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 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 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 |