import { Pagination } from '@cerberus/react'Used to navigate through a series of pages.
To change the layout style of the pagination, you can use the layout prop from the
Group component.
To show a compact pagination style, use the compact prop. This can be useful for mobile.
Use the slice() method to paginate actual data arrays. This method automatically
slices your data based on the current page and page size.
To align the pagination items, use the alignment props on a parent element. This will be differentdepending on the layout.
Use the onPageChange prop to control the active page of the pagination.
Control the number of items per page dynamically using setPageSize(). This example
shows how to integrate a native select element to change the page size.
You can utilize the css prop to customize the pagination by selecting the desired
prmitive data-scope layers.
Root Props:
| Prop | Type | Required | Description |
|---|---|---|---|
asChild | boolean | No | Use the provided child element as the default rendered element, combining their props and behavior. |
count | number | No | Total number of data items |
defaultPage | number | No | The initial active page when rendered. |
| Use when you don't need to control the active page of the pagination. | |||
defaultPageSize | number | No | The initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination. |
getPageUrl | (details: PageUrlDetails) => string | No | Function to generate href attributes for pagination links. Only used when type is set to "link". |
ids | Partial<PrimitiveLayers> | No | The ids of the elements in the accordion. Useful for composition. |
onPageChange | (details: PageChangeDetails) => void | No | Called when the page number is changed |
onPageSizeChange | (details: PageSizeChangeDetails) => void | No | Called when the page size is changed |
page | number | No | The controlled active page |
pageSize | number | No | The controlled number of data items per page |
siblingCount | number | No | Number of pages to show beside active page |
translations | IntlTranslations | No | Specifies the localized strings that identifies the accessibility elements and their states |
type | 'button', 'link' | No | The type of the trigger element |
Ellipsis Props:
| Prop | Type | Required | Description |
|---|---|---|---|
index | number | Yes | |
asChild | boolean | No | Use the provided child element as the default rendered element, combining their props and behavior. |
Item Props:
| Prop | Type | Required | Description |
|---|---|---|---|
type | 'page' | Yes | |
value | number | Yes | |
asChild | boolean | No | Use the provided child element as the default rendered element, combining their props and behavior. |
Item Data Attributes:
| Attribute | Value |
|---|---|
[data-scope] | pagination |
[data-part] | item |
[data-index] | The index of the item |
[data-selected] | Present when selected |
NextTrigger Props:
| Prop | Type | Required | Description |
|---|---|---|---|
asChild | boolean | No | Use the provided child element as the default rendered element, combining their props and behavior. |
NextTrigger Data Attributes:
| Attribute | Value |
|---|---|
[data-scope] | pagination |
[data-part] | next-trigger |
[data-disabled] | Present when disabled |
PrevTrigger Props:
| Prop | Type | Required | Description |
|---|---|---|---|
asChild | boolean | No | Use the provided child element as the default rendered element, combining their props and behavior. |
PrevTrigger Data Attributes:
| Attribute | Value |
|---|---|
[data-scope] | pagination |
[data-part] | prev-trigger |
[data-disabled] | Present when disabled |
RootProvider Props:
| Prop | Type | Required | Description |
|---|---|---|---|
value | UsePaginationReturn | Yes | |
asChild | boolean | No | Use the provided child element as the default rendered element, combining their props and behavior. |
On this page
import { Pagination } from '@cerberus/react'
export function BasicDemo() {
return <Pagination count={5000} pageSize={10} siblingCount={2} />
}
import { VStack } from 'styled-system/jsx'
import { Pagination } from '@cerberus/react'
import { DecorativeBox } from '@/app/components/decorative-box'
export function AlignmentDemo() {
return (
<VStack alignItems="flex-end" w="3/4">
<DecorativeBox h="200px" />
<Pagination count={5} pageSize={2} />
</VStack>
)
}
'use client'
import { Pagination } from '@cerberus/react'
import { useState } from 'react'
export function ControlledDemo() {
const [currentPage, setCurrentPage] = useState<number>(1)
return (
<Pagination
count={5000}
onPageChange={(details) => setCurrentPage(details.page)}
page={currentPage}
pageSize={10}
siblingCount={2}
/>
)
}
'use client'
import {
createSelectCollection,
Field,
For,
Group,
Option,
Pagination,
Select,
type SelectValueChangeDetails,
Text,
usePaginationContext,
} from '@cerberus/react'
import { HStack, VStack } from 'styled-system/jsx'
import { users } from './users'
export function PageDemo() {
return (
<VStack textAlign="center" w="3/4">
<Pagination count={20} defaultPageSize={2}>
<HStack justify="flex-end" pb="md" w="full">
<PageSize />
</HStack>
<UserList />
</Pagination>
</VStack>
)
}
function PageSize() {
const pagination = usePaginationContext()
const collection = createSelectCollection([
{ label: '2', value: '2' },
{ label: '4', value: '4' },
{ label: '6', value: '6' },
{ label: '8', value: '8' },
{ label: '10', value: '10' },
])
return (
<HStack justify="flex-end" w="full">
<Text as="small" color="page.text.100" textStyle="label-sm">
Items per page:
</Text>
<Field label="Select page size" hideLabel w="initial">
<Select
collection={collection}
onValueChange={(details: SelectValueChangeDetails) =>
pagination.setPageSize(Number(details.value))
}
value={[String(pagination.pageSize)]}
w="fit-content"
>
<For each={collection.items}>
{(item) => <Option key={item.value} item={item} />}
</For>
</Select>
</Field>
</HStack>
)
}
function UserList() {
const pagination = usePaginationContext()
return (
<Group orientation="vertical" pb="lg" w="full">
{pagination.slice(users).map((user) => (
<HStack
key={user.id}
bgColor="page.bg.100"
gap="md"
p="md"
rounded="sm"
w="full"
>
<Text color="page.text.initial" textStyle="body-md">
{user.name}
</Text>
<Text as="small" color="page.text.100" textStyle="label-sm">
{user.email}
</Text>
</HStack>
))}
</Group>
)
}
'use client'
import {
ItemList,
PaginationParts,
Text,
type PaginationContextDetails,
} from '@cerberus/react'
import { HStack } from 'styled-system/jsx'
export function CustomDemo() {
return (
<PaginationParts.Root count={1000} pageSize={10} asChild>
<HStack bgColor="page.bg.100" justify="space-between" p="md" w="full">
<PaginationParts.Context>
{(pagination: PaginationContextDetails) => (
<>
<Text as="small" textStyle="label-sm">
{pagination.page} of {pagination.totalPages}
</Text>
<ItemList {...pagination} />
</>
)}
</PaginationParts.Context>
</HStack>
</PaginationParts.Root>
)
}
import { Pagination } from '@cerberus/react'
export function CompactDemo() {
return <Pagination compact count={5000} pageSize={10} siblingCount={2} />
}
import { Pagination } from '@cerberus/react'
export function AttachedDemo() {
return (
<Pagination count={20} pageSize={2} defaultPage={1} layout="attached" />
)
}
'use client'
import {
Group,
Pagination,
Text,
usePaginationContext,
} from '@cerberus/react'
import { HStack, VStack } from 'styled-system/jsx'
import { users } from './users'
export function SliceDemo() {
return (
<VStack textAlign="center" w="3/4">
<Pagination count={users.length} pageSize={5}>
<UserList />
</Pagination>
</VStack>
)
}
function UserList() {
const pagination = usePaginationContext()
return (
<Group orientation="vertical" pb="lg" w="full">
{pagination.slice(users).map((user) => (
<HStack
key={user.id}
bgColor="page.bg.100"
gap="md"
p="md"
rounded="sm"
w="full"
>
<Text color="page.text.initial" textStyle="body-md">
{user.name}
</Text>
<Text as="small" color="page.text.100" textStyle="label-sm">
{user.email}
</Text>
</HStack>
))}
</Group>
)
}