Get filtered data in component table after executing the filter function on dataSource in ant design

Question

When useing the Table component in Ant-desigin, i want to get the filterd data in table after executing the filter function on the dataSource, but i cannot find the way to get it. There is a function called onChange which can only get the filter conditions which can not get the filtered data.

Answer 1

I kinda found a way. The props title and footer on the <Table /> component take a function which does provide the filtered data.

<Table
  footer={currentPageData => {
    console.log(currentPageData); // <-- This is an array of the filtered dataSource.
    return null;
  }}
/>

Answer 2

Add onChange function to Table(sample code is ts, if you are using js, do a little adjustment. And you can check the debug result: total dataSource size is 54, filtered dataSource size is 40, pagination doesn't impact the result

  handleChange = (pagination: any, filters: any, sorter: any, extra: { currentDataSource: Array<any>[] }) => {
    console.log('Various parameters', extra.currentDataSource);
    this.setState({
      filteredInfo: extra['currentDataSource']
    });
  }

  renderTable = (columns: Array<object>, dataSource: Array<any>) => {
    return (
      <Table
        dataSource={dataSource}
        columns={columns}
        expandedRowRender={(record) => (<Markdown source={record['description']} className="brz-mentor-markdown" />)}
        onChange={this.handleChange as any}
      />
    )
  }

Answer 3

You can easily add onChange attribute inside <Table/>. Create a function with 4 params: pagination, filters, sorter, extra and the data you're looking for is extra.currentDataSource.

onChange={
     (pagination, filters, sorter, extra) => {
          console.log(extra.currentDataSource)
     } 
}