javascript - Sortering och filtrering av hela paginerade Antd-tabellen

Jag använder Ant Design-biblioteket för projektet och tabellselementet, i synnerhet.

Frågan är hur man får sorterings- och filtreringsfunktionerna att fungera för hela tabellen, inte bara den första paginerade sidan?

Jag letar efter front-end-lösningen eftersom det inte är lämpligt för projektet att skapa back-end-metoderna.

  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>                
     )
   }
  }

Svar #1

Det stöds direkt. När du definierar sorter används det för hela dataSource. Så när du klickar på en sorterad kolumn sorteras all din data.

Inte mycket uppenbart, men du kan titta på detta exempel. Om du sorterar efter age - sorteras hela tabellens data.

Svar #2

Om kolumnen har string-värden inställda

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

Om kolumnen har integer-värden inställda

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

Om kolumner bara har knappar, ställ in

sorter: true

För fler sorteringsalternativ: Array Sort Compare-funktion