Pagination Bar
yarn add @clayui/pagination-bar
Pagination bar provides navigation through datasets
Stable3.41.0View in LexiconCHANGELOG
PaginationBar
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
size | 'sm' | 'lg' | false | The size of pagination element. |
PaginationBar.DropDown
None.PaginationBar.Results
None.PaginationBarWithBasicItems
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
activeDelta | number | false | The value of delta that is currently selected | |
activePage | number | false | 1 | Initialize the page that is currently active. The first page is `1`. |
alignmentPosition | React.ComponentProps< typeof ClayPaginationWithBasicItems >['alignmentPosition'] | false | Sets the default DropDown position of the component. The component receives the Align constant values from the `@clayui/drop-down` package. | |
deltas | Array<IDelta> | false | [ { label: 10, }, { label: 20, }, { label: 30, }, { label: 50, }, ] | Possible values of items per page. |
disabledPages | Array<number> | false | The page numbers that should be disabled. For example, `[2,5,6]`. | |
ellipsisBuffer | number | false | The number of pages to show on each side of the active page before using an ellipsis dropdown. | |
hrefConstructor | (page?: number) => string | false | Function used to create the href provided for each page link. | |
labels | { paginationResults: string; perPageItems: string; selectPerPageItems: string; } | false | { paginationResults: 'Showing {0} to {1} of {2}', perPageItems: '{0} items', selectPerPageItems: '{0} items', } | Labels for changing some texts inside the component. Use this property for i18n. |
onDeltaChange | (page: number) => void | false | Callback for when the number of elements per page changes. This is only used if an href is not provided. | |
onPageChange | (page: number) => void | false | Callback for when the active page changes. This is only used if an href is not provided. | |
showDeltasDropDown | boolean | false | true | Flags indicating if the DropDown should be rendered. |
spritemap | string | false | Path to spritemap from clay-css. | |
totalItems | number | true | The total number of items in the pagination list. |