I took it for granted that whenever the dataSource changed, the
PS: The onFilter() method is called at componentDidUpdate(). The onFilter() method is called at componentDidUpdate(). So setState will give an error, so I thought of setting state in onClick, but console.log comes out, dataSource changed, but table shows no data.
Sample code:
handleSearch=(a)= >{
this.setState({dataSource:dataSourceB})
}
getColumnSearchProps = (dataIndex)= > ({
filterDropdown: ({
setSelectedKeys, selectedKeys, confirm, clearFilters,
}) = > (
<div>
<Input
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
/>
<Button
onClick={() => this.handleSearch(selectedKeys, confirm)}
>
Search
</Button>
</div>
),
//Filter conditions, no code written, so no data returned, so no data
onFilter: (value, record)= >{},
})
render{
return(
<Table
column={ [{...this.getColumnSearchProps('name')}}
dataSource={dataSourceA}
>
)
}
Copy the codeExample code address: ant.design/components/…
The flow chart for column filtering logic is as follows:
OnFilter () ¶
getLocalData(state? : TableState<T> |null, filter: boolean = true): Array<T> {
const currentState: TableState<T> = state || this.state;
const { dataSource } = this.props;
let data = dataSource || [];
// Optimize local sorting
// This is the line of code that stores the dataSource via slice
data = data.slice(0);
const sorterFn = this.getSorterFn(currentState);
if (sorterFn) {
data = this.recursiveSort(data, sorterFn);
}
/ / filter
if (filter && currentState.filters) {
Object.keys(currentState.filters).forEach(columnKey => {
const col = this.findColumn(columnKey) as any;
if(! col) {
return;
}
const values = currentState.filters[columnKey] || [];
if (values.length === 0) {
return;
}
const onFilter = col.onFilter;
data = onFilter
? data.filter(record => {
return values.some(v => onFilter(v, record));
})
: data;
});
}
return data;
}
Copy the codeOnFilter () : github.com/ant-design/…
(after)