Ant Design - How can i get count of table row after filtering?

Question

I use Table component from Ant-design to search, filtering and sort a big set of data but I have a problem with "Select all Data".

For example if I click on checkbox on top of table, only display rows on screen are selected. So if I change of page, the others rows aren't selected. If I want select all data I need to custom selection and use rowSelection.selections.

As you can see on this example extract from ant.design website below, the proposal solution is to write directly all keys of row that I need to select, but if I have filtered just before one column I can't know the state of my props datasource.

So my question is: How can I know all the data currently available on the screen?

For example, If there is 10 pages initially, and then I filter and sort, and now there is 2 pages, how get the array of new set of data.

Thanks in advance. 👍

class App extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
  };

  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true,
      selections: [{
        key: 'all-data',
        text: 'Select All Data',
        onSelect: () => {
          this.setState({
            selectedRowKeys: [...Array(46).keys()], // 0...45
          });
        },
      }, {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          this.setState({ selectedRowKeys: newSelectedRowKeys });
        },
      }, {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          this.setState({ selectedRowKeys: newSelectedRowKeys });
        },
      }],
      onSelection: this.onSelection,
    };
    return (
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
    );
  }
}

Answer 1

You can try this props on Table

onChange: Callback executed when pagination, filters or sorter is changed

Function(pagination, filters, sorter, extra: { currentDataSource: [] })

The currentDataSource might be the thing you want.