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-color
Error color
--infinite-error-color
Color
The text color inside the component
--infinite-color
Space 0
--infinite-space-0
Space 1
--infinite-space-1
Space 2
--infinite-space-2
Space 3
--infinite-space-3
Space 4
--infinite-space-4
Space 5
--infinite-space-5
Space 6
--infinite-space-6
Space 7
--infinite-space-7
Space 8
--infinite-space-8
Space 9
--infinite-space-9
Space 10
--infinite-space-10
Font size 0
--infinite-font-size-0
Font size 1
--infinite-font-size-1
Font size 2
--infinite-font-size-2
Font size 3
--infinite-font-size-3
Font size 4
--infinite-font-size-4
Font size 5
--infinite-font-size-5
Font size 6
--infinite-font-size-6
Font size 7
--infinite-font-size-7
Font family
--infinite-font-family
Min height
--infinite-min-height
Border radius
--infinite-border-radius
Background
The background color for the whole component.
Overriden in the dark
theme.
--infinite-background
Icon size
--infinite-icon-size
Load mask padding
The padding used for the content inside the LoadMask.
--infinite-load-mask-padding
Load mask color
--infinite-load-mask-color
Load mask text background
--infinite-load-mask-text-background
Load mask overlay background
--infinite-load-mask-overlay-background
Load mask overlay opacity
--infinite-load-mask-overlay-opacity
Load mask border radius
--infinite-load-mask-border-radius
Header background
Background color for the header. Defaults to --infinie-header-cell-background
.
Overriden in the dark
theme.
--infinite-header-background
Header color
The text color inside the header.
Overriden in the dark
theme.
--infinite-header-color
Column header height
The height of the column header.
--infinite-column-header-height
Header cell background
Background for header cells.
Overriden in the dark
theme.
--infinite-header-cell-background
Header cell hover background
--infinite-header-cell-hover-background
Header cell padding
--infinite-header-cell-padding
Header cell padding x
--infinite-header-cell-padding-x
Header cell padding y
--infinite-header-cell-padding-y
Header cell icon size
--infinite-header-cell-icon-size
Header cell menu icon line width
--infinite-header-cell-menu-icon-line-width
Header cell sort icon margin
--infinite-header-cell-sort-icon-margin
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.
--infinite-resize-handle-active-area-width
Resize handle width
The width of the colored column resize handle that is displayed on hover and on drag. Defaults to 2px
--infinite-resize-handle-width
Resize 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-background
Resize handle constrained hover background
The color of the column resize handle when it has reached a min/max constraint.
--infinite-resize-handle-constrained-hover-background
Filter operator padding x
--infinite-filter-operator-padding-x
Filter editor padding x
--infinite-filter-editor-padding-x
Filter editor margin x
--infinite-filter-editor-margin-x
Filter operator padding y
--infinite-filter-operator-padding-y
Filter editor padding y
--infinite-filter-editor-padding-y
Filter editor margin y
--infinite-filter-editor-margin-y
Cell padding
--infinite-cell-padding
Cell border width
--infinite-cell-border-width
Cell border
Specifies the border for cells.
Overriden in the dark
theme - eg: 1px solid #2a323d
--infinite-cell-border
Cell border invisible
--infinite-cell-border-invisible
Cell border radius
--infinite-cell-border-radius
Column reorder effect duration
--infinite-column-reorder-effect-duration
Pinned cell border
--infinite-pinned-cell-border
Cell color
Text color inside rows. Defaults to currentColor
Overriden in dark
theme.
--infinite-cell-color
Active 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--r
Active 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--g
Active 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--b
Active 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-alpha
Active cell background alpha table unfocused
Same as the above, but applied when the component does not have focus.
--infinite-active-cell-background-alpha--table-unfocused
Active 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-background
Active cell border color
The color for border of the active cell (when cell keyboard navigation is enabled).
--infinite-active-cell-border-color
Active cell border width
The width of the border for the active cell.
--infinite-active-cell-border-width
Active cell border style
The style of the border for the active cell (eg: ‘solid’, ‘dashed’, ‘dotted’) - defaults to ‘dashed’.
--infinite-active-cell-border-style
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)
.
--infinite-active-cell-border
Selection checkbox margin inline
--infinite-selection-checkbox-margin-inline
Menu background
--infinite-menu-background
Menu color
--infinite-menu-color
Menu padding
--infinite-menu-padding
Menu cell padding vertical
--infinite-menu-cell-padding-vertical
Menu cell padding horizontal
--infinite-menu-cell-padding-horizontal
Menu cell margin vertical
--infinite-menu-cell-margin-vertical
Menu item disabled background
--infinite-menu-item-disabled-background
Menu item active background
--infinite-menu-item-active-background
Menu item active opacity
--infinite-menu-item-active-opacity
Menu item pressed opacity
--infinite-menu-item-pressed-opacity
Menu item pressed background
--infinite-menu-item-pressed-background
Menu item disabled opacity
--infinite-menu-item-disabled-opacity
Menu border radius
--infinite-menu-border-radius
Menu shadow color
--infinite-menu-shadow-color
Row background
Background color for rows. Defaults to --infinite-background
.
Overriden in dark
theme.
--infinite-row-background
Row odd background
Background color for odd rows. Even rows will use --infinite-row-background
.
Overriden in dark
theme.
--infinite-row-odd-background
Row selected background
--infinite-row-selected-background
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.
--infinite-active-row-background
Active 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-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)
.
--infinite-active-row-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.
--infinite-active-row-border-style
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)
.
--infinite-active-row-border
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)
.
--infinite-active-row-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)
.
--infinite-active-row-background-alpha--table-unfocused
Row hover background
Background color for rows, on hover.
Overriden in the dark
theme.
--infinite-row-hover-background
Row selected hover background
--infinite-row-selected-hover-background
Group row background
--infinite-group-row-background
Group row column nesting
--infinite-group-row-column-nesting
Row pointer events while scrolling
--infinite-row-pointer-events-while-scrolling