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.
--infinite-accent-colorError color
--infinite-error-colorColor
The text color inside the component
--infinite-colorSpace 0
--infinite-space-0Space 1
--infinite-space-1Space 2
--infinite-space-2Space 3
--infinite-space-3Space 4
--infinite-space-4Space 5
--infinite-space-5Space 6
--infinite-space-6Space 7
--infinite-space-7Space 8
--infinite-space-8Space 9
--infinite-space-9Space 10
--infinite-space-10Font size 0
--infinite-font-size-0Font size 1
--infinite-font-size-1Font size 2
--infinite-font-size-2Font size 3
--infinite-font-size-3Font size 4
--infinite-font-size-4Font size 5
--infinite-font-size-5Font size 6
--infinite-font-size-6Font size 7
--infinite-font-size-7Font family
--infinite-font-familyMin height
--infinite-min-heightBorder radius
--infinite-border-radiusBackground
The background color for the whole component.
Overriden in the dark theme.
--infinite-backgroundIcon size
--infinite-icon-sizeLoad mask padding
The padding used for the content inside the LoadMask.
--infinite-load-mask-paddingLoad mask color
--infinite-load-mask-colorLoad mask text background
--infinite-load-mask-text-backgroundLoad mask overlay background
--infinite-load-mask-overlay-backgroundLoad mask overlay opacity
--infinite-load-mask-overlay-opacityLoad mask border radius
--infinite-load-mask-border-radiusHeader background
Background color for the header. Defaults to --infinie-header-cell-background.
Overriden in the dark theme.
--infinite-header-backgroundHeader color
The text color inside the header.
Overriden in the dark theme.
--infinite-header-colorColumn header height
The height of the column header.
--infinite-column-header-heightHeader cell background
Background for header cells.
Overriden in the dark theme.
--infinite-header-cell-backgroundHeader cell hover background
--infinite-header-cell-hover-backgroundHeader cell padding
--infinite-header-cell-paddingHeader cell padding x
--infinite-header-cell-padding-xHeader cell padding y
--infinite-header-cell-padding-yHeader cell icon size
--infinite-header-cell-icon-sizeHeader cell menu icon line width
--infinite-header-cell-menu-icon-line-widthHeader cell sort icon margin
--infinite-header-cell-sort-icon-marginResize 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.
--infinite-resize-handle-active-area-widthResize handle width
The width of the colored column resize handle that is displayed on hover and on drag. Defaults to 2px
--infinite-resize-handle-widthResize 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.
--infinite-resize-handle-hover-backgroundResize handle constrained hover background
The color of the column resize handle when it has reached a min/max constraint.
--infinite-resize-handle-constrained-hover-backgroundFilter operator padding x
--infinite-filter-operator-padding-xFilter editor padding x
--infinite-filter-editor-padding-xFilter editor margin x
--infinite-filter-editor-margin-xFilter operator padding y
--infinite-filter-operator-padding-yFilter editor padding y
--infinite-filter-editor-padding-yFilter editor margin y
--infinite-filter-editor-margin-yCell padding
--infinite-cell-paddingCell border width
--infinite-cell-border-widthCell border
Specifies the border for cells.
Overriden in the dark theme - eg: 1px solid #2a323d
--infinite-cell-borderCell border invisible
--infinite-cell-border-invisibleCell border radius
--infinite-cell-border-radiusColumn reorder effect duration
--infinite-column-reorder-effect-durationPinned cell border
--infinite-pinned-cell-borderCell color
Text color inside rows. Defaults to currentColor
Overriden in dark theme.
--infinite-cell-colorSelected cell background
The background for selected cells, when cell selection is enabled.
If not specified, it will default to var(--infinite-active-cell-background).
--infinite-selected-cell-backgroundSelected 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)
--infinite-selected-cell-background-alphaSelected 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).
--infinite-selected-cell-background-alpha--table-unfocusedSelected cell border color
The color for border of the selected cell (when cell selection is enabled).
Defaults to var(--infinite-active-cell-border-color).
--infinite-selected-cell-border-colorSelected cell border width
The width of the border for the selected cell. Defaults to var(--infinite-active-cell-border-width).
--infinite-selected-cell-border-widthSelected 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).
--infinite-selected-cell-border-styleSelected 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).
--infinite-selected-cell-borderActive 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.
--infinite-active-cell-background-alphaActive cell background alpha table unfocused
Same as the above, but applied when the component does not have focus.
--infinite-active-cell-background-alpha--table-unfocusedActive 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.
--infinite-active-cell-backgroundActive cell border color
The color for border of the active cell (when cell keyboard navigation is enabled).
--infinite-active-cell-border-colorActive cell border width
The width of the border for the active cell.
--infinite-active-cell-border-widthActive cell border style
The style of the border for the active cell (eg: 'solid', 'dashed', 'dotted') - defaults to 'dashed'.
--infinite-active-cell-border-styleActive 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).
--infinite-active-cell-borderSelection checkbox margin inline
--infinite-selection-checkbox-margin-inlineMenu background
--infinite-menu-backgroundMenu color
--infinite-menu-colorMenu padding
--infinite-menu-paddingMenu cell padding vertical
--infinite-menu-cell-padding-verticalMenu cell padding horizontal
--infinite-menu-cell-padding-horizontalMenu cell margin vertical
--infinite-menu-cell-margin-verticalMenu item disabled background
--infinite-menu-item-disabled-backgroundMenu item active background
--infinite-menu-item-active-backgroundMenu item active opacity
--infinite-menu-item-active-opacityMenu item pressed opacity
--infinite-menu-item-pressed-opacityMenu item pressed background
--infinite-menu-item-pressed-backgroundMenu item disabled opacity
--infinite-menu-item-disabled-opacityMenu border radius
--infinite-menu-border-radiusMenu shadow color
--infinite-menu-shadow-colorRow background
Background color for rows. Defaults to --infinite-background.
Overriden in dark theme.
--infinite-row-backgroundRow odd background
Background color for odd rows. Even rows will use --infinite-row-background.
Overriden in dark theme.
--infinite-row-odd-backgroundRow selected background
--infinite-row-selected-backgroundActive 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.
--infinite-active-row-backgroundActive row border color
The border color for the active row. Defaults to the value of var(--infinite-active-cell-border-color).
--infinite-active-row-border-colorActive row border width
The width of the border for the active row. Defaults to the value of var(--infinite-active-cell-border-width).
--infinite-active-row-border-widthActive 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.
--infinite-active-row-border-styleActive 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).
--infinite-active-row-borderActive 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).
--infinite-active-row-background-alphaActive 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).
--infinite-active-row-background-alpha--table-unfocusedRow hover background
Background color for rows, on hover.
Overriden in the dark theme.
--infinite-row-hover-backgroundRow selected hover background
--infinite-row-selected-hover-backgroundGroup row background
--infinite-group-row-backgroundGroup row column nesting
--infinite-group-row-column-nestingRow pointer events while scrolling
--infinite-row-pointer-events-while-scrolling