Pagination

Import

import { Pagination } from '@cerberus/react'

Usage

Used to navigate through a series of pages.

Attached

To change the layout style of the pagination, you can use the layout prop from the Group component.

Compact

To show a compact pagination style, use the compact prop. This can be useful for mobile.

Data Slicing

Use the slice() method to paginate actual data arrays. This method automatically slices your data based on the current page and page size.

Alignment

To align the pagination items, use the alignment props on a parent element. This will be differentdepending on the layout.

Controlled

Use the onPageChange prop to control the active page of the pagination.

Page Size

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.

Note

For uncontrolled behavior, use defaultPageSize to set the initial value. For controlled behavior, use pageSize and onPageSizeChange to programmatically manage the page size.

Customization

You can utilize the css prop to customize the pagination by selecting the desired prmitive data-scope layers.

API

Primitives

Root Props:

Ellipsis Props:

Item Props:

Item Data Attributes:

NextTrigger Props:

NextTrigger Data Attributes:

PrevTrigger Props:

PrevTrigger Data Attributes:

RootProvider Props: