[data grid] Error when column groups change

[lounsbrough]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/blissful-thompson-tq5g2m?file=%2Fsrc%2FDemo.js%3A8%2C28

Steps:

1. Navigate to repro sandbox
2. Wait for table to render
3. Start scrolling horizontally
4. After 5 seconds, error should appear

Repro video:
https://github.com/mui/mui-x/assets/8313853/8194ad90-1cf5-4444-81ac-8bb6efd6c47a

Current behavior

When column groups change, the table does not react well, throwing an unhandled exception.

Expected behavior

I would expect the groups to change without incident. If this can not work, I would expect the documentation to state this explicitly with justification.

Context

We are creating groups dynamically by grouping certain columns together as data loads, and so we run into this issue in our app.

Your environment

npx @mui/envinfo

  Browser used: Chrome

  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.0.5 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 124.0.6367.62
    Edge: 124.0.2478.51
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ~11.11.4 => 11.11.4 
    @emotion/styled: ~11.11.5 => 11.11.5 
    @mui/icons-material: ~5.15.15 => 5.15.15 
    @mui/lab: 5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: ~5.15.15 => 5.15.15 
    @mui/system: ^5.15.15 => 5.15.15 
    @mui/x-data-grid-pro: ~7.3.0 => 7.3.0 
    react: ~18.2.0 => 18.2.0 
    react-dom: ~18.2.0 => 18.2.0 

Search keywords: column groups error

[michelengelen]

@lounsbrough I am not able to reproduce with the steps you provided.
Is there anything else that you did prior to that scrolling?

[lounsbrough]

@michelengelen - it seems to be a race condition of some sort, so it might not happen on the very first try. Just now I had to refresh the web page in the sandbox once before it would happen. Also I keep scrolling at a mild pace during the 5 seconds until the error appears after the 5 second mark. You could also decrease the timeout to 2 or 3 seconds to make the error happen sooner.

[michelengelen]

ah, ok. now i can reproduce it constantly. The trick is to keep scrolling, so the grid needs to be in a scrolling state when the timeout fires. If it stops scrolling it will not throw that error.

@romgrk this falls into your area, right?

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@lounsbrough: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.