19. Table: пагинация

Подключение пагинации

import { getPaginationRowModel, type PaginationState } from '@tanstack/react-table'

const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,  // Начинается с 0!
  pageSize: 10,
})

const table = useReactTable({
  data,
  columns,
  state: { pagination },
  onPaginationChange: setPagination,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),  // Добавляем!
  rowCount: totalRows,  // Для серверной пагинации
})

PaginationState

pagination = {
  pageIndex: 0,   // Текущая страница (0-based)
  pageSize: 10,   // Строк на странице
}

Методы таблицы для пагинации

table.getPageCount()          // Общее количество страниц
table.getCanPreviousPage()    // Можно ли перейти назад
table.getCanNextPage()        // Можно ли перейти вперёд
table.previousPage()          // Перейти на предыдущую страницу
table.nextPage()              // Перейти на следующую страницу
table.firstPage()             // Перейти на первую страницу
table.lastPage()              // Перейти на последнюю страницу
table.setPageIndex(n)         // Перейти на страницу n
table.setPageSize(n)          // Изменить размер страницы
table.getState().pagination   // Текущее состояние пагинации

Компонент управления пагинацией

function Pagination({ table }: { table: Table<any> }) {
  const { pageIndex, pageSize } = table.getState().pagination

  return (
    <div>
      <button onClick={() => table.firstPage()} disabled={!table.getCanPreviousPage()}>«</button>
      <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>‹</button>

      <span>
        Страница {pageIndex + 1} из {table.getPageCount()}
      </span>

      <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>›</button>
      <button onClick={() => table.lastPage()} disabled={!table.getCanNextPage()}>»</button>

      <select value={pageSize} onChange={(e) => table.setPageSize(Number(e.target.value))}>
        {[5, 10, 20, 50].map(size => (
          <option key={size} value={size}>{size} строк</option>
        ))}
      </select>
    </div>
  )
}

Серверная пагинация

Для серверной пагинации добавьте manualPagination: true:

const table = useReactTable({
  data,                    // Только текущая страница!
  columns,
  rowCount: totalRows,     // Общее количество строк на сервере
  state: { pagination },
  onPaginationChange: (newPagination) => {
    setPagination(newPagination)
    // Запрашиваем данные с сервера
    fetchData({
      page: newPagination.pageIndex,
      pageSize: newPagination.pageSize,
    })
  },
  manualPagination: true,  // Отключаем клиентскую пагинацию
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
})