React-table: Auto-Expand All Rows

[scrawfor]

Is it possible to auto expand all rows? Currently it seems like you have to pass in an object which contains the rows you wish to expand. Instead, I'd prefer the ability to have everything expanded, while giving the user the option to collapse certain sections.

[tannerlinsley]

It is possible to expand all rows. You would need to map through all of the visible rows and create a key-value for each one.

{0: true, 1: true, 2: true, 3: true, ....}

There aren't any future plans to support the inverse for now.

[ernani]

What's the proper value for this? props.expander or props.expanderRows? I want to implement a toggle collapse on all items on the table, how can this be doable?

[gary-menzel]

Check the section in the doco called Controlled State Overrides

[ernani]

Thanks for replying so fast! I did check that, but then I'd have to manage the entire behavior of the table on my own, is that the only way?

[gary-menzel]

react-table is very light weight (deliberately designed that way) to make it perform well and to provide the greatest flexibility (as these things very quickly turn into implementation quirks). So, yes, that is the only way. However, I think you will find that the amount of work required is not quite as extreme as "the entire behaviour".

You don't have to implement Filtering, Sorting, Column Sizing, Paging, and the actual rendering of the expanded rows. In this case, you only have to manage the state of the expanded rows externally.

[ernani]

Sounds like a fair trade. I just thought that there were another way, I've seen about expandedRows prop but maybe it was just a wrong prop. I will work it out. Thanks a lot!

FYI This component rocks and has been the savior to our needs, I am very pleased with it and will suggest to anyone willing to implement something like it! Thanks a bunch for contributing to it and releasing it as open source!

[tylertyssedal]

Just a quick simple solution for those looking to map the expanded columns:

this.state.expandedColumns = this.state.columns.map(x => true);

Then in the expanded={this.state.expandedColumns}

I put the mapping in the constructor after the columns state was declared, but is there any benefit to putting it in a componentWillMount, etc, instead?

[gary-menzel]

Firstly, doing that type of initialisation in the constructor is fine (apparently componentWillMount is being deprecated in V17 of React).

However, I think the rest of your solution has a few misunderstandings that need clearing up.

• expanded is actually a nested structure that is used for both plain SubComponent expansion as well as for expanding nested pivot rows and it uses the view index of the row (which in the simplest case is 0 through to the number of displayed rows minus 1 (0 to visibleRows.length-1)
• mapping the columns as you have done will only work when the number of columns is equal to or greater than the number of displayed rows (there is no relationship between a column and the expanded object
• by only providing epxanded (and not also providing onExpandedChange) the feedback loop of the users changes (i.e. clicking on the row toggle icon) is broken and the linese can't be changed

[ashking]

@gary-menzel , I've about 15 columns to be pivoted and then there are about 50 rows displayed on the table. and all the pivoted groups are auto-expanded.

I'm generating a nested structure to have all these rows expanded and is passed down to the table component as props. Generating the nested structure often goes out of memory and crashes the browser.

Is there any other way I can auto expand all the pivoted columns? (I would not want the user to collapse/expand them anyway)

[mmacaula]

Late to the party, but we solved this using defaultExpanded prop and these set of functions. Note I'm using Lodash here to map and groupBy but definitely possible to remove those dependencies if you want:

import groupBy from 'lodash/groupBy';
import map from 'lodash/map';

const getAllExpandedData = (data, [pivotBy, ...rest]) => {
  if (rest.length === 0) {
    return map(groupBy(data, pivotBy), value => value);
  }
  return map(groupBy(data, pivotBy), value => {
    return getAllExpandedData(value, rest);
  });
};
const arrayToObjectWithIndices = array => array.reduce((acc, value, index) => {
  acc[index] = isArray(value) ? arrayToObjectWithIndices(value) : true;
  return acc;
}, {});

export const getExpandedPivotedIds = (reportData, pivotBys) => {
  return arrayToObjectWithIndices(getAllExpandedData(reportData, pivotBys));
};

// in component
const pivotBy = ['foo','bar','baz']
return <ReactTable data={data}
  pivotBy={pivotBy}
...
defaultExpanded={getExpandedPivotedIds(data, pivotBy)}
/>

Hope it helps!

[jessicabyrne]

Here is the (probably way overcomplicated way) I got this to work:

class ReactTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      expandedRows: [],
    };
  }
getData() {
      this.setState(() => ({
        data: getDataInfo,
        expandedRows: getDataInfo.map((x) => true),
      }));
    });
  }

  componentDidMount() {
    this.getData();
  }

render() {
    const { data, expandedRows } = this.state;
    return (
        <ReactTable
          data={data}
          columns={columns}
          expanded={expandedRows}
          onExpandedChange={(newExpanded, index) => {
            if (newExpanded[index[0]] === false) {
              newExpanded = {};
            } else {
              Object.keys(newExpanded).map((k) => {
                newExpanded[k] = {};
              });
            }
            this.setState({
              ...this.state,
              expandedRows: newExpanded,
            });
          }}
        />
      )}
}

defaultExpanded wouldn't work for me, even if I simply put in {0: true, 1: true} etc.
My only usecase is that I want all the rows to be expanded by default.

[mustaphaturhan]

defaultExpanded isn't work for me too, so I created a new function by going with @jessicabyrne's code.

        <ReactTable
          data={data}
          columns={this.columns}
          expanded={expandedRows}
          onExpandedChange={(newExpanded, index) => {
            this.setState((oldState) => {
              const itemIndex = index[0];
              const isExpanded = oldState.expandedRows[itemIndex];
              const expandedList = [...expandedRows];
              expandedList[itemIndex] = !isExpanded;
              return {
                expandedRows: expandedList
              };
            });
          }}
        />

[sarika57]

How to auto expand all rows in antd table , defaultExpandAllrows only works for first render after refresh it is getting closed

[stahlmanDesign]

How to auto expand all rows in antd table , defaultExpandAllrows only works for first render after refresh it is getting closed

useTable(
  {
    columns,
    data,
    autoResetExpanded: false,
  })