[data grid] Incorrect row width causing misaligned column headers when using custom footer

[GiessC]

Search keywords

data grid row width misaligned column headers custom footer

Latest version

• [X] I have tested the latest version

Context

I am using a custom footer component in my data grid. When data is fetched from my API, I use the grid API to resize the columns automatically. If I scroll to the right of the grid, the column headers will be "cut off" - meaning they do not take up the full width of a row, causing them to be misaligned. Furthermore, hovering over a row will not display the gray hover state for the full width of the row. This only seems to happen when multiple non-visible columns are in the grid (i.e. you have to scroll to see them). Once the grid is interacted with (column resized, cell clicked, etc.), the columns are aligned properly as expected.

Steps to reproduce

Link to live example

Steps:

1. Wait for data to load and columns to resize automatically
2. Scroll to the right
3. You will notice the column headers are misaligned 3a. If they are not misaligned, try refreshing or hard-refreshing - it's a little flaky sometimes

Current behavior

Columns are resized and the headers do not take up the full width of a row, causing them to be misaligned.

Expected behavior

Column headers should take up the full width of a row and should be aligned properly with the corresponding data.

Your environment

npx @mui/envinfo

``` Browsers Tested In: - Chrome - Firefox 126.0.1 System: OS: macOS 14.1 Binaries: Node: 20.11.1 - /usr/local/bin/node npm: 10.2.4 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: 125.0.6422.142 Edge: Not Found Safari: 17.1 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.18 @mui/icons-material: ^5.15.0 => 5.15.0 @mui/material: ^5.14.18 => 5.15.18 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-data-grid: ^7.6.1 => 7.6.1 @mui/x-date-pickers: ^6.18.5 => 6.18.5 @types/react: ^18.2.37 => 18.2.37 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.5 => 4.9.5 ```

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[GiessC]

@michelengelen Sorry about that! I fat-fingered the enter key before I had finished my comment. I've updated it to provide more details and reproduction in CodeSandbox. Thanks!

[michelengelen]

Hey @GiessC thanks for providing that example I can confirm that this is incorrect behavior.

It is even independent on the presence of a custom footer: DEMO

I will add this to the board. Thanks for taking the time to report this issue! 👍🏼

[michelengelen]

@romgrk maybe related to #12940 ?

[romgrk]

I don't think it's related to that, it looks like an issue with virtualization.