Skip to content
Patternfly Logo

Pagination

Examples

Top

1 - 20 of 523
1 - 20 of 523

Bottom

1 - 10 of 333

Disabled

1 - 20 of 523
1 - 20 of 523

No items

0 - 0 of 0
0 - 0 of 0

One page

1 - 15 of 15
1 - 15 of 15

Compact

1 - 20 of 523
1 - 20 of 523

Sticky

Props

Pagination

*required
NameTypeDefaultDescription
itemCountrequirednumberTotal number of items.
childrenReact.ReactNodenullWhat should be rendered inside
classNamestring''Additional classes for the container.
defaultToFullPagebooleanfalseIndicate whether to show last full page of results when user selects perPage value greater than remaining rows
dropDirection'up' | 'down'Direction of dropdown context menu.
firstPagenumber1Page we start at.
isCompactbooleanfalseFlag indicating if pagination is compact
isDisabledbooleanfalseFlag indicating if pagination is disabled
isStaticbooleanFlag indicating if pagination should not be sticky on mobile
isStickybooleanfalseFlag indicating if pagination should stick to its position (based on variant)
itemsEndnumbernullLast index of items on current page.
itemsStartnumbernullFirst index of items on current page.
offsetnumber0Start index of rows to display, used in place of providing page
onFirstClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user clicks on navigate to first page.
onLastClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user clicks on navigate to last page.
onNextClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user clicks on navigate to next page.
onPageInput(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user inputs page number.
onPerPageSelect( _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number, newPage: number, startIdx?: number, endIdx?: number ) => void() => undefinedFunction called when user selects number of items per page.
onPreviousClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void() => undefinedFunction called when user clicks on navigate to previous page.
onSetPage( _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number, perPage?: number, startIdx?: number, endIdx?: number ) => void() => undefinedFunction called when user sets page.
ouiaSafeNo type infotrue
pagenumber0Current page number.
perPagenumberdefaultPerPageOptions[0].valueNumber of items per page.
perPageOptionsPerPageOptions[][ { title: '10', value: 10 }, { title: '20', value: 20 }, { title: '50', value: 50 }, { title: '100', value: 100 } ]Array of the number of items per page options.
titlesPaginationTitles{ items: '', 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: 'Items per page', currPage: 'Current page', paginationTitle: 'Pagination', ofWord: 'of' }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.
variant'top' | 'bottom' | PaginationVariantPaginationVariant.topPosition where pagination is rendered.
widgetIdstring'pagination-options-menu'ID to ideintify widget on page.

PaginationTitles

*required
NameTypeDefaultDescription
currPagestringAccessible label for the input displaying the current page
itemsstringThe type or title of the items being paginated
itemsPerPagestringThe Title of the Pagination Options Menu
ofWordstringAccessible label for the English word "of"
optionsTogglestringAccessible label for the Options Toggle
pagestringThe title of a page displayed beside the page number
paginationTitlestringAccessible label for the pagination component
perPageSuffixstringThe suffix to be displayed after each option on the Options Menu dropdown
toFirstPagestringAccessible label for the button which moves to the first page
toLastPagestringAccessible label for the button which moves to the last page
toNextPagestringAccessible label for the button which moves to the next page
toPreviousPagestringAccessible label for the button which moves to the previous page

PerPageOptions

*required
NameTypeDefaultDescription
titlestringoption title
valuenumberoption value

ToggleTemplateProps

*required
NameTypeDefaultDescription
firstIndexnumberThe first index of the items being paginated
itemCountnumberThe total number of items being paginated
itemsTitlestringThe type or title of the items being paginated
lastIndexnumberThe last index of the items being paginated
ofWordReact.ReactNodeThe word that joins the index and itemCount/itemsTitle

View source on GitHub