Pagination

import {Pagination} from '@gravity-ui/uikit';

Компонент Pagination используется для рендеринга элементов постраничной навигации.

§Использование

import {Pagination, PaginationProps} from '@gravity-ui/uikit';

const [state, setState] = React.useState({page: 1, pageSize: 100});

const handleUpdate: PaginationProps['onUpdate'] = (page, pageSize) =>
  setState((prevState) => ({...prevState, page, pageSize}));

const pagination = <Pagination page={1} pageSize={100} total={1000} onUpdate={handleUpdate} />;

§Кастомный компонент

Вы можете переопределить корневой элемент кликабельных элементов пагинации (навигационных и постраничных кнопок) через свойство pageComponent. Передайте pageComponent="a" и возвращайте href из getPageProps, чтобы использовать обычные ссылки. Для интеграции с роутером передайте компонент роутера, например Link, и возвращайте специфичные для него props, например to.

getPageProps вызывается для каждого кликабельного элемента (кнопок страниц и навигационных кнопок). Он не вызывается для многоточия, индикатора "page of", для простого (текущего) элемента страницы в мобильной разметке, а также для отключённых навигационных кнопок (они всегда остаются инертными нативными <button disabled> и не могут быть активированы, в том числе с клавиатуры). Pagination-управляемые свойства (onClick, className, size, view, selected, disabled, qa, aria-current, extraProps, children) имеют приоритет над значениями, возвращёнными из getPageProps.

§Обычные ссылки (pageComponent="a")

import {Pagination} from '@gravity-ui/uikit';
import type {PaginationProps, PaginationPagePropsGetter} from '@gravity-ui/uikit';

const total = 1000;
const page = 1;
const pageSize = 100;

const noop: PaginationProps['onUpdate'] = () => {};

const getPageProps: PaginationPagePropsGetter = ({page}) => ({href: `?page=${page}`});

const pagination = (
  <Pagination
    page={page}
    pageSize={pageSize}
    total={total}
    onUpdate={noop}
    pageComponent="a"
    getPageProps={getPageProps}
  />
);

§Ссылки роутера (например, react-router)

import {Pagination} from '@gravity-ui/uikit';
import type {PaginationProps, PaginationPagePropsGetter} from '@gravity-ui/uikit';
import {Link} from 'react-router-dom';

const total = 1000;
const page = 1;
const pageSize = 100;

const noop: PaginationProps['onUpdate'] = () => {};

const getPageProps: PaginationPagePropsGetter<{to: string}> = ({page}) => ({
  to: `?page=${page}`,
});

const pagination = (
  <Pagination
    page={page}
    pageSize={pageSize}
    total={total}
    onUpdate={noop}
    pageComponent={Link}
    getPageProps={getPageProps}
  />
);

§Свойства