Top
DataGrid - Customizing rows
DataGrid
<DataGrid /> rows can be customized & styled using multiple props. Styling can be done by using rowStyle or rowClassName.
rowStyle can be an object, or it can be a function. In case it's specified as a function, it's called like rowStyle({ data, props, style }). The returned object is merged on the already existing row style object.
rowClassName can be a string, or it can be a function. In case it's specified as a function, it's called like rowClassName({ data, props, className }). The returned value is appended to the already existing classNamevalue of the row.
In the default theme, the background is specified for <DataGrid /> cells, so setting the background in the rowStyle will not have the intended effect.
Setting a height for rows should be done by using the rowHeight prop, and not rowStyle.height!
When the <DataGrid /> is configured to have dynamic row height (rowHeight=null), the minimum height for a row should be configured via minRowHeight.
By default, the <DataGrid /> displays zebra rows. Use showZebraRows=false to disable odd/even zebra row styling.
Another neat feature for <DataGrid /> rows is the ability to fill the remaining vertical space with empty rows - in the case where the dataset is small and does not fill all the <DataGrid /> viewport. Use showEmptyRows=true to accomplish that.
The <DataGrid /> can also be configured to use a custom row rendering function, using the renderRow(rowProps) function prop.
If this function returns undefined, the default rendering is used. Although returning undefined, it can still be useful since it can control & change values in the rowProps, object it receives as first parameter. For example, it can add styles to rowProps.style or can manipulate classNames by modifying rowProps.className. Or it can add other events or DOM properties to the rowProps object.
In case it returns a React.Node, that node is rendered instead of the default implementation.
When returning a custom React.Node from renderRow be aware that you are probably breaking virtualization or other useful <DataGrid /> features. So make sure you know what you're doing!
Instead of using renderRow we recommend you use onRenderRow(rowProps), which has the same benefit of being called with the rowProps object and be able to modify it, but it discards the returned value, so the default row rendering happens. This ensures all <DataGrid /> features will probably work the same unless you change the layout-related styling props.
The example below shows how you can use custom row and cell class names to have different backgrounds for different rows/cells, based on custom application logic.
The css file (quite verbose, but you can achieve a lot less code with preprocessors) is shown below:
We use !important below for brevity, to override the default grid theme. Instead, you could write your own theme for the <DataGrid /> and get rid of unwanted !important.
.global-custom-row:hover,
.global-custom-row:hover .zippy-react-datagrid__cell {
  background: #fff5e6 !important;
}

.global-custom-row-red {
  background: #ffa5a5 !important;
}
.global-custom-row-red:hover,
.global-custom-row-red:hover .zippy-react-datagrid__cell {
  background: red !important;
}

.global-custom-row-magenta {
  background: #ff81ff !important;
}
.global-custom-row-magenta:hover,
.global-custom-row-magenta:hover .zippy-react-datagrid__cell {
  background: magenta !important;
}

.global-custom-row.zippy-react-datagrid__row--selected,
.global-custom-row.zippy-react-datagrid__row--selected
  .zippy-react-datagrid__cell {
  background: #5b7bb7 !important;
  color: white;
}

.global-custom-row.zippy-react-datagrid__row--selected:hover,
.global-custom-row.zippy-react-datagrid__row--selected:hover
  .zippy-react-datagrid__cell {
  background: #2154b5 !important;
  color: white;
}