Can one control the state of Antd Table's "Check All" control?

Question

I have an Ant Design table with sorting, selection and pagination. By default (if I understand it correctly), Antd Table selection works on a per-page basis. If you click the 'Select All' checkbox in the selection column header, Antd will select all the rows on the current page but if you then change page, both the rows and header will revert to a unchecked state. The selection is not lost because if you then go back to the previous page, the rows and header are all checked.

So I wanted to change this so that 'Select All' really selects all the rows of the table regardless of pagination. I found a few github issues in which recommended simply managing the selectedRowKeys array onSelect and onSelectAll functions oneself. I did this and now my selection works as expected...

However...

The "select all" checkbox in the selection column header still functions in terms of the page rows. So for example if I'm on the first page and "Select all" then deselect one of the rows, the "select all" checkbox is in the intermediate/partial state as expected. However if I then go to the next page, all rows are checked as expected and so is the "select all" checkbox in the header. For this selection to make sense functionally it would need to remain in the intermediate/partial state. It needs to reflect the selection over the entire dataset and not just the current page.

This can be seen in this simple example : https://codesandbox.io/s/antd-table-selection-ikqym

Any ideas how to override the "select all" checkbox ?

Cheers

Answer 1

So it turns out it's quite simple. All you need to do is add columnTitle to the rowSelection prop and provide it with a Checkbox which handles itself appropriately.

https://codesandbox.io/s/antd-table-selection-forked-r702s