Pagination
The pagination component is used to navigate pages in lists, tables, and other content views. Related design guidelines: Lists and tables
ExamplesPropsProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | What should be rendered inside |
| className | string | No | '' | Additional classes for the container. |
| itemCount | number | Yes | Total number of items. | |
| variant | 'top' | 'bottom' | 'left' | 'right' | No | PaginationVariant.top | Position where pagination is rendered. |
| isDisabled | boolean | No | false | Flag indicating if pagination is disabled |
| isCompact | boolean | No | false | Flag indicating if pagination is compact |
| 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. |
| defaultToFullPage | boolean | No | false | Indicate whether to show last full page of results when user selects perPage value greater than remaining rows |
| firstPage | number | No | 1 | Page we start at. |
| page | number | No | 0 | Current page number. |
| offset | number | No | 0 | Start index of rows to display, used in place of providing page |
| itemsStart | number | No | null | First index of items on current page. |
| itemsEnd | number | No | null | Last index of items on current page. |
| widgetId | string | No | 'pagination-options-menu' | ID to ideintify widget on page. |
| dropDirection | 'up' | 'down' | No | DropdownDirection.down | Direction of dropdown context menu. |
| 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' } | 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. |
| onSetPage | ( _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number, perPage?: number, startIdx?: number, endIdx?: number ) => void | No | () => undefined | Function called when user sets page. |
| onFirstClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | No | () => undefined | Function called when user clicks on navigate to first page. |
| onPreviousClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | No | () => undefined | Function called when user clicks on navigate to previous page. |
| onNextClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | No | () => undefined | Function called when user clicks on navigate to next page. |
| onLastClick | (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void | No | () => undefined | Function called when user clicks on navigate to last 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. |
| ouiaId | No | null |
