Expanded row getting collapsed on state update on react-table

Question

How to stop the expanded React-Table row from collapsing on state change in-class component.

Please find the code link here https://codesandbox.io/s/agitated-dubinsky-t0hcn?file=/src/nestead-table/index.js

on selecting or unselecting the checkbox (state update) the expanded row is getting collapsed please help me in solving this.

I have tried the below code. it's kept opening that nested row but inside the subcomponent nested table didn't show up (Please find below first image).... didn't work for me as it's a nested table. followed some documents https://react-table.tanstack.com/docs/api/useExpanded no luck!

here is the code which I have tried.

return (
    <ReactTable
      data={data}
      columns={columns}
      className='-striped -highlight'
      minRows={0}
      defaultPageSize={PAGE_SIZE}
      showPagination={data && data.length > PAGE_SIZE ? true : false}
      expanded={this.state.expanded}
      SubComponent={(row) => {
        // get current active key which needs to be expanded (triggered by clicking on a td element)
        const currentExpandedKey = currentExpandedKeys[row.index];
        let columnData = [];
        console.log('currentExpandedKey------------------', currentExpandedKey, this.state.expanded);
        return (
          <div className='react-nested-table-inner'>
            <h4 className='title'>
              {keyMaps[currentExpandedKey] || currentExpandedKey}
            </h4>
            {this.renderByData(
              row.original[currentExpandedKey],
              keyMaps,
              onCellDisplay
            )}
          </div>
        );
      }}
      // onExpandedChange={(newExpanded, index, event) => {console.log('onExpand', newExpanded, index, event)}}
      getTdProps={(state, rowInfo, column, instance) => {
        return {
          onClick: (e, handleOriginal) => {
            // used to identify which column is expanding
            if (column.expander) {
              const expanded = { ...this.state.expanded };
              expanded[rowInfo.viewIndex] = this.state.expanded[rowInfo.viewIndex] ? false : true;
              console.log('expanded-----', expanded)
              this.setState({ expanded: expanded });
              currentExpandedKeys[rowInfo.index] = column.id;
              console.log('currentExpandedKeys-----', currentExpandedKeys);
            }

            // IMPORTANT! React-Table uses onClick internally to trigger
            // events like expanding SubComponents and pivots.
            // By default a custom 'onClick' handler will override this functionality.
            // If you want to fire the original onClick handler, call the
            // 'handleOriginal' function.
            if (handleOriginal) {
              handleOriginal();
            }
          }
        };
      }}
    />
  );

With the above code, I am getting below output.

looking for the following output.

Thanks in Advance.

Answer 1

in the useTable() table options, set autoResetExpanded: false. This fixed the problem for me.

You can also take a look at the documentation:

Info about the autoResetExpanded option: https://react-table.tanstack.com/docs/api/useExpanded

How do I stop my table state from automatically resetting when my data changes?: https://react-table.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes

Answer 2

I'm using session storage to cache the expanded row, therefore after update it stays open.

{
  JSON.parse(sessionStorage.getItem(row.id) || "false") || row.isExpanded ? (
    <tr>
      <td colSpan={visibleColumns.length}>
        <table className="mx-auto my-2 w-[92%]">
          <thead className="bg-brand text-black text-lg">
            <tr>
              <th className="text-left">Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>Text</tr>
          </tbody>
        </table>
      </td>
    </tr>
  ) : null;
}