Material-UI DataGrid dynamic row height based on text content

user_12726829 0
Viewed 13327

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.

material-ui reactjs
5 Answers
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.

user_160422050

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.

user_54968590

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.

user_77762530

Based on the other answers, it COULD be possible, if you disable the virtualization. But beware, you are disabling performance optimizations.

export const StyledDataGrid = withStyles({
  root: {
    '& .MuiDataGrid-renderingZone': {
      maxHeight: 'none !important'
    },
    '& .MuiDataGrid-cell': {
      lineHeight: 'unset !important',
      maxHeight: 'none !important',
      whiteSpace: 'normal',
      wordWrap: 'break-word'
    },
    '& .MuiDataGrid-row': {
      maxHeight: 'none !important'
    }
  },
  virtualScrollerContent: {
    height: '100% !important',
    overflow: 'scroll'
  }
})(DataGrid);

Then disable the virtualization:

<StyledDataGrid disableVirtualization />
user_140565910

This is how you can do -

Import this at the top of your theme -

import type {} from '@mui/x-data-grid/themeAugmentation';

in the components section of your theme paste this

MuiDataGrid: {
  styleOverrides: {
    root: {
      '& .MuiDataGrid-main > div:nth-child(2)': {
        height: 'fit-content !important',
      },
    },
  },
},
user_106694770
Related