Pagination

Maintainer:
jhoncool
GitHub
page
pageSize
total
compact
showInput
showPages
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} />;

Свойства

ИмяОписаниеТипЗначение по умолчанию
classNameHTML-атрибут class.string
compactСкрывает заголовки для кнопок First, Previous и Next. В мобильной версии всегда имеет значение true.booleantrue
onUpdateВызывается при изменении номера страницы или свойства pageSize.Function
sizeРазмер элементов пагинации. По умолчанию l для мобильных и m для десктопных версий.string
pageНомер текущей страницы.number
pageSizeКоличество элементов данных на одной странице.number
pageSizeOptionsПозволяет указать опции для sizeChanger.number[]
totalОбщее количество элементов данных.number
showInputОтображает элемент ввода для перехода к конкретной страницеbooleanfalse
showPagesОтображает нумерацию страниц.booleantrue
qaHTML-атрибут data-qa, используется для тестирования.string