DataGrid - Styling and theming

Styling and theming

This page is only enumerating some styling props and CSS classNames applied to the <ReactDataGrid />.
For details on how to use different styling props for cells, headers or rows, see corresponding pages like Customizing rows, cells and headers. Another very useful resource is the page on Getting started - configuring columns.
Styling and customizing the <ReactDataGrid /> scrollbars is discussed in Scrolling and scroll customization page.
For top-level <ReactDataGrid /> styling, you can use one of the following strategies:
  • Specify a style prop with the desired styling object
  • Specify a DataGrid className - note that this will not override the default <ReactDataGrid /> className of InovuaReactDataGrid, but rather will be appended to the classNames the <ReactDataGrid />already has.

CSS classes - root component

ClassNameDescription
InovuaReactDataGrid
This is the block className for all <ReactDataGrid /> components. Always applied.
InovuaReactDataGrid--show-hover-rows
Applied when showHoverRows=true. Defaults to true.
InovuaReactDataGrid--cell-borders-vertical
InovuaReactDataGrid--cell-borders-horizontal
InovuaReactDataGrid--focused
Applied when the <ReactDataGrid /> is focused. It can be focused via user interaction or by calling the focus method.
InovuaReactDataGrid--has-locked
Applied when the <ReactDataGrid /> contains locked columns.
InovuaReactDataGrid--has-locked-start
Applied when the <ReactDataGrid /> contains locked columns locked to the start.
InovuaReactDataGrid--has-locked-end
Applied when the <ReactDataGrid /> contains locked columns locked to the end.
InovuaReactDataGrid--grouped
Applied when the <ReactDataGrid /> has groupBy set to a non-empty array.
InovuaReactDataGrid--virtualize-columns
Applied when the <ReactDataGrid /> applies column virtualization - see virtualizeColumns and virtualizeColumnsThreshold
InovuaReactDataGrid--show-border-right
Applied when the <ReactDataGrid /> columns do not fill all the available viewport and there still is some extra space at the end of the last column.

CSS classes - headers

ClassNameDescription
InovuaReactDataGrid__header
This is the block className for the <ReactDataGrid /> header. Always applied.
InovuaReactDataGrid__column-header__resize-wrapper
When a column is resizable, it's header is wrapper in an element that has this className.
InovuaReactDataGrid__column-header
Applied to column headers.
InovuaReactDataGrid__column-header--resizable
Applied to the headers of resizable columns.
InovuaReactDataGrid__column-header--sortable
Applied to the headers of sortable columns.
InovuaReactDataGrid__column-header--sort-asc
Applied to the headers of sortable columns that are sorted in ascending order.
InovuaReactDataGrid__column-header--sort-desc
Applied to the headers of sortable columns that are sorted in descending order.
InovuaReactDataGrid__column-header--unlocked
Applied to the headers of columns which a not locked.
InovuaReactDataGrid__column-header--locked
Applied to the headers of locked columns.
InovuaReactDataGrid__column-header--locked-start
Applied to the headers of columns locked to the start.
InovuaReactDataGrid__column-header--locked-end
Applied to the headers of columns locked to the end.
InovuaReactDataGrid__column-header--last
Applied to the header of the last visible column in the grid.
InovuaReactDataGrid__column-header--first
Applied to the header of the first visible column in the grid.
InovuaReactDataGrid__column-header--first-in-section
Applied to the header of the first column in a section - eg: first locked-start column, first unlocked column, first locked-end column.
InovuaReactDataGrid__column-header--last-in-section
Applied to the header of the last column in a section - eg: last locked-start column, last unlocked column, last locked-end column.
InovuaReactDataGrid__column-header--user-select-none
Applied to the headers of columns that have headerUserSelect=false or headerUserSelect is undefined, but userSelect=false.
InovuaReactDataGrid__column-header--user-select-text
Applied to the headers of columns that have headerUserSelect=true or headerUserSelect is undefined, but userSelect=true.
InovuaReactDataGrid__column-header--show-border-right
Applied to the column header, for columns that display a right border in the header.
InovuaReactDataGrid__column-header--show-border-left
Applied to the column header, for columns that display a left border in the header.
InovuaReactDataGrid__column-header--align-[ALIGN_VALUE]
Applied to column header, with the value of headerAlign prop. If no headerAlign is defined, textAlign will be used instead.
InovuaReactDataGrid__column-header--vertical-align-[VERTICAL_ALIGN_VALUE]
Applied to column header, with the value of headerVerticalAlign prop. If no headerVerticalAlign is defined, textVerticalAlign will be used instead.
InovuaReactDataGrid__column-header__content
For columns with headerEllipsis=true, an element with this class is rendered as a child of InovuaReactDataGrid__column-header
This also has the InovuaReactDataGrid__box--ellipsis className.
InovuaReactDataGrid__sort-icon
Applied to the sort SVG icon.
InovuaReactDataGrid__sort-icon--[SORT_DIR]
Applied to the sort SVG icon, when the column is sorted. Applied with "asc" or "desc", depending on the current sort order.

CSS classes - rows

ClassNameDescription
InovuaReactDataGrid__row
Applied to all <ReactDataGrid /> rows.
InovuaReactDataGrid__row--odd
Applied to all odd <ReactDataGrid /> rows, when showZebraRows=true.
InovuaReactDataGrid__row--even
Applied to even <ReactDataGrid /> rows, when showZebraRows=true.
When showZebraRows=false, all <ReactDataGrid /> rows have this className.
InovuaReactDataGrid__row--rowheight
Applied to rows with fixed height - so it's applied when rowHeight!=null (defaults to 40).
InovuaReactDataGrid__row--virtualize-columns
Applied to the row, when the <ReactDataGrid /> virtualizes columns. See virtualizeColumns and virtualizeColumnsThreshold.
InovuaReactDataGrid__row--active
Applied to the active <ReactDataGrid /> row.
InovuaReactDataGrid__row--collapsed
Applied to group rows, when the row is collapsed. Only in grouped grids. See groupBy.
InovuaReactDataGrid__row--scrolling
Applied to <ReactDataGrid /> rows when scrolling is in progress.
InovuaReactDataGrid__row--selected
Applied to selected rows.
InovuaReactDataGrid__row--first
Applied to the first row in the grid.
InovuaReactDataGrid__row--first-in-group
Applied to the first row in a group, for grouped grids. See groupBy.
InovuaReactDataGrid__row--last-in-group
Applied to the last row in a group, for grouped grids. See groupBy.
InovuaReactDataGrid__row--group-row
Applied to a group row, for grouped grids. See groupBy.
InovuaReactDataGrid__row--last
Applied to the last row in the grid.
InovuaReactDataGrid__row--empty
Applied to empty rows - only when showEmptyRows=true.

CSS classes - cells

ClassNameDescription
InovuaReactDataGrid__cell
Applied to all <ReactDataGrid /> cells.
InovuaReactDataGrid__cell--unlocked
Applied to cells in unlocked columns.
InovuaReactDataGrid__cell--locked
Applied to cells in locked columns.
InovuaReactDataGrid__cell--locked-start
Applied to cells in locked="start" columns.
InovuaReactDataGrid__locked-start-wrapper
Applied to the wrapper for locked start cells.
InovuaReactDataGrid__locked-end-wrapper
Applied to the wrapper for locked end cells.
InovuaReactDataGrid__cell--locked-end
Applied to cells in locked="end" columns.
InovuaReactDataGrid__cell--align-start
Applied to cells in columns with textAlign="start".
InovuaReactDataGrid__cell--align-center
Applied to cells in columns with textAlign="center".
InovuaReactDataGrid__cell--align-end
Applied to cells in columns with textAlign="end".
InovuaReactDataGrid__cell--vertical-align-start
Applied to cells in columns with textVerticalAlign="start" (or textVerticalAlign="top", which is equivalent).
InovuaReactDataGrid__cell--vertical-align-middle
Applied to cells in columns with textVerticalAlign="middle" (or textVerticalAlign="center", which is equivalent).
InovuaReactDataGrid__cell--vertical-align-end
Applied to cells in columns with textVerticalAlign="end" (or textVerticalAlign="bottom", which is equivalent).
InovuaReactDataGrid__cell--show-border-left
Applied to cells that have a left border.
InovuaReactDataGrid__cell--show-border-bottom
Applied to cells that have a bottom border.
InovuaReactDataGrid__cell--show-border-right
Applied to cells that have a right border.
InovuaReactDataGrid__cell--show-border-top
Applied to cells that have a top border.
InovuaReactDataGrid__cell--group-cell
Applied to cells that are group cells. See groupBy.
InovuaReactDataGrid__cell--no-background
Applied to cells that should not have a background. This is the case for some group cells, when the <ReactDataGrid /> is configured with groupBy.
InovuaReactDataGrid__cell--user-select-none
Applied to cells in columns with userSelect=false.
InovuaReactDataGrid__cell--user-select-text
Applied to cells in columns with userSelect=true.
InovuaReactDataGrid__cell--first
Applied to cells that are the first in a row.
InovuaReactDataGrid__cell--last
Applied to cells that are the last in a row.
InovuaReactDataGrid__cell--first-in-section
Applied to cells that are the first in a row section (eg: first in locked start section or in unlocked section, or in locked end section).
InovuaReactDataGrid__cell--last-in-section
Applied to cells that are the last in a row section (eg: last in locked start section or in unlocked section, or in locked end section).
InovuaReactDataGrid__cell__content
When the column has textEllipsis=true (which is the default), the cell content is rendered in an element with this className.
This is a direct child of .InovuaReactDataGrid__cell.

Themes

The <ReactDataGrid /> supports a theme prop, which by default has the value of "default-light".
In order for the default theme to be applied you have to import @inovua/reactdatagrid-enterprise/index.css into your app:
import '@inovua/reactdatagrid-enterprise/index.css'
This file contains both the structural styles that are needed for the <ReactDataGrid />, as well as the default (light) theme.
In case you only want to load the structural styles for the <ReactDataGrid />, you can import @inovua/reactdatagrid-enterprise/base.css instead.
import '@inovua/reactdatagrid-enterprise/base.css'
Be aware, though, that in this case you'll have to style the <ReactDataGrid /> appearance from scratch.
However, you can import both the structural styles and the default theme separately:
import '@inovua/reactdatagrid-enterprise/base.css'
import '@inovua/reactdatagrid-enterprise/theme/default-light.css'
Here's a list of available thems:
  • "amber-light"
  • "amber-dark"
  • "blue-light"
  • "blue-dark"
  • "default-light"
  • "default-dark"
  • "green-light"
  • "green-dark"
  • "pink-light"
  • "pink-dark"
In order to use any of the above, you have to import @inovua/reactdatagrid-enterprise/theme/<THEME_NAME>.css. Also make sure you import @inovua/reactdatagrid-enterprise/base.css (or @inovua/reactdatagrid-community/base.css). The base.css file is included with @inovua/reactdatagrid-enterprise/index.css, which contains @inovua/reactdatagrid-enterprise/base.css AND the default theme, @inovua/reactdatagrid-enterprise/theme/default-light.css.
Top