Expand state not resetting after things like external data change or column sort

[mrtnkb]

Hi folks,

In v8 I'm having a problem where expanded rows aren't resetting when I change things in the table. I'd expect this to happen when I sort a column (this seems to be v7 behaviour) or when the data passed in changes. When the row data changes expanded rows stay expanded but it's now a different row (strangely it's not always the row in the same location).

This seems to be the opposite problem to: #3936

I've tried explicitly setting autoRestExpanding: true but that didn't change the behaviour.

A work around that seems to work is adding an effect like this (though it seems like a bit of a hack):
useEffect(() => table.resetExpanded(), [table, props.data]);

Perhaps something I'm doing that's weird is I'm not using subrows. I'm using toggleExpanded directly in onClick and rendering extra <tr>s by checking getIsExpanded.

Thanks!

[mrtnkb]

Anyone have any ideas on this? Thanks!

[CoyCoding]

Just ran across a similar if not the same problem.

In my case, the default behavior was using the index of the row as the key in the ExpandedState prop. Passing in new data (pagination, sort, delete) would always result in the row at that index being expanded.

In V8 the useReactTable hook has a prop called getRowId. You can pass in a function that determines the key used,

getRowId: (yourObject, rowIndex) => yourObject.id

This solved my problem as the expanded state was now keyed off the actual object id. Hope this helps.