| children | React.ReactNode | null | What should be rendered inside |
| className | string | '' | Additional classes for the container. |
| defaultToFullPage | boolean | false | Indicate 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. |
| firstPage | number | 1 | Page we start at. |
| isCompact | boolean | false | Flag indicating if pagination is compact |
| isDisabled | boolean | false | Flag indicating if pagination is disabled |
| isStatic | boolean | | Flag indicating if pagination should not be sticky on mobile |
| isSticky | boolean | false | Flag indicating if pagination should stick to its position (based on variant) |
| itemCount | number | | Total number of items. |
| itemsEnd | number | null | Last index of items on current page. |
| itemsStart | number | null | First index of items on current page. |
| offset | number | 0 | Start index of rows to display, used in place of providing page |
| onFirstClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | () => undefined | Function called when user clicks on navigate to first page. |
| onLastClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | () => undefined | Function called when user clicks on navigate to last page. |
| onNextClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | () => undefined | Function called when user clicks on navigate to next page. |
| onPageInput | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | () => undefined | Function called when user inputs page number. |
| onPerPageSelect | (
_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
newPerPage: number,
newPage: number,
startIdx?: number,
endIdx?: number
) => void | () => undefined | Function called when user selects number of items per page. |
| onPreviousClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | () => 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 | () => undefined | Function called when user sets page. |
| ouiaSafe | No type info | true | |
| page | number | 0 | Current page number. |
| perPage | number | defaultPerPageOptions[0].value | Number of items per page. |
| perPageComponent | 'div' | 'button' | 'div' | Component to be used for wrapping the toggle contents. Use 'button' when you want
all of the toggle text to be clickable. |
| perPageOptions | PerPageOptions[] | [
{
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. |
| titles | PaginationTitles | {
items: '',
page: '',
pages: '',
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: '',
currPage: 'Current page',
paginationTitle: 'Pagination',
ofWord: 'of'
} | Object with titles to display in pagination. |
| toggleTemplate | ((props: ToggleTemplateProps) => React.ReactElement) | string | | This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle, ofWord props. |
| variant | 'top' | 'bottom' | PaginationVariant | PaginationVariant.top | Position where pagination is rendered. |
| widgetId | string | 'pagination-options-menu' | ID to ideintify widget on page. |
