React Table toggleRowExpanded not working

user_2831925 0
Viewed 1227

We are using react-table and we would like to collapse/expand the next available row in the react-table. For this, we are using react-table toggleRowExpanded passing row-id as the first param. This function isn't working as expected.

toggleRowExpanded([id], true);

Any help is appreciated.

react-table reactjs
1 Answers

As from react-table documentation, toggleRowExpanded is a function to toggle whether 'a' row is expanded or not. toggleRowExpanded expects a single rowId rather than an array of ids and an optional isExpanded boolean value which is the status of that single row.

In the example codesandbox shared, 2 changes to note :

  1. rowId is not the id from the data - but the id of the row in the table - which will be the index in this case
  2. toggleRowExpanded function is to be called separately for each row.

For the example to work,

   data.forEach((val, index) => {
          toggleRowExpanded(index, isEven ? index%2 === 0 : false);
        })
user_49944930
Related