React antd expandedRowRender - Only open one row at a time

Question

I created a react table and use ant design.

Is there a solution with ant design to allow the expandedRowRender function only for one row at a time.

I want to hide all other expand icons if one row is expanded.

Answer 1

It is quite simple to do. You will need to take advantage of expandedRowKeys property of <Table /> component. That property stores values of row keys that are currently expanded. So, what we have to do is just set only current expanded row keys on it and delete any others.

render()

<Table
    expandedRowKeys={this.state.expandedRowKeys}
    onExpand={this.onTableRowExpand}
/>

onExpand Callback

onTableRowExpand(expanded, record){
    var keys = [];
    if(expanded){
        keys.push(record.id); // I have set my record.id as row key. Check the documentation for more details.
    }

    this.setState({expandedRowKeys: keys});
}

More Read: <Table /> API Documentation

Update 2021

If you are using hooks

// useState()
const [expandedRowKeys, setExpandedRowKeys] = useState([]);

render()

<Table
    expandedRowKeys={expandedRowKeys}
    onExpand={onTableRowExpand}
/>

onExpand Callback

const onTableRowExpand = (expanded, record) => {
    const keys = [];
    if(expanded){
        keys.push(record.id); // I have set my record.id as row key. Check the documentation for more details.
    }

    setExpandedRowKeys(keys);
}