Pagination

A pagination component allows users to navigate through large content views that have been split across multiple pages.

Examples

Top

1 - 20 of 523

Bottom

Indeterminate

By not passing itemCount and passing toggleTemplate you can customize the toggle with text.

1 - 20 of many

Disabled

1 - 20 of 523

No items

0 - 0 of 0

One page

1 - 15 of 15

Compact

1 - 20 of 523

Offset

1 - 20 of 523

Sticky

Sticky screenshot

Inset

1 - 20 of 523

Props

Pagination

The main pagination component.
*required
NameTypeDefaultDescription
childrenReact.ReactNodeWhat should be rendered inside the pagination.
classNamestring''Additional classes for the pagination container.
dropDirection'up' | 'down'Direction of dropdown context menu.
firstPagenumber1Page to start at.
inset{ default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; }Insets at various breakpoints.
isCompactbooleanfalseFlag indicating if pagination is compact.
isDisabledbooleanfalseFlag indicating if pagination is disabled.
isLastFullPageShownbooleanfalseIndicate whether to show last full page of results when user selects perPage value greater than remaining rows.
isStaticbooleanfalseFlag indicating if pagination should not be sticky on mobile.
isStickybooleanfalseFlag indicating if pagination should stick to its position (based on variant).
itemCountnumberTotal number of items.
itemsEndnumbernullLast index of items on current page.
itemsStartnumbernullFirst index of items on current page.
menuAppendTo BetaHTMLElement | (() => HTMLElement) | 'inline'The container to append the pagination options menu to.
offsetnumbernullStart 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.KeyboardEvent<HTMLInputElement>, page: number) => void() => undefinedFunction called when user inputs page number.
onPerPageSelect( event: 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( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number, perPage?: number, startIdx?: number, endIdx?: number ) => void() => undefinedFunction called when user sets page.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
pagenumber1Current 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: '', pages: '', itemsPerPage: 'Items per page', perPageSuffix: 'per page', toFirstPageAriaLabel: 'Go to first page', toPreviousPageAriaLabel: 'Go to previous page', toLastPageAriaLabel: 'Go to last page', toNextPageAriaLabel: 'Go to next page', optionsToggleAriaLabel: '', currPageAriaLabel: 'Current page', paginationAriaLabel: 'Pagination', ofWord: 'of' }Object with titles to display in pagination.
toggleTemplate((props: PaginationToggleTemplateProps) => React.ReactElement) | stringThis will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle, and/or ofWord props.
usePageInsetsbooleanFlag indicating that pagination should use page insets.
variant'top' | 'bottom' | PaginationVariantPaginationVariant.topPosition where pagination is rendered.
widgetIdstring'options-menu'Id to ideintify widget on page.

PaginationTitles

Properties to customize various pagination titles. The following properties should be passed into the pagination component's title property.
*required
NameTypeDefaultDescription
currPageAriaLabelstringAccessible label for the input displaying the current page.
itemsstringThe type or title of the items being paginated.
itemsPerPagestringThe title of the pagination options menu.
ofWordstringLabel for the English word "of".
optionsToggleAriaLabelstringAccessible label for the options toggle.
pagestringThe title of a page displayed beside the page number.
pagesstringThe title of a page displayed beside the page number (plural form).
paginationAriaLabelstringAccessible label for the pagination component.
perPageSuffixstringThe suffix to be displayed after each option on the options menu dropdown.
toFirstPageAriaLabelstringAccessible label for the button which moves to the first page.
toLastPageAriaLabelstringAccessible label for the button which moves to the last page.
toNextPageAriaLabelstringAccessible label for the button which moves to the next page.
toPreviousPageAriaLabelstringAccessible label for the button which moves to the previous page.

PerPageOptions

Properties to customize the content and behavior of the pagination dropdown options. These properties should be passed into the pagination component's perPageOptions property.
*required
NameTypeDefaultDescription
titlestringThe text title of the option, which is rendered inside the pagination dropdown menu.
valuenumberThe value of the option, which determines how many items are displayed per page.

PaginationToggleTemplateProps

Allows more customization of the pagination dropdown toggle. The following properties should be passed into the pagination component's toggleTemplate property.
*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

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-pagination--pf-v6-c-pagination--inset
0
.pf-v6-c-pagination--pf-v6-c-pagination--ColumnGap
1.5rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-page-insets--inset
1.5rem
.pf-v6-c-pagination--pf-v6-c-pagination__nav--Display
none
.pf-v6-c-pagination--pf-v6-c-pagination--m-display-summary__nav--Display
none
.pf-v6-c-pagination--pf-v6-c-pagination--m-display-full__nav--Display
inline-flex
.pf-v6-c-pagination--pf-v6-c-pagination__nav--ColumnGap
0.5rem
.pf-v6-c-pagination--pf-v6-c-pagination__nav-page-select--FontSize
0.875rem
.pf-v6-c-pagination--pf-v6-c-pagination__nav-page-select--ColumnGap
0.5rem
.pf-v6-c-pagination--pf-v6-c-pagination__nav-page-select--c-form-control--width-base
calc(1rem + 1rem + 1px * 2)
.pf-v6-c-pagination--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars
2
.pf-v6-c-pagination--pf-v6-c-pagination__nav-page-select--c-form-control--Width
calc(calc(1rem + 1rem + 1px * 2) + (2 * 1ch))
.pf-v6-c-pagination--pf-v6-c-pagination__total-items--Display
block
.pf-v6-c-pagination--pf-v6-c-pagination--m-display-summary__total-items--Display
block
.pf-v6-c-pagination--pf-v6-c-pagination--m-display-full__total-items--Display
none
.pf-v6-c-pagination--pf-v6-c-pagination--m-sticky--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-pagination--pf-v6-c-pagination--m-sticky--BoxShadow
0px 4px 4px -4px rgba(41, 41, 41, 0.2000)
.pf-v6-c-pagination--pf-v6-c-pagination--m-sticky--PaddingBlockStart
1rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-sticky--PaddingBlockEnd
1rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-sticky--PaddingInlineStart
1.5rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-sticky--PaddingInlineEnd
1.5rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-sticky--ZIndex
100
.pf-v6-c-pagination--pf-v6-c-pagination--m-sticky--InsetBlockStart
0
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--BoxShadow
0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow
0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--InsetBlockEnd
0
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart
0.5rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd
0.5rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart
0.5rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd
0.5rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart
0.5rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd
0
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart
0.5rem
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd
0.5rem
.pf-v6-c-pagination--pf-v6-c-pagination__page-menu--Display--base
block
.pf-v6-c-pagination--pf-v6-c-pagination__page-menu--Display
none
.pf-v6-c-pagination--pf-v6-c-pagination--m-display-summary__page-menu--Display
none
.pf-v6-c-pagination--pf-v6-c-pagination--m-display-full__page-menu--Display
block
.pf-v6-c-pagination--pf-v6-c-pagination--m-bottom__page-menu--Display
block
.pf-v6-c-pagination--pf-v6-c-pagination__page-menu--md--Display
block
.pf-v6-c-pagination.pf-m-bottom--pf-v6-c-pagination--m-sticky--BoxShadow
0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
.pf-v6-c-pagination.pf-m-bottom--pf-v6-c-pagination--m-sticky--InsetBlockStart
auto
.pf-v6-c-pagination.pf-m-sticky--pf-v6-c-pagination--m-bottom--InsetBlockEnd
0
.pf-v6-c-pagination.pf-m-page-insets--pf-v6-c-pagination--inset
1.5rem
.pf-v6-c-pagination.pf-m-display-summary--pf-v6-c-pagination__nav--Display
none
.pf-v6-c-pagination.pf-m-display-summary--pf-v6-c-pagination__page-menu--Display
none
.pf-v6-c-pagination.pf-m-display-summary--pf-v6-c-pagination__total-items--Display
block
.pf-v6-c-pagination.pf-m-display-full--pf-v6-c-pagination__nav--Display
inline-flex
.pf-v6-c-pagination.pf-m-display-full--pf-v6-c-pagination__page-menu--Display
block
.pf-v6-c-pagination.pf-m-display-full--pf-v6-c-pagination__total-items--Display
none
.pf-v6-c-pagination.pf-m-inset-none--pf-v6-c-pagination--inset
0
.pf-v6-c-pagination.pf-m-inset-sm--pf-v6-c-pagination--inset
0.5rem
.pf-v6-c-pagination.pf-m-inset-md--pf-v6-c-pagination--inset
1rem
.pf-v6-c-pagination.pf-m-inset-lg--pf-v6-c-pagination--inset
1.5rem
.pf-v6-c-pagination.pf-m-inset-xl--pf-v6-c-pagination--inset
2rem
.pf-v6-c-pagination.pf-m-inset-2xl--pf-v6-c-pagination--inset
3rem