排序和过滤完整的分页的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- 整个表数据都会排序。