How to collapse other expanded rows in react-table

Question

I am using React Table in my project, I don't know how to close other expanded rows when user clicks one expanded, i.e. when first, second, and third rows are all expanded, I want to close all of the three when user click the fourth row.

Can someone tell me how?

Solution 1

For anyone looking for more info about that :

//in component constructor, add state declaration :

this.state = {
    expanded: {}
}

//in component render function - set "expanded" to component state:

expanded={this.state.expanded}

// still in component render() - set an event callback - I prefer to use a dedicated event manager here named handleRowExpanded :

onExpandedChange={(newExpanded, index, event) => this.handleRowExpanded(newExpanded, index, event)}

// then declare an event manager :

   handleRowExpanded(newExpanded, index, event) {
        this.setState({
        // we override newExpanded, keeping only current selected row expanded
            expanded: {[index]: true}
        });
    }

HTH :)

Solution 2

The way Arnaud Enesvat suggests works for expansion but not to collapse an expanded row back.

I'd suggest his implementation with a change:

handleRowExpanded(rowsState, index) {
  this.setState({
    expanded: {
      [index[0]]: !this.state.expanded[index[0]],
    },
  });
}

Solution 3

I've found help from Nathan Zylbersztejn at spectrum.chat/thread/ea9b94dc-6291-4a61-99f7-69af4094e90c :

<ReactTable
    ...
    expanded={this.state.expanded}
    onExpandedChange={(newExpanded, index, event) => {
        if (newExpanded[index[0]] === false) {
            newExpanded = {}
        } else {
            Object.keys(newExpanded).map(k => {
                newExpanded[k] = parseInt(k) === index[0] ? {} : false
            })
        }
        this.setState({
            ...this.state,
            expanded: newExpanded
        })
    }}
/>

I hope it helps somebody.

Comments

[birendra]

How do you fix for expand a single row at a time? Please share the code with your fixing.

[dwjohnston]

It's good to answer your own questions, but I think you should post some code here to show whatyou've done.

[birendra]

Here is code sample <ReactTable columns={columns} data={newsData} minRows={10} loading={loading} className="-striped -highlight" collapseOnDataChange={false} expanded={this.state.expanded} SubComponent={row => { return <NewsOptions newsItem={row.original} />; }} onExpandedChange={(newExpanded, index, event) => this.handleRowExpanded(newExpanded, index, event)} />

[jacobhobson]

The key here is to let the parent component (the component actually rendering the react-table) orchestrate the state. +1 for pointing out that expanded={this.state.expanded}.

[deHaar]

Could you please add some explanation about how and why your code snippet provides an answer to the question? Thank you.

[Tony Huynh]

@deHaar i google this issue, i found this code, i used it in my project, it worked, i share, if you are react developer, you're looking for solution for this issue, you will know how and why, that's it

[Nikhil Gowda]

how to do it in functional component al i see exapanded is read-only, any solutions will help. thank you