Search code examples
datagridmaterial-ui

Material-UI DataGrid: Removing a row from state causes Cannot read property error

  1. I have a material UI Datagrid as follow:
<DataGrid
                            className={classes.datagrid}
                            page={page}
                            pageSize={rowsPerPage}
                            rows={rows}
                            columns={columns}
                            sortModel={sortModel}
                            rowCount={meta.total}
                            loading={store.panels.loading}
                            rowsPerPageOptions={
                                [5, 10, 25, 50] as PageSizeOptions[]
                            }
                            disableSelectionOnClick
                            onPageSizeChange={changePageSize}
                            autoHeight
                            onPageChange={handlePageChange}
                            onSortModelChange={updateSort}
                            components={{
                                loadingOverlay: LoadingOverlay,
                                noRowsOverlay: NoRowOverlay,
                            }}
                        />
  1. I have an observable mobx array. const rows = [inherited mobx array from global store]
  2. I then delete a row from the array on the global store.
  3. I receive the following error:
TypeError: Cannot read property 'id' of undefined
(anonymous function)
node_modules/@material-ui/data-grid/dist/index-esm.js:15
etc...

The mobx array is an array of objects [ { id: 1, name: "bob" }, etc... ]

The columns:

const columns: ColDef[] = [
        { field: 'id', hide: true },
        {
            headerName: 'Name',
            field: 'name',
            width: 110,
        },
    ];

This error only occurs when I try to remove a row. Adding, fetching or updating works fine.

It seems to be a bug with MUI DataGrid https://material-ui.com/components/data-grid/rows/

Let me know.

Regards, Emir

Solution

  • The fix was released in v4.0.0-alpha.10. Reference: https://github.com/mui-org/material-ui-x/issues/571