title: Ant Design - Collapse expanded rows on click of pagination buttons
body: <p>I am implementing the expandable row feature on an ant design table (<a href="https://ant.design/components/table/#components-table-demo-expand" rel="nofollow noreferrer">Expandable Row</a>), 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.</p>
  
  <p><strong>EDIT</strong> Code snippet</p>
  
  <pre><code>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) =&gt; {
          const columns = [
              { title: 'Row1', dataIndex: 'Row1DataIndex', key: '1'},
              { title: 'Row2', dataIndex: 'Row2DataIndex', key: '2'},
              { title: 'Row3', dataIndex: 'Row3DataIndex', key: '3'},
          ];
  
          return &lt;Table
              columns={columns}
              dataSource={rowData.DataArray}
              pagination={false}&gt;
          &lt;/Table&gt;
      }
  
      const bindRows = (row) =&gt; {
          return row.Workitem.WorkflowRefID;
      }
  
      const columns = [
          {
              title: 'MasterRow1',
              dataIndex: 'MasterRow1DataIndex',
              key: '1',
              render(value) { return value.WorkflowRefID; },
              onFilter: (value, record) =&gt; record.Workitem.data1.indexOf(value) === 0,
              sorter: (a, b) =&gt; a.Workitem.data1 - b.Workitem.data1
          },
          {
              title: 'MasterRow2',
              dataIndex: 'MasterRow1DataIndex',
              key: '2',
              render(value, record) { return &lt;Tooltip title={record.data2} mouseEnterDelay={.5}&gt;{value}&lt;/Tooltip&gt; },
              onFilter: (value, record) =&gt; record.data2.indexOf(value) === 0,
              sorter: (a, b) =&gt; a.data2- b.data2
          },
          {
              title: 'MasterRow3',
              dataIndex: 'MasterRow1DataIndex',
              key: '3',
              render(value, record) { return &lt;Tooltip title={record.data3} mouseEnterDelay={.5}&gt;{value}&lt;/Tooltip&gt; },
              onFilter: (value, record) =&gt; record.data3.indexOf(value) === 0,
              sorter: (a, b) =&gt; a.data3- b.data3
          }
      ]
  
      return &lt;Table rowKey={record =&gt; bindRows(record)}
          columns={columns}
          dataSource={this.props.assignmentData.AssignmentsResponse.Assignment}
          expandedRowRender={record =&gt; expandedRowRender(record)}
          onExpand={this.onTableRowExpand}
          /&gt;
  </code></pre>