Patternfly Logo

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

Props

Pagination properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullWhat should be rendered inside
classNamestringNo''Additional classes for the container.
defaultToFullPagebooleanNofalseIndicate whether to show last full page of results when user selects perPage value greater than remaining rows
dropDirection'up' | 'down'NoDirection of dropdown context menu.
firstPagenumberNo1Page we start at.
isCompactbooleanNofalseFlag indicating if pagination is compact
isDisabledbooleanNofalseFlag indicating if pagination is disabled
isStaticbooleanNoFlag indicating if pagination is not sticky
itemCountnumberYesTotal number of items.
itemsEndnumberNonullLast index of items on current page.
itemsStartnumberNonullFirst index of items on current page.
offsetnumberNo0Start index of rows to display, used in place of providing page
onFirstClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => voidNo() => undefinedFunction called when user clicks on navigate to first page.
onLastClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => voidNo() => undefinedFunction called when user clicks on navigate to last page.
onNextClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => voidNo() => undefinedFunction called when user clicks on navigate to next page.
onPageInput(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => voidNo() => undefinedFunction called when user inputs page number.
onPerPageSelect( _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number, newPage: number, startIdx?: number, endIdx?: number ) => voidNo() => undefinedFunction called when user selects number of items per page.
onPreviousClick(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => voidNo() => 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 ) => voidNo() => undefinedFunction called when user sets page.
ouiaSafeNo type infoNotrue
pagenumberNo0Current page number.
perPagenumberNodefaultPerPageOptions[0].valueNumber of items per page.
perPageOptionsPerPageOptions[]No[ { 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.
titlesPaginationTitlesNo{ 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' }Object with titles to display in pagination.
toggleTemplate((props: ToggleTemplateProps) => React.ReactElement) | stringNoToggleTemplateThis will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props.
variant'top' | 'bottom' | PaginationVariantNoPaginationVariant.topPosition where pagination is rendered.
widgetIdstringNo'pagination-options-menu'ID to ideintify widget on page.

View source on GitHub