1, The effect picture is as follows
2, The code is as follows
@Form.create() class StudentsList extends PureComponent { state = { eAdd:"",
eEdit:"", eDestroy:"", filteredInfo: null, sortedInfo: null, pageQuery:'', };
// Sort start handleChange = (pagination, filters, sorter,) => { console.log('Various
parameters', sorter); const { dispatch, form } = this.props; const query =
this.props.query; const pageQuery=this.state.pageQuery; const
sortVlaue=sorter.field; form.validateFields((err) => { if (!err) {
if(sorter.order=="ascend"){ dispatch({ type: 'students/fetch', payload: { sort:
sortVlaue , order: "ASC" ,query,name:pageQuery} }); this.setState({
filteredInfo: filters, sortedInfo: sorter, }); } else if
(sorter.order=="descend"){ dispatch({ type: 'students/fetch', payload: { sort:
sortVlaue , order: "DESC" ,query,name:pageQuery} }); this.setState({
filteredInfo: filters, sortedInfo: sorter, }); }else { dispatch({ type:
'students/fetch', payload: { sort: sortVlaue , order: "ASC"
,query,name:pageQuery} }); this.setState({ filteredInfo: filters, sortedInfo:
sorter, }); } } }) }; clearFilters = () => { this.setState({ filteredInfo: null
}); }; clearAll = () => { this.setState({ filteredInfo: null, sortedInfo: null,
}); }; // End of sorting } render() { let { sortedInfo, filteredInfo } = this.state;
sortedInfo = sortedInfo || {}; filteredInfo = filteredInfo || {}; const columns
= [ { title: ' Student number ', dataIndex: 'code', key: 'code', onFilter: (value, record)
=> record.code.includes(value), sorter: (a, b) => a.code.length -
b.code.length, sortOrder: sortedInfo.columnKey === 'code' && sortedInfo.order,
align: 'center', }, ]; return ( <Table columns={columns}
dataSource={studentsList} rowKey={record => record.id} pagination={false}
rowSelection={rowSelection} onChange={this.handleChange} /> ) } } function
mapStateToProps(state) { return { ...state.students }; } export default
connect(mapStateToProps)(StudentsList);
Technology