[data grid] Column resizing breaks while rows are updated

[ithrforu]

trafficstars

Steps to reproduce

Link to live example

Steps:

1. Wait for the sandbox to load.
2. Start changing column width.

Current behavior

After 5 seconds the lines will be updated and column resizing will break: broken-column-resizing.webm

Expected behavior

Column resizing works correctly even when rows are updated.

Context

This bug is reproduced in our application when data for table rows is poll in the real time.

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: resizing, column resizng, rows updating Order ID: 94701

[michelengelen]

Hey @ithrforu ... IMHO, this is to be expected. Typically you would have a loading state where interaction with the grid are not possible.

Not sure if we can do anything about it. @romgrk can we somehow support that?

[romgrk]

I think this can be fixed, but there might be a bit of lag when the update runs.

[ithrforu]

@romgrk, can i help with a fix?

[itayeylath]

@romgrk @ithrforu Hi I'm also trying to fix it, so I am following the post!

BTW I hope to make a quick fix my self- maybe you will get an update from me :)

[romgrk]

If someone has a fix please feel free to open a PR, I was planning to work on this but got stuck on other issues.

The feature is implemented in useGridColumnResize and the idea would be to listen for row updates and fix the internal DOM refs that resize captures imperatively when a resize operation starts.