Data grid - Row height
Customize the height of your rows.
Static row height
By default, the rows have a height of 52 pixels. This matches the normal height in the Material Design guidelines.
Use the rowHeight prop to change this default value, as shown below:
Variable row height
If you need some rows to have different row heights this can be achieved using the getRowHeight prop.
This function is called for each visible row and if the return value is a number then that number will be set as that row's rowHeight.
If the return value is null or undefined, then the rowHeight prop will take effect for the given row.
const getRowHeight = React.useCallback(() => { ... }, []);
<DataGridPro getRowHeight={getRowHeight} />
Dynamic row height
Instead of a fixed row height, you can let the grid calculate the height of each row based on its content.
To do so, return "auto" on the function passed to the getRowHeight prop.
<DataGrid getRowHeight={() => 'auto'} />
The following demo shows this feature in action:
The dynamic row height implementaion is based on a lazy approach, which means that the rows are measured as they are rendered.
Because of this, you may see the size of the scrollbar thumb changing during scroll.
This side effect happens because a row height estimation is used while a row is not rendered, then this value is replaced once the true measurement is obtained.
You can configure the estimated value used by passing a function to the getEstimatedRowHeight prop.
If not provided, the default row height of 52px is used as estimation.
It's recommended to pass this prop if the content deviates too much from the default value.
Note that, due to the implementation adopted, the virtualization of the columns is also disabled to force all columns to be rendered at the same time.
<DataGrid getRowHeight={() => 'auto'} getEstimatedRowHeight={() => 200} />
Row density
Give your users the option to change the default row density to match their preferences—compact, standard, or comfortable.
Density is calculated based on the rowHeight and/or headerHeight props, when present.
See Density for details.
Row spacing
You can use the getRowSpacing prop to increase the spacing between rows.
This prop is called with a GridRowSpacingParams object.
const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
return {
top: params.isFirstVisible ? 0 : 5,
bottom: params.isLastVisible ? 0 : 5,
};
}, []);
By default, setting getRowSpacing will change the marginXXX CSS properties of each row.
To add a border instead, set rowSpacingType to "border" and customize the color and style.
<DataGrid
getRowSpacing={...}
rowSpacingType="border"
sx={{ '& .MuiDataGrid-row': { borderTopColor: 'yellow', borderTopStyle: 'solid' } }}
/>