<ReactDataGrid />.<ReactDataGrid /> scrollbars is discussed in Scrolling and scroll customization page.<ReactDataGrid /> styling, you can use one of the following strategies:| ClassName | Description |
|---|---|
| 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 | Applied when showCellBorders=true and when showCellBorders='vertical'. |
| InovuaReactDataGrid--cell-borders-horizontal | Applied when showCellBorders=true and when showCellBorders='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. |
| ClassName | Description |
|---|---|
| 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-headerThis 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. |
| ClassName | Description |
|---|---|
| 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. |
| ClassName | Description |
|---|---|
| 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. |
@inovua/reactdatagrid-enterprise/index.css into your app:import '@inovua/reactdatagrid-enterprise/index.css'<ReactDataGrid />, as well as the default (light) theme.<ReactDataGrid />, you can import @inovua/reactdatagrid-enterprise/base.css instead.import '@inovua/reactdatagrid-enterprise/base.css'<ReactDataGrid /> appearance from scratch.import '@inovua/reactdatagrid-enterprise/base.css'
import '@inovua/reactdatagrid-enterprise/theme/default-light.css'"amber-light" "amber-dark" "blue-light" "blue-dark" "default-light" "default-dark" "green-light" "green-dark" "pink-light" "pink-dark" @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..scss extension, having the name of the theme. Inside the file you have to import the default light/dark theme "default-light" or "default-dark" and, in the final step, you have to assign the theme name and the accent color to the following SCSS variables:$DATAGRID_THEME_NAME: <THEME_NAME>;
$INOVUA_DATAGRID_ACCENT_COLOR: <ACCENT_COLOR>;"orange-dark" theme, the file will be look like this:$DATAGRID_THEME_NAME: 'orange-dark';
$INOVUA_DATAGRID_ACCENT_COLOR: #855703;
@import '@inovua/reactdatagrid-community/style/theme/default-dark/index.scss';