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

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

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
--infinite-menu-background
--infinite-menu-color
--infinite-menu-padding
--infinite-menu-cell-padding-vertical
--infinite-menu-cell-padding-horizontal
--infinite-menu-cell-margin-vertical
--infinite-menu-item-disabled-background
--infinite-menu-item-active-background
--infinite-menu-item-active-opacity
--infinite-menu-item-pressed-opacity
--infinite-menu-item-pressed-background
--infinite-menu-item-disabled-opacity
--infinite-menu-border-radius
--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