Data does not refresh when using editDisplayMode: 'table'

[Akatroj]

material-react-table version

2.12.1

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

I created a table where one column is editable (using editDisplayMode: 'table' setting). I added a 'save' button which sends the updated data to the backend and also refetches the data. Because of a small bug on my side, this new data was ordered differently than the original. Because of this issue, I noticed that the data in my MRT table was updated only in one column, while the other did not update and the data was displayed incorrectly in the table.

I have since fixed the sorting issue on my side, but I am reporting this issue as I think this is a pretty serious bug with your library. I poked around with react devtools and noticed that the rows and cells (MRT_TableBodyRow and MRT_TableBodyCell) use indexes as React keys, instead of some per-row unique id, which may be causing this problem.

I have provided a reproduction for this issue:

Minimal, Reproducible Example - (Optional, but Recommended)

https://codesandbox.io/p/devbox/v79wqy

After pressing the reshuffle button (which simulates data being refetched in a different order), you can see only the non-editable column gets updated, while the other stays the same and the data is displayed incorrectly.

Screenshots or Videos (Optional)

Initial data:

data reshuffled, but second column did not update:

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[Akatroj]

There is a more serious case troubled by this issue: whenever data on the backend is updated (for e.g. a new record was added from by another user), the same bug occurs, where data in the editable column will not get updated and will be displayed in incorrect rows.