Я использую библиотеку 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>
)
}
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Поддерживается прямо из коробки. Как только вы определите sorter, он будет использоваться для всех dataSource. Итак, как только вы нажмете на отсортированный столбец, все ваши данные будут отсортированы.
Не очень очевидно, но вы можете взглянуть на этот пример. Если сортировать по age - сортируются все данные таблицы.
Если в столбце установлены значения string
sorter: (a, b) => a.name.localeCompare(b.name)
Если в столбце установлены значения integer
sorter: (a, b) => a.number - b.number
Если столбцы имеют только buttons, установите
sorter: true
Дополнительные параметры сортировки: Функция сравнения сортировки массива