[data grid] Issue using row spanning and dynamic row height together

[Anupheaus]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/embed/z8yj75?module=/src/Demo.tsx&fontsize=12
2. Between lines 25 and 26 add the following line of code:
   getRowHeight={()=>"auto"}
3. Refresh the preview and you will see that selecting a cell that spans multiple rows now limits the row that is shown to only a single row.

Current behavior

Selection of the spanned cell without dynamic row height:

Selection of same cell with dynamic row height on:

As you can see, it also seems to affect the padding (or it could be that the dynamic row height is "calculating" a lower row height overall. It also seems to cause the cell borders not to render as well?

Expected behavior

I would expect that the examples look the same in this case, there should be no different except when a longer text is used in the first column, it is wrapped and the row is expanded.

Here is what it looks like with row spanning but no dynamic row height:

Here is with both:

Context

I'm trying to get a data grid to show both spanned columns, but also have some longer text wrapped within the spanned column and on cells that aren't spanned, have them wrapped too if they are long. This does not seem to be achievable in the data grid.

Your environment

npx @mui/envinfo

Using Chrome browser.

System:
    OS: macOS 15.3
  Binaries:
    Node: 20.18.2 - ~/.nvm/versions/node/v20.18.2/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 132.0.6834.160
    Edge: Not Found
    Safari: 18.3
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/core-downloads-tracker:  5.16.7 
    @mui/icons-material: ^5.15.18 => 5.15.18 
    @mui/material: ^5.16.7 => 5.16.7 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system:  5.16.7 
    @mui/types:  7.2.19 
    @mui/utils:  5.16.6 
    @mui/x-data-grid:  7.22.1 
    @mui/x-data-grid-premium: ^7.22.1 => 7.22.1 
    @mui/x-data-grid-pro:  7.22.1 
    @mui/x-date-pickers:  7.22.1 
    @mui/x-date-pickers-pro: ^7.22.1 => 7.22.1 
    @mui/x-internals:  7.21.0 
    @mui/x-license: ^7.21.0 => 7.21.0 
    @types/react: ^18.2.66 => 18.3.3 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    styled-components:  6.1.11 
    typescript: ^5.2.2 => 5.4.5 

Search keywords: unstable_rowSpanning row spanning dynamic height getRowHeight

Order ID: 90059

[KenanYusuf]

Hi @Anupheaus. The row spanning implementation relies on a row height value that is consistent across every row. Unfortunately, the feature is not compatible with dynamic row heights. We have a note on the row spanning docs about this.

Please let me know if you have any further questions about the compatibility two features, otherwise, please feel free to close this issue as it is a known and documented limitation.