CSS Variables
Below you can find the complete list of CSS variables that can be used to style the component.
Accent color#
Brand-specific accent color. This probably needs override to match your app.
Success color#
Error color#
Color#
The text color inside the component
Space 0#
Space 1#
Space 2#
Space 3#
Space 4#
Space 5#
Space 6#
Space 7#
Space 8#
Space 9#
Space 10#
Font size 0#
Font size 1#
Font size 2#
Font size 3#
Font size 4#
Font size 5#
Font size 6#
Font size 7#
Font family#
Font size#
The font size of the component. Not specified by default, in which case the font size is inherited from the parent element.
The value is multiplied by a third of the difference of
--infinite-density-scale from 1 - so with 0.8, it's ~93%.Min height#
Border radius#
Focus outline#
Background#
The background color for the whole component.
Overriden in the
dark theme.Icon size#
Row height#
The row height used when the
rowHeight prop is not specified. Defaults to 40px.The value is multiplied by
--infinite-density-scale.Density scale#
A unitless multiplier for the row height, the column header height, the cell paddings, the menu item, column filter and grouping toolbar item spacing and the font size.
Set by the
infinite-density--compact (0.8), infinite-density--comfortable (1) and infinite-density--spacious (1.2) classNames.Defaults to
1. The font size is scaled by a third of the difference, so 0.8 makes it ~93%.Icon expand collapse#
The icon for expanding/collapsing group rows, tree nodes and row details. Also used for submenu arrows.
It should point towards the end (right). It's rotated when expanded.
Defaults to a chevron.
Icon loading#
The loading icon - rotated by a CSS animation. Defaults to a spinner arc.
Icon sort asc#
The sort ascending icon displayed in column headers. When not specified, the default (animated lines) sort icon is used.
Icon sort desc#
The sort descending icon displayed in column headers. When not specified, the default (animated lines) sort icon is used.
Icon filter#
The icon displayed in the header of filtered columns. When not specified, the default (lines) filter icon is used.
Icon menu#
The column menu icon displayed in column headers. When not specified, the default (lines) menu icon is used.
Icon done#
The icon for the selected filter operator, in the filter operator menu. Defaults to a check mark.
Icon clear#
The clear icon - used for clearing the filter, in the filter operator menu, and for removing a group in the grouping toolbar. Defaults to an
X.Icon hidden#
The icon displayed when dragging a column outside the table, to hide it. Defaults to a crossed eye.
Icon filter operator contains#
Icon filter operator starts with#
Icon filter operator ends with#
Icon filter operator eq#
Icon filter operator neq#
Icon filter operator gt#
Icon filter operator gte#
Icon filter operator lt#
Icon filter operator lte#
Grouping toolbar color#
Grouping toolbar background#
Grouping toolbar reject background#
Grouping toolbar active background#
Grouping toolbar active background alpha#
Grouping toolbar padding#
Grouping toolbar border#
Grouping toolbar reject border#
Grouping toolbar gap#
Grouping toolbar item border#
Grouping toolbar item border radius#
Grouping toolbar item active border#
Grouping toolbar item background#
Grouping toolbar item active background#
Grouping toolbar item active background alpha#
Load mask padding#
The padding used for the content inside the LoadMask.
Load mask color#
Load mask text background#
Load mask overlay background#
Load mask overlay opacity#
Load mask border radius#
Header background#
Background color for the header. Defaults to
--infinie-header-cell-background.Overriden in the
dark theme.Header color#
The text color inside the header.
Overriden in the
dark theme.Column header height#
The height of the column header.
When the
columnHeaderHeight prop is not specified, the value is multiplied by --infinite-density-scale.Header cell background#
Background for header cells.
Overriden in the
dark theme.Header cell hover background#
Header cell border#
Header cell padding#
The padding for header cells. Not specified by default, in which case header cells use
--infinite-header-cell-padding-y and --infinite-header-cell-padding-x, scaled by --infinite-density-scale.When specified, it's used as is (not scaled by the density).
Header cell padding x#
Header cell padding y#
Header cell icon size#
Header cell menu icon line width#
Header cell sort icon margin#
Header cell border right#
Resize handle active area width#
The width of the area you can hover over in order to grab the column resize handle.
Defaults to
20px.The purpose of this active area is to make it easier to grab the resize handle.
Resize handle width#
The width of the colored column resize handle that is displayed on hover and on drag. Defaults to
2pxResize handle hover background#
The color of the column resize handle - the resize handle is the visible indicator that you see
when hovering over the right-edge of a resizable column. Also visible on drag while doing a column resize.
Resize handle constrained hover background#
The color of the column resize handle when it has reached a min/max constraint.
Filter operator padding x#
Filter editor padding x#
Filter editor margin x#
Filter operator padding y#
Filter editor padding y#
Filter editor margin y#
Filter editor background#
Filter editor border#
Filter editor focus border color#
Filter editor border radius#
Filter editor color#
Active cell indicator inset#
Flashing duration#
Flashing animation name#
Flashing overlay z index#
Flashing background#
Flashing up background#
Flashing down background#
Cell padding#
The padding for cells. Not specified by default, in which case cells use
--infinite-cell-padding-y and --infinite-cell-padding-x, scaled by --infinite-density-scale.When specified, it's used as is (not scaled by the density).
Cell padding x#
The horizontal padding for cells. Defaults to
var(--infinite-space-3).Cell padding y#
The vertical padding for cells. Defaults to
var(--infinite-space-2).Cell border width#
Cell border color#
Cell border#
Specifies the border for cells.
Overriden in the
dark theme - eg: 1px solid #2a323dCell border left#
Cell border right#
Cell border top#
Cell border invisible#
Cell border radius#
Column reorder effect duration#
Pinned cell border#
Horizontal layout column reorder disabled page opacity#
Cell color#
Text color inside rows. Defaults to
currentColorOverriden in
dark theme.Selected cell background#
The background for selected cells, when cell selection is enabled.
If not specified, it will default to
var(--infinite-active-cell-background).Selected cell background default#
Selected cell background alpha#
The opacity of the background color for the selected cell.
If not specified, it will default to the value for
var(--infinite-active-cell-background-alpha)Selected cell background alpha table unfocused#
The opacity of the background color for the selected cell, when the table is unfocused.
If not specified, it will default to
var(--infinite-active-cell-background-alpha--table-unfocused).Selected cell border color#
The color for border of the selected cell (when cell selection is enabled).
Defaults to
var(--infinite-active-cell-border-color).Selected cell border width#
The width of the border for the selected cell. Defaults to
var(--infinite-active-cell-border-width).Selected cell border style#
The style of the border for the selected cell (eg: 'solid', 'dashed', 'dotted') - defaults to 'dashed'.
Defaults to
var(--infinite-active-cell-border-style).Selected cell border#
Specifies the border for the selected cell. Defaults to
var(--infinite-selected-cell-border-width) var(--infinite-selected-cell-border-style) var(--infinite-selected-cell-border-color).Active cell background alpha#
The opacity of the background color for the active cell (when cell keyboard navigation is enabled).
Eg: 0.25
If
activeBackground is not explicitly defined (this is the default), the background color of the active cell
is the same as the border color (activeBorderColor), but with this modified opacity.If
activeBorderColor is also not defined, the accent color will be used.This is applied when the component has focus.
Active cell background alpha table unfocused#
Same as the above, but applied when the component does not have focus.
Active cell background#
The background color of the active cell.
If not specified, it will default to
activeBorderColor with the opacity of activeBackgroundAlpha.
If activeBorderColor is not specified, it will default to the accent color, with the same opacity as mentioned.However, specify this to explicitly override the default.
Active cell background default#
Active cell border color#
The color for border of the active cell (when cell keyboard navigation is enabled).
Active cell border width#
The width of the border for the active cell.
Active cell border style#
The style of the border for the active cell (eg: 'solid', 'dashed', 'dotted') - defaults to 'dashed'.
Active cell border#
Specifies the border for the active cell. Defaults to
var(--infinite-active-cell-border-width) var(--infinite-active-cell-border-style) var(--infinite-active-cell-border-color).Selection checkbox margin inline#
Expand collapse icon color#
Menu background#
Menu color#
Menu separator color#
Menu padding#
Menu cell padding vertical#
Menu cell padding horizontal#
Menu cell margin vertical#
Menu item disabled background#
Menu item active background#
Menu item active opacity#
Menu item pressed opacity#
Menu item pressed background#
Menu item disabled opacity#
Menu border radius#
Menu shadow color#
Rowdetail background#
Rowdetail padding#
Rowdetail grid height#
Row background#
Background color for rows. Defaults to
--infinite-background.Overriden in
dark theme.Row odd background#
Background color for odd rows. Even rows will use
--infinite-row-background.Overriden in
dark theme.Row disabled background#
Row odd disabled background#
Background color for disabled rows. For setting the background of disabled even rows, use
--infinite-row-disabled-background.Row selected background#
Row disabled opacity#
Opacity for disabled rows. Defaults to 0.5
Active row background#
The background color of the active row. Defaults to the value of
var(--infinite-active-cell-background).However, specify this to explicitly override the default.
Active row border color#
The border color for the active row. Defaults to the value of
var(--infinite-active-cell-border-color).Active row border width#
The width of the border for the active row. Defaults to the value of
var(--infinite-active-cell-border-width).Active row border style#
The style of the border for the active row (eg: 'solid', 'dashed', 'dotted') - defaults to the value of
var(--infinite-active-cell-border-style), which is dashed by default.Active row border#
Specifies the border for the active row. Defaults to
var(--infinite-active-row-border-width) var(--infinite-active-row-border-style) var(--infinite-active-row-border-color).Active row background alpha#
The opacity of the background color for the active row (when row keyboard navigation is enabled).
When you explicitly specify
--infinite-active-row-background, this variable will not be used.
Instead, this variable is used when the active row background uses the color of the active cell (border).This is applied when the component has focus.
Defaults to the value of
var(--infinite-active-cell-background-alpha).Active row background alpha table unfocused#
Same as the above, but applied when the component does not have focus.
When you explicitly specify
--infinite-active-row-background, this variable will not be used.
Instead, this variable is used when the active row background uses the color of the active cell (border).Defaults to the value of
var(--infinite-active-cell-background-alpha--table-unfocused).Row hover background#
Background color for rows, on hover.
Overriden in the
dark theme.