web-dev-qa-db-fra.com

Tri et filtrage de la table Antd paginée complète

J'utilise la bibliothèque Ant Design pour le projet et l'élément table en particulier.

La question est de savoir comment faire fonctionner les trieurs et les filtres pour l'ensemble du tableau, pas seulement la première page paginée?

Je recherche la solution front-end car la création des méthodes back-end ne convient pas au projet.

  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>                
     )
   }
  }
javascriptuser-interfacereact-reduxfrontendantd
5
Raman Haivaronski

Il est pris en charge dès la sortie de la boîte. Une fois que vous avez défini sorter, il est utilisé pour tous les dataSource. Ainsi, une fois que vous avez cliqué sur la colonne triée, toutes vos données sont triées.

Pas très évident, mais vous pouvez jeter un œil à cet exemple . Si vous triez par age - toutes les données de la table sont triées.

2
Alex