Examples
Props
Pagination
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | null | What should be rendered inside |
className | string | No | '' | Additional classes for the container. |
defaultToFullPage | boolean | No | false | Indicate whether to show last full page of results when user selects perPage value greater than remaining rows |
dropDirection | 'up' | 'down' | No | Direction of dropdown context menu. | |
firstPage | number | No | 1 | Page we start at. |
isCompact | boolean | No | false | Flag indicating if pagination is compact |
isDisabled | boolean | No | false | Flag indicating if pagination is disabled |
isStatic | boolean | No | Flag indicating if pagination should not be sticky on mobile | |
isSticky | boolean | No | false | Flag indicating if pagination should stick to its position (based on variant) |
itemCount | number | Yes | Total number of items. | |
itemsEnd | number | No | null | Last index of items on current page. |
itemsStart | number | No | null | First index of items on current page. |
offset | number | No | 0 | Start index of rows to display, used in place of providing page |
onFirstClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | No | () => undefined | Function called when user clicks on navigate to first page. |
onLastClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | No | () => undefined | Function called when user clicks on navigate to last page. |
onNextClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | No | () => undefined | Function called when user clicks on navigate to next page. |
onPageInput | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | No | () => undefined | Function called when user inputs page number. |
onPerPageSelect | ( _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number, newPage: number, startIdx?: number, endIdx?: number ) => void | No | () => undefined | Function called when user selects number of items per page. |
onPreviousClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | No | () => undefined | Function 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 | No | () => undefined | Function called when user sets page. |
ouiaSafe | No type info | No | true | |
page | number | No | 0 | Current page number. |
perPage | number | No | defaultPerPageOptions[0].value | Number of items per page. |
perPageOptions | PerPageOptions[] | 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. |
titles | PaginationTitles | No | { 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) | string | No | ToggleTemplate | This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props. |
variant | 'top' | 'bottom' | PaginationVariant | No | PaginationVariant.top | Position where pagination is rendered. |
widgetId | string | No | 'pagination-options-menu' | ID to ideintify widget on page. |
View source on GitHub