Pagination
Pagination provides horizontal navigation between chunks(pages) of a dataset.
| install | yarn add @clayui/pagination |
|---|---|
| version | 3.123.1 |
Stable3.123.1View in LexiconCHANGELOG
Pagination
| Property | Description |
|---|---|
size'lg' | 'sm' | The size of pagination element. |
Pagination.Ellipsis
| Property | Description |
|---|---|
aria-labelstring | |
alignmentPositionReact.ComponentProps<
typeof DropDown
>['alignmentPosition'] | |
disabledboolean | The default value is false |
disabledPagesArray<number> | The default value is [] |
hrefConstructor(page?: number) => string | |
itemsArray<number> | The default value is [] |
onPageChange(page?: number) => void | |
titlestring |
Pagination.Item
| Property | Description |
|---|---|
as'div' | typeof ClayLink | The default value is ClayLink |
activeboolean | The default value is false |
disabledboolean | The default value is false |
hrefstring |
PaginationWithBasicItems
| Property | Description |
|---|---|
activenumber | Sets the currently active page (controlled). |
activePagenumber | The page that is currently active. The first page is 1.
@deprecated since v3.49.0 - use active instead. |
alignmentPositionIPaginationEllipsisProps['alignmentPosition'] | Sets the default DropDown position of the component. The component
receives the Align constant values from the @clayui/drop-down package. |
ariaLabels{
link: string;
previous: string;
next: string;
} | Labels for the aria attributes The default value is { link: 'Go to page, {0}', next: 'Go to the next page, {0}', previous: 'Go to the previous page, {0}', } |
ellipsisBuffernumber | The number of pages to show on each side of the active page before
using an ellipsis dropdown. The default value is 2 |
ellipsisProps{} | undefined | Properties to pass to the ellipsis trigger. The default value is { 'aria-label': 'Show pages {0} through {1}', title: 'Show pages {0} through {1}', } |
defaultActivenumber | Sets the default active page (uncontrolled). |
disableEllipsisboolean | Flag to disable ellipsis button The default value is false |
disabledPagesArray<number> | The page numbers that should be disabled. For example, [2,5,6].The default value is [] |
hrefConstructor(page?: number) => string | Function used to create the href provided for each page link. |
onActiveChangeInternalDispatch<number> | Callback called when the state of the active page changes (controlled). This is only used if an href is not provided. |
onPageChangeInternalDispatch<number> | Callback for when the active page changes. This is only used if
an href is not provided.
@deprecated since v3.49.0 - use onActiveChange instead. |
totalPagesnumber | The total number of pages in the pagination list. |
spritemapstring | Path to spritemap from clay-css. |