Re render not happening on updated tableData when editingMode="table" about material-react-table

[udithsc]

I had a similar kind of Issue when deleting a row. I got all new records deleted and found that tableData was in the initial state in the renderRowActions delete function even though the table shows correct data. later I found that if we set displayColumnDefOptions prop even with an empty object issue got fixed. This is a strange way but I thought it will help to fix the issue.

[github-gael-soude]

@udithsc thanks a lot. I had the exact same problem and it was driving me nuts.
I confirm that setting the displayColumnDefOptions prop solves the issue

[rorueda]

I am having a similar problem. In my case, when I delete a row, it's always the last row that gets deleted (visually).

I found out that the problem is with the table editing mode. It seems to me that MRT_EditCellTextField is not handling cell value changes, as it only gets the cell value to initialize the value state (by using the useState hook).

[kitravee]

The problem is a unique key for each row is the index, which is the default behavior.
. Therefore you should tell the material-react-table about the unique key for each row by using getRowId method

For example: if the unique key of the row is userId,
you can use the following code:

<MaterialReactTable        
      getRowId={(originalRow) => {return originalRow.userId }} 
      editingMode="table" 
      {...rest}
/>

[sipczi]

What I think is happening is that displayColumns is being memoized.
This memoization is deep, it includes MRT_ToggleRowActionMenuButton > MRT_EditActionButtons > handleSave > onEditingRowSave. It'll cache the references used in onEditingRowSave and keep using those unless something changes in the useMemo dependency array.

The prop "displayColumnDefOptions" is a dependency, by setting to an empty inline object you're essentially disabling the useMemo, since an inline object will be a new reference every render, it'd work with any other dependency that's an object (for example: localization).

Here's a codesandbox to see what useMemo does to states you want to use inside your functions.

The reason the demo page for editing works is that the original data reference is being modified before it's copied.

[KevinVandy]

All of my own editing examples, which are supposed to do the same thing here, are working fine. You will need to create a full sandbox demoing the issue you are running into here.

My guess is that pasteContent is using the wrong data structures and not actually adding a new row to the table.

renderRowActions has this type signature: ({ cell, row, table }) => ReactNode, not the (row, index) one that you are trying to use.

[KevinVandy]

I am having a similar problem. In my case, when I delete a row, it's always the last row that gets deleted (visually).

I found out that the problem is with the table editing mode. It seems to me that MRT_EditCellTextField is not handling cell value changes, as it only gets the cell value to initialize the value state (by using the useState hook).

Need to look into this. Yes makes sense that the input text state is the root of the problem.

[meirgbinahai]

Having the same issue, even when setting the prop <MaterialReactTable displayColumnDefOptions={{}} editingMode="table" ... />, I'm using material-react-table version 1.8.5.

I switched to the editingMode="cell" type instead of editingMode="table"; I guess I'll change back to table once this is resolved.

[KevinVandy]

This might be all the way fixed in v2.9.0 as columns are no longer memoized internally except during resizing and dragging events.