CODEWITHSUNDEEP
reactjsmaterial-ui
DaveH
DaveH

Reputation: 191

Material-UI DataGrid dynamic row height based on text content

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.

Upvotes: 19

Views: 34594

Answers (8)

Sandeep Jain
Sandeep Jain

Reputation: 1261

based on particular row content we can se the height of mui data grid :

General approach on the basis of id of rowData model data.

<DataGrid

rows={rows}

columns={columns}

getRowHeight={(rowData, densityFactor) => {

if ((rowData.model.id as number) % 2 === 0) {

  return 100 * densityFactor;
}

return null;

}}

/>

Another approach to take the length of string data and multiply with factor as below example :

          getRowHeight={(rowData, densityFactor) => {
            console.log(rowData.model.measureImportInnerDtoList.length);
              return rowData.model.measureImportInnerDtoList.length * 23;
          }}

Upvotes: 0

M Polak
M Polak

Reputation: 877

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.

Upvotes: 31

Артем Богданов
Артем Богданов

Reputation: 61

I've done it with 7th version of @mui/x-data-grid:

<DataGrid
  rows={lines}
  columns={columns}
  disableRowSelectionOnClick
  getRowHeight={() => 'auto'}
  sx={{
    [`& .MuiDataGrid-cell`]: {
      paddingTop: 1.5,
      paddingBottom: 1.5,
      lineHeight: 'unset !important',
      maxHeight: 'none !important',
      whiteSpace: 'normal',
    },
    [`& .MuiDataGrid-columnHeader`]: {
      maxHeight: 'none !important',
      height: 'auto !important',
      whiteSpace: 'inherit !important',
      overflow: 'inherit !important',
      lineHeight: '24px !important'
    },
    [`& .MuiDataGrid-columnHeaderTitle`]: {
      whiteSpace: 'normal !important',
    },
  }}
/>

Upvotes: 0

Helen Yu
Helen Yu

Reputation: 51

https://mui.com/x/react-data-grid/row-height/

just add getRowHeight={() => 'auto'} like so:

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

Upvotes: 5

Nikhil Tayal
Nikhil Tayal

Reputation: 132

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',
      },
    },
  },
},

Upvotes: 1

Ovidiu Cristescu
Ovidiu Cristescu

Reputation: 1053

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 />

Upvotes: 3

Brandon Chutuk
Brandon Chutuk

Reputation: 201

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.

Upvotes: 20

cortisol
cortisol

Reputation: 363

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.

Upvotes: 1

Related Questions