Pagination Bar

Pagination bar provides navigation through datasets

install	yarn add @clayui/pagination-bar
version	3.120.0

Stable 3.120.0 View in Lexicon CHANGELOG

PaginationBar
PaginationBar.DropDown
PaginationBar.Results
PaginationBarWithBasicItems

PaginationBar

Property	Description
`size` `'sm' \| 'lg'`	The size of pagination element.

Property	Description
`messages`	The default value is 'Items Per Page'

PaginationBar.Results

None.

PaginationBarWithBasicItems

Property	Description
`active` `number`	Sets the currently active page (controlled).
`activeDelta` `number`	The value of delta that is currently selected
`activePage`Deprecated `number`	Initialize the page that is currently active. The first page is `1`. @deprecated since v3.52.0 - use `active` instead.
`alignmentPosition` `React.ComponentProps< typeof ClayPaginationWithBasicItems >['alignmentPosition']`	Sets the default DropDown position of the component. The component receives the Align constant values from the `@clayui/drop-down` package.
`deltas` `Array<IDelta>`	Possible values of items per page. The default value is [ { label: 10, }, { label: 20, }, { label: 30, }, { label: 50, }, ]
`defaultActive` `number`	Sets the default active page (uncontrolled). The default value is 1
`disableEllipsis` `boolean`	Flag to disable ellipsis button The default value is false
`disabledPages` `Array<number>`	The page numbers that should be disabled. For example, `[2,5,6]`.
`ellipsisBuffer` `number`	The number of pages to show on each side of the active page before using an ellipsis dropdown.
`ellipsisProps` `Object`	Properties to pass to the ellipsis trigger.
`hrefConstructor` `(page?: number) => string`	Function used to create the href provided for each page link.
`labels` `{ itemsPerPagePickerAriaLabel?: string; paginationResults: string; perPageItems: string; selectPerPageItems: string; }`	Labels for changing some texts inside the component. Use this property for i18n. The default value is { itemsPerPagePickerAriaLabel: 'Items Per Page', paginationResults: 'Showing {0} to {1} of {2}', perPageItems: '{0} items', selectPerPageItems: '{0} items', }
`onActiveChange` `InternalDispatch<number>`	Callback called when the state of the active page changes (controlled). This is only used if an href is not provided.
`onDeltaChange` `(page: number) => void`	Callback for when the number of elements per page changes. This is only used if an href is not provided.
`onPageChange`Deprecated `(page: number) => void`	Callback for when the active page changes. This is only used if an href is not provided. @deprecated since v3.52.0 - use `onActiveChange` instead.
`showDeltasDropDown` `boolean`	Flags indicating if the DropDown should be rendered. The default value is true
`spritemap` `string`	Path to spritemap from clay-css.
`totalItems` `number`	The total number of items in the pagination list.