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} />
);
}
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With