[data grid] The data grid (pro version) throws an error when resizing column if skeleton overlay is used (Chromium browsers only).

[Th3N3tRunn3r]

Steps to reproduce

Steps:

1. Create a data grid pro with 6 columns. (The amount does not seem to change the outcome this is just my config.)
2. Set the loading overlay to; loadingOverlay: { variant: 'linear-progress', noRowsVariant: 'skeleton' }
3. Let the data grid populate.
4. Try to resize a column in Edge or Chrome. You should receive an error like so; MUI X: Expected skeleton cells to be defined with data-field attribute.

Current behavior

When creating a data grid (pro version) with loadingOverlay: { variant: 'linear-progress', noRowsVariant: 'skeleton' } it throws an error when resizing a column in the Edge and Chrome browsers. If you then switch 'skeleton' to 'linear-progress' the error does not occur.

Expected behavior

The data grid shouldn't throw an error when resizing a column in the Edge or Chrome browsers.

Context

I wish to use the skeleton overlay for my data grids are loading their rows.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.2
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: Not Found
  Browsers:
    Edge, Chrome both have this issue.
    Safari does not.
  npmPackages:
    react:  18.3.1 
    @mui/x-data-grid-pro: 7.23.6,

Search keywords: overlay, data, grid, skeleton

[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! 🙇🏼

[Th3N3tRunn3r]

Hey Michelengelen,

Thank you for getting back to me. I have been able to reproduce the issue as a live demo, I am just trying to work out how to share that with you. If I can't share it, should I just paste the code here?

[michelengelen]

you can just use a codesandbox. We have templates in every example to be used in the docs. Just click the codesandbox button and it will open with the respective example.

[Th3N3tRunn3r]

Hey Michelengelen,

Thank you for your assistance.

I have been able to fix the issue on my local setup, it seems the problem was a mismatch of package versions. Trying to reproduce the issue on stack blitz is what lead me to the answer. When I plugged in the same combination of packages into stack blitz I got an error, not the same error, but one.

Below was the list of versions in case you wish try to reproduce the issue.

• @emotion/react: 11.10.5
• @emotion/styled: 11.10.5
• react: 18.3.1
• react-dom: 18.3.1
• @mui: 5.14.somthing
• @mui/x-data-grid-pro: 7.23.6

Thank you again, I shall close the ticket.