Pagination Bar
View in LexiconPagination bar provides navigation through datasets
install | yarn add @clayui/pagination-bar |
---|---|
version | |
use | import PaginationBar, {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar'; |
Table of Contents
PaginationBar Composition
import {Provider} from '@clayui/core'; import PaginationBar from '@clayui/pagination-bar'; import {ClayPaginationWithBasicItems} from '@clayui/pagination'; import Button from '@clayui/button'; import Icon from '@clayui/icon'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <PaginationBar> <PaginationBar.DropDown items={[ { label: '10', onClick: () => {}, }, ]} trigger={ <Button displayType="unstyled"> {'10 items per page'} <Icon symbol="caret-double-l" /> </Button> } /> <PaginationBar.Results> Showing a handful of items... </PaginationBar.Results> <ClayPaginationWithBasicItems defaultActive={1} ellipsisProps={{'aria-label': 'More', title: 'More'}} totalPages={10} /> </PaginationBar> </div> </Provider> ); }
PaginationBarWithBasicItems
import {Provider} from '@clayui/core'; import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar'; import React, {useState} from 'react'; export default function App() { const [delta, setDelta] = useState(4); const deltas = [ { href: '#1', label: 1, }, { label: 2, }, { href: '#3', label: 3, }, { label: 4, }, ]; return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <ClayPaginationBarWithBasicItems defaultActive={1} activeDelta={delta} deltas={deltas} ellipsisBuffer={3} ellipsisProps={{'aria-label': 'More', title: 'More'}} onDeltaChange={setDelta} totalItems={21} /> </div> </Provider> ); }
PaginationBarWithBasicItems Without DropDown
import {Provider} from '@clayui/core'; import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar'; import React, {useState} from 'react'; export default function App() { const [delta, setDelta] = useState(5); return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <ClayPaginationBarWithBasicItems activeDelta={delta} defaultActive={1} ellipsisBuffer={3} ellipsisProps={{'aria-label': 'More', title: 'More'}} onDeltaChange={setDelta} showDeltasDropDown={false} totalItems={21} /> </div> </Provider> ); }
API Reference
PaginationBar
IForwardRef<HTMLDivElement, IProps>
Parameters
Properties
size
"sm" | "lg" | undefined
The size of pagination element.
Returns
ReactElement<any, string | JSXElementConstructor<any>> | nullClayPaginationBarWithBasicItems
({ 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
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.
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
ElementContributors
Last edited May 9, 2025 at 6:15:38 AM