| children | React.ReactNode | | What should be rendered inside the pagination. |
| className | string | '' | Additional classes for the pagination container. |
| dropDirection | 'up' | 'down' | | Direction of dropdown context menu. |
| firstPage | number | 1 | Page to start at. |
| insetBeta | {
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. |
| isCompact | boolean | false | Flag indicating if pagination is compact. |
| isDisabled | boolean | false | Flag indicating if pagination is disabled. |
| isLastFullPageShown | boolean | false | Indicate whether to show last full page of results when user selects perPage value
greater than remaining rows. |
| isStatic | boolean | false | 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. |
| menuAppendToBeta | HTMLElement | (() => HTMLElement) | 'inline' | | The container to append the pagination options menu to. |
| offset | number | null | 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.KeyboardEvent<HTMLInputElement>, page: number) => void | () => undefined | Function called when user inputs page number. |
| onPerPageSelect | (
event: 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 | (
event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
newPage: number,
perPage?: number,
startIdx?: number,
endIdx?: number
) => void | () => undefined | Function called when user sets page. |
| ouiaId | number | string | | Value to overwrite the randomly generated data-ouia-component-id. |
| ouiaSafe | boolean | true | Set 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. |
| page | number | 1 | Current page number. |
| perPage | number | defaultPerPageOptions[0].value | Number of items per page. |
| 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',
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) | string | | This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
itemCount, itemsTitle, and/or ofWord props. |
| usePageInsetsBeta | boolean | | Flag indicating that pagination should use page insets. |
| variant | 'top' | 'bottom' | PaginationVariant | PaginationVariant.top | Position where pagination is rendered. |
| widgetId | string | 'options-menu' | Id to ideintify widget on page. |
