Components
Pagination

Pagination

The Pagination component allows you to navigate through large sets of data by dividing it into smaller chunks, making it easier for users to browse through your application.

API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.

PaginationProps

count

number

Total number of data items

defaultPage

number

dir

'ltr' | 'rtl'

The document's text/writing direction.

getRootNode

() => ShadowRoot | Node | Document

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

id

string

The unique identifier of the machine.

ids

Partial<{ root: string ellipsis(index: number): string prevPageTrigger: string nextPageTrigger: string pageTrigger(page: number): string }>

The ids of the elements in the accordion. Useful for composition.

onPageChange

(details: PageChangeDetails) => void

Called when the page number is changed, and it takes the resulting page number argument

page

number

The active page

pageSize

number

Number of data items per page

siblingCount

number

Number of pages to show beside active page

translations

IntlTranslations

Specifies the localized strings that identifies the accessibility elements and their states

type

'link' | 'button'

The type of the trigger element

PaginationContext

getEllipsisProps

(props: EllipsisProps) => Dict<any>

getPageTriggerProps

(page: PageTriggerProps) => Dict<any>

isFirstPage

boolean

Whether the current page is the first page.

isLastPage

boolean

Whether the current page is the last page.

nextPageTriggerProps

Dict<any>

page

number

The current page.

pageRange

PageRange

The page range. Represented as an object with `start` and `end` properties.

pages

Pages

The page range. Represented as an array of page numbers (including ellipsis)

prevPageTriggerProps

Dict<any>

rootProps

Dict<any>

setCount

(count: number) => void

Function to set the total number of pages.

setPage

(page: number) => void

Function to set the current page.

setPageSize

(size: number) => void

Function to set the page size.

slice

<V>(data: V[]) => V[]

Function to slice an array of data based on the current page.

totalPages

number

The total number of pages.

nextPage

number

The next page.

previousPage

number

The previous page.

PaginationEllipsisProps

index

number

PaginationPageTriggerProps

type

'page'

value

number