Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Vue Data Grid: CSS Variable Reference

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

--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-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-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 size (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-borders-row
a CSS border style and size (e.g. `solid 1px` or `none`)
Draw borders between rows. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders.
--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 size (e.g. `0`, `4px` or `50%`)
Border radius applied to many elements such as dialogs and form widgets
--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-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 size (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 size (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 size (e.g. `0`, `4px` or `50%`)
width of the whole toggle button component
--ag-toggle-button-height
CSS size (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 size (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 size (e.g. `0`, `4px` or `50%`)
The size of square icons and icon-buttons
--ag-widget-container-horizontal-padding
CSS size (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 size (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 size (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 size (e.g. `0`, `4px` or `50%`)
The vertical spacing between widgets in containers that contain vertically stacked widgets
--ag-cell-horizontal-padding
CSS size (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 size (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 size (e.g. `0`, `4px` or `50%`)
Height of grid rows
--ag-header-height
CSS size (e.g. `0`, `4px` or `50%`)
Height of header rows
--ag-list-item-height
CSS size (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 size (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 size (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 size (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 size (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 size (e.g. `0`, `4px` or `50%`)
How much to indent child columns in the column tool panel relative to their parent
--ag-row-group-indent-size
CSS size (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 size (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 size (e.g. `0`, `4px` or `50%`)
Minimum width of a tabbed menu (usd in charts)
--ag-menu-min-width
CSS size (e.g. `0`, `4px` or `50%`)
Minimum width of a menu that is not tabbed
--ag-side-bar-panel-width
CSS size (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 size (e.g. `0`, `4px` or `50%`)
Default font size for text in the grid
--ag-icon-font-family
CSS size (e.g. `0`, `4px` or `50%`)
The icon font used by the grid.
--ag-card-radius
CSS size (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