React-table: defaultExpanded

[haialaluf]

Problem Description

I have tried to create a table with raw expanded as default i have tried expandedRows and defaultExpanded but none of them worked (no console error)
Codepen (https://codepen.io/anon/pen/eReewL?editors=0010)
data={makeData()}
columns={columns}
defaultExpanded={ {0: true, 2: true} }
expandedRows={ {0: true, 2: true} }
SubComponent={ ()=>

Hello!

}
/>

[aaronschwartz]

It does appear that defaultExpanded is not working correctly.

But if you're willing to completely take over the expanded rows, if you change expandedRows to expanded it does work. The API changed in 6.0.0 but I do see a reference in the readme still to the old expandedRows api.

[cbazza]

I just tried the same and it works with 'expanded' instead of 'expandedRows'.

[tannerlinsley]

Indeed, this looks broken.

[ChenYu020]

Hi,It seems that the defaultExpanded is still not working ,but I have updated my version to 6.5.1

[jozefcuryllo]

It still seems it's not working.

[elhamsarikhani]

I am facing the same issue. I need a few lines to be expanded by default. when I use defaultExpanded , it's not working at all and when I use 'expanded' property, the rows will be expanded but they won't be collapsed anymore as the user clicks on the row.

[stahlmanDesign]

What appears to be happening is that the rows start by respecting defaultExpanded, but immediately close on initial render.

[dazlious]

This is still happening to me.

using defaultExpanded and pivotBy

expanded does work, but the row cannot be collapsed

[nigel-stewart]

To anyone currently experiencing this issue, a workaround I've come up with is to just use expanded with onExpandedChange and just implement the expected behaviour like so:

  getExpanded() {
    return this.state.expanded;
  }

  setExpanded(e) {
    this.setState({
      expanded: e,
    });
  }

<ReactTable
     expanded={this.getExpanded()}
     onExpandedChange={e => {
         this.setExpanded(e);
     }}
/>

and then in your constructor set a default expanded object:

this.state = {
    expanded: { 0: true },
};