Ant Design - Collapse expanded rows on click of pagination buttons

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}
      />
    );
  }
}