[data grid] rendering complex components in a cell push pieces to following rows

[nico-martinucci]

Steps to reproduce

Link to live example: (required)

Steps:

1. Go to this example: https://stackblitz.com/edit/react-rubysk?file=Demo.tsx
2. See the added renderCell to the lastName column
3. Inspect any last name cell on the table - both last names are being rendered, but the second one is one row down, hidden behind the next row:

Current behavior

Any component after the first is being rendered on the next row, instead of inside of the particular cell

Expected behavior

In the above example, the last name should be rendered twice in a vertical stack fully contained within each row's last name cell. If rendered more times than can fit, the row should expand vertically to fit it.

Context

Just trying to render more complex information inside of a single cell. This worked fin before the v7.0.0 release.

Your environment

System:
OS: macOS 14.0
Binaries:
Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
pnpm: 8.14.3 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 123.0.6312.87
Edge: Not Found
Safari: 17.0
npmPackages:
@emotion/react: 11.11.4 => 11.11.4
@emotion/styled: 11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.14
@mui/icons-material: 5.15.14 => 5.15.14
@mui/material: 5.15.14 => 5.15.14
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.14
@mui/types: 7.2.14
@mui/utils: 5.15.14
@mui/x-charts: 7.0.0 => 7.0.0
@mui/x-data-grid: 7.0.0
@mui/x-data-grid-pro: 7.0.0 => 7.0.0
@mui/x-date-pickers: 7.0.0 => 7.0.0
@mui/x-date-pickers-pro: 7.0.0 => 7.0.0
@mui/x-license: 7.0.0 => 7.0.0
@types/react: 18.2.73 => 18.2.73
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 5.4.3 => 5.4.3

Search keywords: data grid, render cell

[michelengelen]

This is due to the line-height being set from a --height variable in the DataGrid (the height that is being used for the rows). If you want to fill the cell you should reset the line-height like this:

renderCell: (params) => (
  <Stack>
    <Box sx={{ lineHeight: 'initial' }}>{params.row.lastName}</Box>
    <Box sx={{ lineHeight: 'initial' }}>{params.row.lastName}</Box>
  </Stack>
),

[nico-martinucci]

This is due to the line-height being set from a --height variable in the DataGrid (the height that is being used for the rows). If you want to fill the cell you should reset the line-height like this:

renderCell: (params) => (
  <Stack>
    <Box sx={{ lineHeight: 'initial' }}>{params.row.lastName}</Box>
    <Box sx={{ lineHeight: 'initial' }}>{params.row.lastName}</Box>
  </Stack>
),

This worked, along with adding justifyContent="center" height="100% to the <Stack /> to get them to render in the center of cell.

This wasn't required prior to the 7.0.0 update - probably too niche a case for this to be considered a breaking change, but it does seem like a pretty big departure from how this operated before.

Anyway, thanks for your help!

[michelengelen]

Glad that this solution helped you.

I can understand that it is a bit inconsistent, but the changes had their reasoning. If I remember correctly it was due to a refactor of the scrolling logic.

I will close this now as the opening question got solved.
Feel free to reopen if you encounter other problems with this or open a new issue!
Thanks!