Material-table: in edit phase everything become grey

[vash-trigun]

Describe the bug
in edit phase all the rows become grey

To Reproduce
Steps to reproduce the behavior:

1. click the pencil to edit a row
2. during this phase the other rows become grey, so click something else outside the table (for example another button), instead of the save or cancel button.
3. See error: now all the rows become grey also the row that were on edit phase

Expected behavior
the row choosed should stay on edit phase or at least automatic cancel the edit phase so all the rows return like how they were at the beginning

Additional context
i notice that during the edit phase if you click other buttons a part the save and cancel button, the material table component forget which row was on edit phase.
for example during the edit phase you can still use the search textfield

[aaronlna]

Stumbled upon this earlier this week... looked through the code and capturing what I found:

MaterialTable captures a boolean state called hasAnyEditingRow. This boolean is derived from whether or not its internal DataManager has saved a reference to a lastEditingRow (this reference is assigned when you begin editing).

When you are editing, lastEditingRow gets assigned AND a flag for whether or not to show the edit row is stored on the row data itself via DataManager (the data is under the tableData field of the row data object). Now the problem exists when you update the data your table is displaying, this editing flag is lost because new data is replacing your current rows. The reference to lastEditingRow (and subsequently hasAnyEditingRow) remains... hence you're left with a table that's in editing mode (grayed out rows), but no associable row to show as being edited.

I'm not sure what the design choice was for capturing the edit state as a field of the row data itself (rather than a regular React Component state). Any time theres a data change to the table there's necessary state that's being directly overwritten.

Some workarounds for this are to modify DataManager to preserve editing state across updates to the table data , or simply have MaterialTable or DataManager drop the hasAnyEditingRow/lastEditingRow state/assignment when updates to row data come in. Of course there's also the consideration of capturing this state outside of the row data altogether (and instead in plain-old React-controlled state/props) which would avoid this issue, but may produce other complexities.

[aaronlna]

Forgot to post this. There's a temporary workaround while this bug exists. You can access dataManager via the MaterialTable tableRef property and manually change row editing yourself. I'm just clearing the edit state whenever MT gets a new set of data to render:

const tableRef: RefObject = createRef();

// Call this whenever you need editing to be reset
if (tableRef.current) tableRef.current.dataManager.changeRowEditing();

// Render
<MaterialTable tableRef={this.tableRef} />

[vash-trigun]

Thx a lot man...
I just finish to try it... really useful and worked for what i need..
so:

• i declared tableRef inside the constructor(), this.tableRef = createRef()
• the if i put it inside the rende() phase (but i am still not sure of it)
  if (this.tableRef.current)
  this.tableRef.current.dataManager.changeRowEditing();

thank you

[vash-trigun]

after i did some experiment i changed the if with this;
if (this.tableRef.current && (this.tableRef.current.state.lastEditingRow || this.tableRef.current.state.showAddRow)) {
this.tableRef.current.dataManager.changeRowEditing();
}

because lastEditingRow and showAddRow are what initialize hasAnyEditingRow in material-table.
But still not sure of leave this if in render() phase.

[yurivangeffen]

I have a similar issue, when calling

tableRef.current.dataManager.changeRowEditing(someRowData, 'update')

All rows grey out. Naturally I can't call changeRowEditing(), as I want to go into edit mode on a specific row.

[thedmeyer]

What about the opposite? I want to be able to put multiple rows in edit mode at the same time.

[aaronlna]

What about the opposite? I want to be able to put multiple rows in edit mode at the same time.

I would submit a new feature request for this. This would require some changes to at least DataManager and perhaps some of the table components using it for rendering. As long as it requires DataManager changes I don't think this is easily doable through the pre-existing API (referring to component overriding).

[aaronlna]

This issue can be closed.