对完整分页的 Antd 进行排序和过滤 Table

Question

我正在为项目使用 Ant Design 库，尤其是 table 元素。

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

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

  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 排序 - 整个 table 数据都会排序。

Answer 2

如果列设置了 string 个值

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

如果列设置了 integer 个值

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

如果列只有buttons，设置

sorter: true

更多排序选项：Array Sort Compare function

对完整分页的 Antd 进行排序和过滤 Table

Sorting and filtering the full paginated Antd Table

javascript

user-interface

frontend

react-redux

antd