javascript - 对完整分页的 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。因此，一旦您单击已排序的列 - 您的所有数据都会被排序。

不是很明显，但是你可以看看this example .如果您按 age 排序 - 整个表数据都会排序。