Pagination Bar

View in Lexicon

Pagination bar provides navigation through datasets

installyarn add @clayui/pagination-bar
versionNPM Version
useimport PaginationBar, {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';

PaginationBar Composition

PaginationBarWithBasicItems

PaginationBarWithBasicItems Without DropDown

API Reference

PaginationBar

IForwardRef<HTMLDivElement, IProps>
Parameters
Properties

size

"sm" | "lg" | undefined

The size of pagination element.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

ClayPaginationBarWithBasicItems

({ active, activeDelta, activePage, alignmentPosition, defaultActive, deltas, disabledPages, disableEllipsis, ellipsisBuffer, ellipsisProps, hrefConstructor, labels, onActiveChange, onDeltaChange, onPageChange, showDeltasDropDown, spritemap, totalItems, ...otherProps }: IProps) => JSX.Element
Parameters
Properties

active

number | undefined

Sets the currently active page (controlled).

activeDelta

number | undefined

The value of delta that is currently selected

Deprecated

activePage

number | undefined

Initialize the page that is currently active. The first page is 1.

alignmentPosition

number | AlignPoints | undefined

Sets the default DropDown position of the component. The component receives the Align constant values from the @clayui/drop-down package.

deltas

Array<IDelta> | undefined= [{"label":10},{"label":20},{"label":30},{"label":50}]

Possible values of items per page.

defaultActive

number | undefined= 1

Sets the default active page (uncontrolled).

disableEllipsis

boolean | undefined

Flag to disable ellipsis button

disabledPages

Array<number> | undefined

The page numbers that should be disabled. For example, [2,5,6].

ellipsisBuffer

number | undefined

The number of pages to show on each side of the active page before using an ellipsis dropdown.

ellipsisProps

Object | undefined

Properties to pass to the ellipsis trigger.

hrefConstructor

((page?: number) => string) | undefined

Function used to create the href provided for each page link.

labels

{ itemsPerPagePickerAriaLabel?: string; paginationResults: string; perPageItems: string; selectPerPageItems: string; } | undefined= {"itemsPerPagePickerAriaLabel":"Items Per Page","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.

onActiveChange

InternalDispatch<number> | undefined

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) | undefined

Callback for when the number of elements per page changes. This is only used if an href is not provided.

Deprecated

onPageChange

((page: number) => void) | undefined

Callback for when the active page changes. This is only used if an href is not provided.

showDeltasDropDown

boolean | undefined= true

Flags indicating if the DropDown should be rendered.

spritemap

string | undefined

Path to spritemap from clay-css.

totalItems *

number

The total number of items in the pagination list.

size

"sm" | "lg" | undefined

The size of pagination element.

Returns
Element
Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Julien Castelain, Krešimir Čoko

Last edited May 9, 2025 at 6:15:38 AM