Sorting and filtering the full paginated Antd Table

Question

I am using the Ant Design library for the project and the table element, in particular.

The question is how to make the sorters and filters work for the whole table, not just the first paginated page?

I am looking for the front-end solution because creating the back-end methods isn't suitable for the project.

  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

It's supported out of the box. Once you define sorter it's used for all the dataSource. So, once you click on sorted column - all your data gets sorted.

Not very obvious, but you can take a look at this example. If you sort by age - the whole table data gets sorted.