Ant Design - Collapse expanded rows on click of pagination buttons - reactjs

Question

I am implementing the expandable row feature on an ant design table (Expandable Row), and it works perfectly fine as stated on the ant design site. But I would like to expand the functionality of the table to include collapsing of the rows when the user clicks on the buttons to the lower right of the table that allow pagination. This is a fairly straightforward question so I won't clutter it by posting code. Any help or links would be greatly appreciated.
EDIT Code snippet
import * as React from 'react';
import { Tooltip, Table } from 'antd';
import * as IAssignmentsResponse from '../../interfaces/QC/IAssignmentResponse';
import * as moment from 'moment';
const expandedRowRender = (rowData) => {
const columns = [
{ title: 'Row1', dataIndex: 'Row1DataIndex', key: '1'},
{ title: 'Row2', dataIndex: 'Row2DataIndex', key: '2'},
{ title: 'Row3', dataIndex: 'Row3DataIndex', key: '3'},
];
return <Table
columns={columns}
dataSource={rowData.DataArray}
pagination={false}>
</Table>
}
const bindRows = (row) => {
return row.Workitem.WorkflowRefID;
}
const columns = [
{
title: 'MasterRow1',
dataIndex: 'MasterRow1DataIndex',
key: '1',
render(value) { return value.WorkflowRefID; },
onFilter: (value, record) => record.Workitem.data1.indexOf(value) === 0,
sorter: (a, b) => a.Workitem.data1 - b.Workitem.data1
},
{
title: 'MasterRow2',
dataIndex: 'MasterRow1DataIndex',
key: '2',
render(value, record) { return <Tooltip title={record.data2} mouseEnterDelay={.5}>{value}</Tooltip> },
onFilter: (value, record) => record.data2.indexOf(value) === 0,
sorter: (a, b) => a.data2- b.data2
},
{
title: 'MasterRow3',
dataIndex: 'MasterRow1DataIndex',
key: '3',
render(value, record) { return <Tooltip title={record.data3} mouseEnterDelay={.5}>{value}</Tooltip> },
onFilter: (value, record) => record.data3.indexOf(value) === 0,
sorter: (a, b) => a.data3- b.data3
}
]
return <Table rowKey={record => bindRows(record)}
columns={columns}
dataSource={this.props.assignmentData.AssignmentsResponse.Assignment}
expandedRowRender={record => expandedRowRender(record)}
onExpand={this.onTableRowExpand}
/>

Answer 1

You can achieve this using the expandedRowKeys method of the Ant Design's Table component's API, which is the list of keys of already expanded rows. An empty list means all rows are collapsed.
You can capture pagination button clicks using the onChange method, which can be used to call a function that sets the state of your component:
class MyTable extends Component {
constructor(props) {
super(props);
this.state = { currentPage: 1, expandedRows: [] };
this.handleChange = this.handleChange.bind(this);
}
handleChange(pagination) {
// changes the page, collapses all rows
this.setState({ currentPage: pagination.current, expandedRows: [] });
}
handleRowExpand(record) {
// if a row is expanded, collapses it, otherwise expands it
this.setState(prevState =>
prevState.expandedRows.includes(record.key)
? {
expandedRows: prevState.expandedRows.filter(
key => key !== record.key
)
}
: { expandedRows: [...prevState.expandedRows, record.key] }
);
}
render() {
return (
<Table
dataSource={YOUR_DATA}
...OTHER_PROPS
pagination={{ current: this.state.currentPage }}
// pagination buttons clicked
onChange={this.handleChange}
// expand + icon clicked
onExpand={(expanded, record) => this.handleRowExpand(record)}
// tell the 'Table' component which rows are expanded
expandedRowKeys={this.state.expandedRows}
/>
);
}
}