How to prevent expanded row getting collapsed on state update in mui-datatable (^2.15.0)

[KRBhat]

I'm trying to display nested rows , which includes expandable rows. The inner level rows has a button click on a cell, which is doing a setState onClick of it.

Expected Behavior

If User has clicked on the Expand row (outer row) which then lists out all the inner rows which has an onClick function in a cell. So, if User has already expanded a row, And then click on Button displayed in the inner level of rows.

Then Expanded row should not collapse . (Basically TableState for expandedRows should be remembered and only if the User clicks on that Expand/Collapse icon, the row should be expanded/collapsed accordingly.)

Current Behavior

The expanded row is getting collapsed on a State Update that happens in the inner level of nested rows, onClick of button stateUpdate is resetting the expandedRows of tableState.

Steps to Reproduce (for bugs)

1. Click on Expand Icon - This expands all the rows
2. Click on Attach Icon - Opens the dialog does some setState But this collapses already expanded rows

UI

Tech	Version
Material-UI	^4.11.3
MUI-datatables	^2.15.0
React	^16.13.1

[KRBhat]

@gabrielliwerant Could you please help with this issue ?

[nathanjassi-laperla]

@KRBhat Did you ever find a solution to this problem. I am having the same issue.

[zipporah-metsci]

Same issue

[Lektrion]

The solution i found was to update the props of the object stored in state not the state it self

For example instead of doing setUser(userObj) i do userObj.name = 'Phil'..

It work because the state is actually a reference to an object so i can modify the properties whithout re-render.

[uniqueuser-repo]

Facing this problem as well. @Lektrion's solution doesn't resolve because in some cases I do want the table to be re-rendered.

[Muhammad-bK]

any updates on this issue? because this becomes almost impossible to workaround if you're using redux states

[dandelionsam]

You can easily use rowsExpanded along with a state to store your expanded rows. For example

// some options here...
expandableRows: true,
expandableRowsHeader: false,
expandableRowsOnClick: true,
rowsExpanded: expandedRows,
onRowExpansionChange: (curExpanded, allExpanded) => {
  const expandedRowsIndexes = allExpanded.map((row) => row.index);
  setExpandedRows(expandedRowsIndexes);
},
// some other options here...

[JonJaszek]

You can easily use rowsExpanded along with a state to store your expanded rows. For example

// some options here...
expandableRows: true,
expandableRowsHeader: false,
expandableRowsOnClick: true,
rowsExpanded: expandedRows,
onRowExpansionChange: (curExpanded, allExpanded) => {
  const expandedRowsIndexes = allExpanded.map((row) => row.index);
  setExpandedRows(expandedRowsIndexes);
},
// some other options here...

This worked beautifully