Top
DataGrid - Styling and theming
DataGrid
This page is only enumerating some styling props and CSS classNames applied to the <DataGrid />.
For details on how to use different styling props for cells, headers or rows, see corresponding pages like Customizing cells and headers or Customizing rows. Another very useful resource is the page on Configuring columns.
Styling and customizing the <DataGrid /> scrollbars is discussed in Scrolling and scroll customization page.
For top-level <DataGrid /> 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 <DataGrid /> className of zippy-react-datagrid, but rather will be appended to the classNames the <DataGrid />already has.
ClassNameDescription
zippy-react-datagrid
This is the block className for all <DataGrid /> components. Always applied.
zippy-react-datagrid--show-hover-rows
Applied when showHoverRows=true. Defaults to true.
zippy-react-datagrid--cell-borders-vertical
zippy-react-datagrid--cell-borders-horizontal
zippy-react-datagrid--focused
Applied when the <DataGrid /> is focused. It can be focused via user interaction or by calling the focus method.
zippy-react-datagrid--has-locked
Applied when the <DataGrid /> contains locked columns.
zippy-react-datagrid--has-locked-start
Applied when the <DataGrid /> contains locked columns locked to the start.
zippy-react-datagrid--has-locked-end
Applied when the <DataGrid /> contains locked columns locked to the end.
zippy-react-datagrid--grouped
Applied when the <DataGrid /> has groupBy set to a non-empty array.
zippy-react-datagrid--virtualize-columns
Applied when the <DataGrid /> applies column virtualization - see virtualizeColumns and virtualizeColumnsThreshold
zippy-react-datagrid--show-border-right
Applied when the <DataGrid /> columns do not fill all the available viewport and there still is some extra space at the end of the last column.
ClassNameDescription
zippy-react-datagrid__header
This is the block className for the <DataGrid /> header. Always applied.
zippy-react-datagrid__column-header__resize-wrapper
When a column is resizable, it's header is wrapper in an element that has this className.
zippy-react-datagrid__column-header
Applied to column headers.
zippy-react-datagrid__column-header--resizable
Applied to the headers of resizable columns.
zippy-react-datagrid__column-header--sortable
Applied to the headers of sortable columns.
zippy-react-datagrid__column-header--sort-asc
Applied to the headers of sortable columns that are sorted in ascending order.
zippy-react-datagrid__column-header--sort-desc
Applied to the headers of sortable columns that are sorted in descending order.
zippy-react-datagrid__column-header--unlocked
Applied to the headers of columns which a not locked.
zippy-react-datagrid__column-header--locked
Applied to the headers of locked columns.
zippy-react-datagrid__column-header--locked-start
Applied to the headers of columns locked to the start.
zippy-react-datagrid__column-header--locked-end
Applied to the headers of columns locked to the end.
zippy-react-datagrid__column-header--last
Applied to the header of the last visible column in the grid.
zippy-react-datagrid__column-header--first
Applied to the header of the first visible column in the grid.
zippy-react-datagrid__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.
zippy-react-datagrid__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.
zippy-react-datagrid__column-header--user-select-none
Applied to the headers of columns that have headerUserSelect=false or headerUserSelect is undefined, but userSelect=false.
zippy-react-datagrid__column-header--user-select-text
Applied to the headers of columns that have headerUserSelect=true or headerUserSelect is undefined, but userSelect=true.
zippy-react-datagrid__column-header--show-border-right
Applied to the column header, for columns that display a right border in the header.
zippy-react-datagrid__column-header--show-border-left
Applied to the column header, for columns that display a left border in the header.
zippy-react-datagrid__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.
zippy-react-datagrid__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.
zippy-react-datagrid__column-header__content
For columns with headerEllipsis=true, an element with this class is rendered as a child of zippy-react-datagrid__column-header
This also has the zippy-react-datagrid__box--ellipsis className.
zippy-react-datagrid__sort-icon
Applied to the sort SVG icon.
zippy-react-datagrid__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.
ClassNameDescription
zippy-react-datagrid__row
Applied to all <DataGrid /> rows.
zippy-react-datagrid__row--odd
Applied to all odd <DataGrid /> rows, when showZebraRows=true.
zippy-react-datagrid__row--even
Applied to even <DataGrid /> rows, when showZebraRows=true.
When showZebraRows=false, all <DataGrid /> rows have this className.
zippy-react-datagrid__row--rowheight
Applied to rows with fixed height - so it's applied when rowHeight!=null (defaults to 40).
zippy-react-datagrid__row--virtualize-columns
Applied to the row, when the <DataGrid /> virtualizes columns. See virtualizeColumns and virtualizeColumnsThreshold.
zippy-react-datagrid__row--active
Applied to the active <DataGrid /> row.
zippy-react-datagrid__row--collapsed
Applied to group rows, when the row is collapsed. Only in grouped grids. See groupBy.
zippy-react-datagrid__row--scrolling
Applied to <DataGrid /> rows when scrolling is in progress.
zippy-react-datagrid__row--selected
Applied to selected rows.
zippy-react-datagrid__row--first
Applied to the first row in the grid.
zippy-react-datagrid__row--first-in-group
Applied to the first row in a group, for grouped grids. See groupBy.
zippy-react-datagrid__row--last-in-group
Applied to the last row in a group, for grouped grids. See groupBy.
zippy-react-datagrid__row--group-row
Applied to a group row, for grouped grids. See groupBy.
zippy-react-datagrid__row--last
Applied to the last row in the grid.
zippy-react-datagrid__row--empty
Applied to empty rows - only when showEmptyRows=true.
ClassNameDescription
zippy-react-datagrid__cell
Applied to all <DataGrid /> cells.
zippy-react-datagrid__cell--unlocked
Applied to cells in unlocked columns.
zippy-react-datagrid__cell--locked
Applied to cells in locked columns.
zippy-react-datagrid__cell--locked-start
Applied to cells in locked="start" columns.
zippy-react-datagrid__locked-start-wrapper
Applied to the wrapper for locked start cells.
zippy-react-datagrid__locked-end-wrapper
Applied to the wrapper for locked end cells.
zippy-react-datagrid__cell--locked-end
Applied to cells in locked="end" columns.
zippy-react-datagrid__cell--align-start
Applied to cells in columns with textAlign="start".
zippy-react-datagrid__cell--align-center
Applied to cells in columns with textAlign="center".
zippy-react-datagrid__cell--align-end
Applied to cells in columns with textAlign="end".
zippy-react-datagrid__cell--vertical-align-start
Applied to cells in columns with textVerticalAlign="start" (or textVerticalAlign="top", which is equivalent).
zippy-react-datagrid__cell--vertical-align-middle
Applied to cells in columns with textVerticalAlign="middle" (or textVerticalAlign="center", which is equivalent).
zippy-react-datagrid__cell--vertical-align-end
Applied to cells in columns with textVerticalAlign="end" (or textVerticalAlign="bottom", which is equivalent).
zippy-react-datagrid__cell--show-border-left
Applied to cells that have a left border.
zippy-react-datagrid__cell--show-border-bottom
Applied to cells that have a bottom border.
zippy-react-datagrid__cell--show-border-right
Applied to cells that have a right border.
zippy-react-datagrid__cell--show-border-top
Applied to cells that have a top border.
zippy-react-datagrid__cell--group-cell
Applied to cells that are group cells. See groupBy.
zippy-react-datagrid__cell--no-background
Applied to cells that should not have a background. This is the case for some group cells, when the <DataGrid /> is configured with groupBy.
zippy-react-datagrid__cell--user-select-none
Applied to cells in columns with userSelect=false.
zippy-react-datagrid__cell--user-select-text
Applied to cells in columns with userSelect=true.
zippy-react-datagrid__cell--first
Applied to cells that are the first in a row.
zippy-react-datagrid__cell--last
Applied to cells that are the last in a row.
zippy-react-datagrid__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).
zippy-react-datagrid__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).
zippy-react-datagrid__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 .zippy-react-datagrid__cell.