Сортировка, фильтрация и разбиение на страницы

Чтобы добавить сортировку, импортируйте getSortedRowModel и добавьте его в конфигурацию useReactTable. Также потребуется состояние сортировки — массив объектов {id, desc} — и обработчик onSortingChange, связанный с состоянием React.

Модель отсортированных строк оборачивает базовую модель строк и переупорядочивает строки на основе текущего состояния сортировки.

Каждый заголовок столбца предоставляет column.getToggleSortingHandler(), который следует назначить свойству onClick элемента th. При нажатии состояния циклически меняются: по возрастанию, по убыванию и без сортировки.

column.getIsSorted() возвращает 'asc', 'desc' или false, что позволяет отобразить подходящую стрелку индикатора сортировки.

TanStack Table поддерживает одновременную сортировку по нескольким столбцам. Чтобы добавить второй столбец в массив сортировки, не удаляя первый, удерживайте клавишу Shift при нажатии на его заголовок.

Массив sortingState содержит все активные столбцы сортировки в порядке приоритета, а модель отсортированных строк применяет их последовательно.

Включите глобальную фильтрацию, импортировав getFilteredRowModel и добавив состояние globalFilter вместе с обработчиком onGlobalFilterChange. Свяжите элемент поля ввода с этим состоянием, чтобы одновременно фильтровать данные по всем столбцам.

По умолчанию глобальный фильтр использует стратегию нечёткого сопоставления или проверки вхождения; настроить её можно через filterFns.

Отдельные столбцы могут предоставлять собственные фильтры через column.getFilterValue() и column.setFilterValue(). Добавьте поле ввода под каждым заголовком столбца и свяжите его с этими методами.

Фильтры столбцов и глобальные фильтры применяются вместе: чтобы попасть в отфильтрованную модель строк, строка должна пройти все активные фильтры.

Импортируйте getPaginationRowModel и добавьте его в конфигурацию useReactTable вместе с объектом состояния постраничной разбивки (pageIndex и pageSize) и обработчиком onPaginationChange.

Модель строк постраничной разбивки выделяет из отфильтрованных и отсортированных строк только часть, относящуюся к текущей странице.

Экземпляр таблицы предоставляет методы table.nextPage(), table.previousPage(), table.firstPage() и table.lastPage() для перехода между страницами. Используйте table.getCanNextPage() и table.getCanPreviousPage(), чтобы отключать кнопки на границах списка страниц.

table.setPageIndex(n) сразу переходит на указанную страницу, а table.setPageSize(n) изменяет количество строк на странице.

table.getPageCount() возвращает общее количество страниц: число отфильтрованных строк делится на pageSize. table.getState().pagination.pageIndex возвращает текущий индекс страницы, отсчитываемый с нуля.

Используйте эти значения, чтобы создать в интерфейсе постраничной разбивки счётчик вроде «Страница 3 из 12».

Модели строк сочетаются: getCoreRowModel предоставляет основу, getFilteredRowModel оборачивает её и применяет фильтры, getSortedRowModel оборачивает отфильтрованные данные и применяет сортировку, а getPaginationRowModel выделяет из результата строки текущей страницы.

Порядок важен: сначала выполняется фильтрация, затем сортировка, а постраничная разбивка — в последнюю очередь.

TanStack Table внутренне мемоизирует вычисления моделей строк. Сортировка и фильтрация больших наборов данных выполняются эффективно, поскольку пересчитываются только изменившиеся модели строк.

Для чрезвычайно больших наборов данных — от 100 000 строк — сочетайте постраничную разбивку с виртуализацией (react-virtual), чтобы не отрисовывать все строки страницы одновременно.

Свяжите getSortedRowModel с состоянием сортировки, getFilteredRowModel — с globalFilter и состояниями фильтров столбцов, а getPaginationRowModel — с состоянием постраничной разбивки. Каждая возможность включается отдельно и легко сочетается с остальными.

Заголовки столбцов запускают сортировку через getToggleSortingHandler; поля ввода запускают фильтрацию через setFilterValue и onGlobalFilterChange; кнопки управляют постраничной разбивкой через nextPage, previousPage и setPageIndex.

Какой объект хранит текущий индекс страницы и размер страницы в состоянии постраничной разбивки TanStack Table?

Для сортировки требуются getSortedRowModel, состояние сортировки и обработчики нажатия на заголовки столбцов. Для фильтрации используется getFilteredRowModel вместе с глобальным состоянием фильтра и состояниями фильтров отдельных столбцов. Для постраничной разбивки используется getPaginationRowModel вместе с состояниями pageIndex и pageSize.

Все три модели строк сочетаются автоматически: сначала фильтрация, затем сортировка, затем постраничная разбивка.