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-colorActive cell border color r
The RED component of the color used for the active cell when cell keyboard navigation is enabled.
The easiest way to define the color of the active cell is to use these 3 variables:
--infinite-active-cell-border-color--r
--infinite-active-cell-border-color--g
--infinite-active-cell-border-color--b
as they define both the border and the background color of the active cell and the active row.
You can also specify the GREEN and BLUE components of the color using the next two css vars.
The border color of the active cell is decomposed into multiple variables for convenience as by default
the background of the active cell is the same color, but with the opacity specified by the value of --infinie-active-cell-background-alpha.
If you don’t want this, you can use --infinite-active-cell-background instead.
--infinite-active-cell-border-color--rActive cell border color g
The GREEN component of the color used for the active cell when cell keyboard navigation is enabled.
The easiest way to define the color of the active cell is to use these 3 variables:
--infinite-active-cell-border-color--r
--infinite-active-cell-border-color--g
--infinite-active-cell-border-color--b
as they define both the border and the background color of the active cell and the active row.
You can also specify the RED and BLUE components of the color using the next two css vars.
The border color of the active cell is decomposed into multiple variables for convenience as by default
the background of the active cell is the same color, but with the opacity specified by the value of --infinie-active-cell-background-alpha.
If you don’t want this, you can use --infinite-active-cell-background instead.
--infinite-active-cell-border-color--gActive cell border color b
The BLUE component of the color used for the active cell when cell keyboard navigation is enabled.
The easiest way to define the color of the active cell is to use these 3 variables:
--infinite-active-cell-border-color--r
--infinite-active-cell-border-color--g
--infinite-active-cell-border-color--b
as they define both the border and the background color of the active cell and the active row.
You can also specify the RED and GREEN components of the color using the next two css vars.
The border color of the active cell is decomposed into multiple variables for convenience as by default
the background of the active cell is the same color, but with the opacity specified by the value of --infinie-active-cell-background-alpha.
If you don’t want this, you can use --infinite-active-cell-background instead.
--infinite-active-cell-border-color--bActive cell background alpha
The opacity of the background color for the active cell (when cell keyboard navigation is enabled).
The background color of the active cell is based on the value of the above 3 variables, but with the opacity specified by this variable. 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 defaults to the same color (with modified opacity, as explained above) as the border color.
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