React

Pagination

The pagination component is used to navigate pages in lists, tables, and other content views. Related design guidelines: Lists and tables

ExamplesProps

Examples

Pagination top

Copied to clipboard

Pagination bottom

Copied to clipboard

Pagination disabled

Copied to clipboard

No items

Copied to clipboard

One page

Copied to clipboard

Props

Pagination Props

The Pagination component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullWhat should be rendered inside
classNamestring''Additional classes for the container.
itemCountnumberTotal number of items.
variant'top' | 'bottom' | 'left' | 'right'PaginationVariant.topPosition where pagination is rendered.
isDisabledbooleanfalseFlag indicating if pagination is disabled
perPagenumberdefaultPerPageOptions[0].valueNumber of items per page.
perPageOptionsPerPageOptions[][ { title: '10', value: 10 }, { title: '20', value: 20 }, { title: '50', value: 50 }, { title: '100', value: 100 } ]Select from options to number of items per page.
firstPagenumber1Page we start at.
pagenumber1Current page number.
itemsStartnumbernullFirst index of items on current page.
itemsEndnumbernullLast index of items on current page.
widgetIdstring'pagination-options-menu'ID to ideintify widget on page.
dropDirection'up' | 'down'DropdownDirection.downDirection of dropdown context menu.
titlesPaginationTitles{ items: 'items', page: 'page', itemsPerPage: 'Items per page', perPageSuffix: 'per page', toFirstPage: 'Go to first page', toPreviousPage: 'Go to previous page', toLastPage: 'Go to last page', toNextPage: 'Go to next page', optionsToggle: 'Select', currPage: 'Current page', paginationTitle: 'Pagination' }Object with titles to display in pagination.
toggleTemplate((props: ToggleTemplateProps) => React.ReactElement) | stringToggleTemplateThis will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props.
onSetPage(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user sets page.
onFirstClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user clicks on navigate to first page.
onPreviousClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user clicks on navigate to previous page.
onNextClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user clicks on navigate to next page.
onLastClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user clicks on navigate to last page.
onPageInput(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user inputs page number.
onPerPageSelect(event: React.MouseEvent | React.KeyboardEvent | MouseEvent, perPage: number) => void() => undefinedFunction called when user selects number of items per page.