Material-UI DataGrid dynamic row height based on text content

Question

When using DataGrid, I cannot figure out how to make row heights variable, so that the row's height is dynamically based on the length of the text content in the cell.

I was thinking I would need to add renderCell on the column with the longer text, and use the <Typography> component, but I don't know what params to use to style it this way.

There is a lot of documentation on how to handle truncation, ellipsis, etc, but I cannot seem to figure out what I need to apply for variable row heights based on content.

Answer 1

const StyledDataGrid = withStyles({
    root: {
        '& .MuiDataGrid-renderingZone': {
            maxHeight: 'none !important',
        },
        '& .MuiDataGrid-cell': {
            lineHeight: 'unset !important',
            maxHeight: 'none !important',
            whiteSpace: 'normal',
        },
        '& .MuiDataGrid-row': {
            maxHeight: 'none !important',
        },
    },
})(DataGrid);

See this demo for an example.

Answer 2

Based on this thread it's not possible.

@ronnyroeller thanks for the feature request. It's definitely something we were expecting. We are happy to see it surface :). For the virtualization to work, the grid needs to know the size of all the rows.

Answer 3

As of Data Grid version 5.12.0 there is support for dynamic row height.

To use it:

<DataGrid getRowHeight={() => 'auto'} />

See documentation here for more details.