Add onFilter property to Table that gives access to the filtered dataSource

[tijp]

First of all, thank you for your contribution! :-)

Please makes sure that these checkboxes are checked before submitting your PR, thank you!

• Make sure that you propose PR to right branch: bugfix for master, feature for latest active branch feature-x.x.
• Make sure that you follow antd's code convention.
• Run npm run lint and fix those errors before submitting in order to keep consistent code style.
• Rebase before creating a PR to keep commit history clear.
• Add some descriptions and refer relative issues for you PR.

Extra checklist:

• Update API docs for the component.
• Update/Add demo to demonstrate new feature.
• Update TypeScript definition for the component.
• Add unit tests for the feature.

Oops, new PR. I forgot to create a new branch so the previous PR had some mixed commits. Sorry for that, I'm still learning PR's.

Sometimes it's desirable to receive the filtered dataSource when the filters change in the Table component. For example when you want to display the number of rows in your table.

Issue for this feature #10298

This PR adds an onFilter prop to the Table component. When the filters change, the onFilter callback will be called with the filteredDataSource and filters properties.

<Table
  columns={columns}
  dataSource={data}

  onFilter={(filteredDataSource, activeFilters) => {

    // Now you can do whatever you want with the filtered dataSource

    this.setState({ numberOfRowsInTable: filteredDataSource.length });
  }}
/>

[ant-design-bot]

Deploy preview for ant-design ready!

Built with commit 0a7f7b3

https://deploy-preview-10898--ant-design.netlify.com

[codecov]

Codecov Report

Merging #10898 into feature-3.7.0 will increase coverage by <.01%.
The diff coverage is 100%.

@@                Coverage Diff                @@
##           feature-3.7.0   #10898      +/-   ##
=================================================
+ Coverage          91.74%   91.74%   +<.01%     
=================================================
  Files                196      196              
  Lines               4892     4895       +3     
  Branches            1369     1370       +1     
=================================================
+ Hits                4488     4491       +3     
  Misses               400      400              
  Partials               4        4

Impacted Files	Coverage Δ
components/table/Table.tsx	93.49% <100%> (+0.04%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 16e4260...0a7f7b3. Read the comment docs.

[afc163]

I think it is better to add filteredDataSource as onChange's arguments.

[tijp]

I agree it would be a cleaner approach. I'll change it so the filteredDataSource is added to the onChange arguments.

[tijp]

I moved the filteredDataSource to the onChange arguments. It's working fine for sort changes. However when I change the filter I receive the unfiltered datasource in the onChange arguments.

After looking around I found that the filters get removed in the handleFilter method. When removing this part of code it works fine and I receive the filtered datasource. Also the tests stay green.

Why do the filters get removed from the state in the handleFilter method, and can I safely remove that piece of code?

ant-design/components/table/Table.tsx

Lines 416 to 422 in 5ab265a

	// Remove filters which is controlled
	this.getFilteredValueColumns().forEach((col: ColumnProps<T>) => {
	const columnKey = this.getColumnKey(col);
	if (columnKey) {
	delete filtersToSetState[columnKey];
	}
	});

[Altamill]

@tijp 这个问题后续还有进展么？

[usamanazar]

this is prop is not available in 3.8.1v ?