CODEWITHSUNDEEP
reactjsstatereact-tablereact-statereact-table-v6
Ajay Shivanagol
Ajay Shivanagol

Reputation: 47

Expanded row getting collapsed on state update on react-table

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. enter image description here

looking for the following output. enter image description here

Thanks in Advance.

Upvotes: 1

Views: 4212

Answers (2)

kana op
kana op

Reputation: 81

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

Upvotes: 3

asi hej
asi hej

Reputation: 333

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;
}

Upvotes: 0

Related Questions