Получить отфильтрованные данные в таблице компонентов после выполнения функции фильтра в dataSource в ant design

Question

При использовании компонента Table в Ant-desigin я хочу получить данные filterd в таблице после выполнения функции фильтра на источнике данных, но не могу найти способ их получить. Существует функция onChange, которая может получить только те условия фильтра, которые не могут получить отфильтрованные данные.

Answer 1

Добавьте onChange функцию к таблице (пример кода ts, если вы используете js, сделайте небольшую настройку. И вы можете проверить результат отладки: общий размер dataSource равен 54, размер отфильтрованного dataSource равен 40 , нумерация страниц не влияет на результат

  handleChange = (pagination: any, filters: any, sorter: any, extra: { currentDataSource: Array<any>[] }) => {
    console.log('Various parameters', extra.currentDataSource);
    this.setState({
      filteredInfo: extra['currentDataSource']
    });
  }

  renderTable = (columns: Array<object>, dataSource: Array<any>) => {
    return (
      <Table
        dataSource={dataSource}
        columns={columns}
        expandedRowRender={(record) => (<Markdown source={record['description']} className="brz-mentor-markdown" />)}
        onChange={this.handleChange as any}
      />
    )
  }

Answer 2

Я вроде нашел способ. Реквизиты title и footer в компоненте <Table /> принимают функцию, которая обеспечивает отфильтрованные данные.

<Table
  footer={currentPageData => {
    console.log(currentPageData); // <-- This is an array of the filtered dataSource.
    return null;
  }}
/>