PaginationSection

Компонент PaginationSection — это готовая панель постраничной навигации для таблиц TanStack Table. Включает выбор количества записей на странице, навигацию по страницам и счётчик отображаемых записей.

Обзор

Основное назначение: комплексное управление пагинацией таблицы.
Ключевые возможности:
- Выбор размера страницы (10, 20, 30, 40, 50, 100 записей).
- Навигация по страницам с кнопками «Назад» и «Вперёд».
- Адаптивное количество отображаемых соседних страниц.
- Счётчик записей (текущий диапазон / всего).
- Полная интеграция с TanStack Table.

API компонента

Props

Проп	Тип	По умолчанию	Описание
`table`	`Object`	(обязательный)	Экземпляр таблицы TanStack Table. Должен содержать методы `getState()`, `getPageCount()`, `setPageSize()`, `setPageIndex()`, `getRowModel()`, `getCoreRowModel()`.

Inject

Ключ	Источник	Описание
`breakpointsContext`	Родительский компонент	Контекст с информацией о текущих брейкпоинтах (`isXl`, `is2xl`).

Адаптивность

Количество отображаемых соседних страниц (siblings) и граничных страниц (boundaries) зависит от ширины экрана:

Брейкпоинт	`siblings`	`boundaries`
`< xl`	1	1
`≥ xl`	2	2
`≥ 2xl`	3	1

Структура

Компонент состоит из трёх секций:

Выбор размера страницы: селект с опциями 10, 20, 30, 40, 50, 100.
Навигация по страницам: компонент Pagination с кнопками «Назад», «Вперёд» и номерами страниц.
Счётчик записей: текст вида «1 - 10 of 50 entries».

Базовое использование

<template>
    <div>
        <Table>
            <!-- содержимое таблицы -->
        </Table>
        <PaginationSection :table="table" class="mt-4" />
    </div>
</template>

<script>
import { useVueTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/vue-table';

export default {
    setup() {
        const table = useVueTable({
            data: [...],
            columns: [...],
            getCoreRowModel: getCoreRowModel(),
            getPaginationRowModel: getPaginationRowModel(),
        });
        return { table };
    },
};
</script>