web-dev-qa-db-ja.com

完全なページ分割されたAntdテーブルの並べ替えとフィルタリング

特にプロジェクトとテーブル要素に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>                
     )
   }
  }
javascriptuser-interfacereact-reduxfrontendantd
5
Raman Haivaronski

そのまま使用できます。 sorterを定義すると、すべてのdataSourceに使用されます。したがって、ソートされた列をクリックすると、すべてのデータがソートされます。

あまり明白ではありませんが、 この例 をご覧ください。 ageで並べ替えると、テーブルデータ全体が並べ替えられます。

2
Alex