17. Table: сортировка

Подключение сортировки

Сортировка добавляется через getSortedRowModel и управление состоянием sorting:

import { useReactTable, getSortedRowModel, type SortingState } from '@tanstack/react-table'

const [sorting, setSorting] = useState<SortingState>([])

const table = useReactTable({
  data,
  columns,
  state: { sorting },
  onSortingChange: setSorting,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),  // Добавляем!
})

SortingState

Состояние сортировки — массив объектов { id: string; desc: boolean }:

// Нет сортировки
sorting = []

// Сортировка по имени A-Z
sorting = [{ id: 'name', desc: false }]

// Сортировка по зарплате Z-A
sorting = [{ id: 'salary', desc: true }]

// Мульти-сортировка: сначала по отделу, потом по зарплате
sorting = [
  { id: 'department', desc: false },
  { id: 'salary', desc: true },
]

Управление сортировкой в заголовке

<th onClick={header.column.getToggleSortingHandler()}>
  {flexRender(header.column.columnDef.header, header.getContext())}
  {header.column.getIsSorted() === 'asc' && ' ↑'}
  {header.column.getIsSorted() === 'desc' && ' ↓'}
</th>

Методы Column для сортировки

column.getCanSort()           // Можно ли сортировать эту колонку
column.getIsSorted()          // false | 'asc' | 'desc'
column.getSortIndex()         // Индекс в мульти-сортировке (0, 1, 2...)
column.toggleSorting(desc?)   // Переключить сортировку
column.clearSorting()         // Сбросить сортировку
column.getToggleSortingHandler()  // Готовый обработчик события

Мульти-сортировка

По умолчанию клик по заголовку сбрасывает предыдущую сортировку. Для мульти-сортировки нужно зажать Shift при клике:

const table = useReactTable({
  ...,
  isMultiSortEvent: (e) => (e as MouseEvent).shiftKey,  // Default behaviour
  maxMultiSortColCount: 3,  // Максимум 3 колонки
})

Отключение сортировки для конкретной колонки

const columns: ColumnDef<User>[] = [
  { accessorKey: 'actions', enableSorting: false },
]

Серверная сортировка

const table = useReactTable({
  data,
  columns,
  manualSorting: true,  // Отключаем клиентскую сортировку
  state: { sorting },
  onSortingChange: (newSorting) => {
    setSorting(newSorting)
    // Запрашиваем данные с сервера с новой сортировкой
    fetchData({ sorting: newSorting })
  },
})