对已分页的完整Antd表进行排序和筛选

Question

我将Ant Design库用于项目，尤其是表元素。

问题是如何使排序器和过滤器适用于整个表，而不仅仅是第一个分页页面？

我正在寻找前端解决方案，因为创建后端方法不适合该项目。

export default class BookTable extends React.PureComponent<BooksTableProps> 
{
private readonly columns: ColumnProps<Book>[] = [
{
title: 'Name',
dataIndex: 'name',           
key: 'name',
defaultSortOrder: 'descend',
sorter: (a, b) => {return a.name.localeCompare(b.name)},
render: (text, record) => <span>{record.name}</span>,
},...
]
render() {
const {
loading,
pagination,
books,            
} = this.props;
return (
<div>           
<Table          
bordered
columns={this.columns}
dataSource={books}          
loading={loading}
pagination={pagination}
onChange={this.handleTableChange}
/>
</div>                
)
}
}

Answer 1

它得到了开箱即用的支持。一旦定义了sorter，它将用于所有的dataSource。所以，一旦单击排序列，所有的数据都会被排序。

不是很明显，但你可以看看这个例子。如果按age排序，则会对整个表数据进行排序。

Answer 2

如果列具有设置的string值

sorter: (a, b) => a.name.localeCompare(b.name)

如果列具有integer值，则设置

sorter: (a, b) => a.number - b.number

如果列只有buttons，则设置

sorter: true

更多排序选项：数组排序比较功能