[DataGrid] "Cannot read property 'id' of undefined" when rows updates

[BrentFarese]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

We are utilizing the XGrid component. We have a responsive layout whereby we hide columns in the XGrid if the layout becomes too small. When we get to a breakpoint resizing the window and try to hide columns, XGrid breaks. See GIF below.

These are the errors we see in the console:

Expected Behavior 🤔

Resizing of the browser window and hiding columns as a result should work as expected without error.

Steps to Reproduce 🕹

Steps:

1. Create XGrid with multiple columns.
2. Hide some columns programmatically using a breakpoint (e.g., we use useMediaQuery hook from MUI and the hide prop of the ColDef to do this).
3. Should see the XGrid error out after 2.

I can confirm that removing the hide prop from our ColDefs causes the error to go away.

Context 🔦

Trying to make the XGrid responsive to layout changes in our app.

Your Environment 🌎

Tech	Version
Material-UI X	v4.0.0-alpha.9
Material-UI	v4.10.2
React	17
Browser	Chrome
TypeScript	Y

[oliviertassinari]

Do you have a reproduction we can look at?

[BrentFarese]

Do you have a reproduction we can look at?

@oliviertassinari here is a Codesandbox link with a (somewhat) reproduction. Comment out the useMediaQuery hook and the hide props and you can see a failure occurs. However, it is a different failure than I experienced in our setup. But, perhaps the reproduction sheds light on the issue.

Let me know if you need more. Thanks!

[oliviertassinari]

@BrentFarese Thanks for the reproduction. I don't think that it's the same problem. I'm renaming the issue. This is a simplified version of the bug: https://codesandbox.io/s/material-ui-data-grid-bug-forked-b9g0g?file=/src/App.tsx.

Your reproduction works if you make the rows stable. The data grid doesn't use useDebugValue, as far as I know, so you would need search somewhere else.

[BrentFarese]

@BrentFarese Thanks for the reproduction. I don't think that it's the same problem. I'm renaming the issue. This is a simplified version of the bug: https://codesandbox.io/s/material-ui-data-grid-bug-forked-b9g0g?file=/src/App.tsx.

Your reproduction works if you make the rows stable. The data grid doesn't use useDebugValue, as far as I know, so you would need search somewhere else.

Thank you for looking into it @oliviertassinari. I can confim that extracting the row data out/making the rows stable does seem to work. But that doesn't seem viable in production as our row data is dynamic. I can also confirm that removing the hide props in ColDefs gets rid of the error.

I'm not sure if it's related to our issue. I think it might be. Both stack traces seem to lead to the ViewPort component in DataGrid (for usXGrid). Maybe that is where the root issue lies?

I have tried to fiddle more with my reproduction to get it to reproduce the exact error we are seeing in the GIF/screenshots above, but it's difficult. I will post an update here if I can reproduce the exact error.

Thanks!

[lilrogalski]

+1 for this issue, I am experiencing the same error when trying to re-render an XGrid or DataGrid component by updating the rows prop when an array of data changes. I can fix the error by making the rows data stable, but our row data is dynamic as well so this is not a viable solution.

[oliviertassinari]

The reproduction is fixed (https://codesandbox.io/s/material-ui-data-grid-bug-forked-b9g0g?file=/package.json) with #599.

[oliviertassinari]

The fix was released in v4.0.0-alpha.10.

[vitalist82]

In version 4.0.0-alpha.32 I still get the error after I update the rows property with a new set of rows where one row was removed.

My scenario is:

1. deleting the row from the data source (e.g. on onRowClick)
2. fetching the updated data from source (with one row deleted obviously)
3. providing the updated row set to the XGrid (this happens without an error for the first time)
4. clicking on another row in the updated table

I think it is quite typical scenario to want to be able to delete rows from the table or add new ones, so I'm wondering whether this is still an issue in XGrid or it might be just a wrong usage from my side.

[oliviertassinari]

@vitalist82 If you have a minimal reproduction with the latest version, please open a new issue. You can find a codesandbox template in the new issue template.

[vitalist82]

@oliviertassinari i opened a new issue #1958 with a codesandbox.