Pagination

Pagination shows the pages of a list. Give it the total number of items and the page size; it works out the pages and where to put the ellipsis.

import { Pagination } from '@beyul/sulmu-ui'

Source · Figma

Examples

Uncontrolled

import { Pagination } from '@beyul/sulmu-ui'

export default function Example() {
  return <Pagination count={95} pageSize={10} defaultPage={3} />
}

Controlled

onPageChange receives { page }.

Showing items 1 to 10 of 30

import { Pagination, Stack, Text } from '@beyul/sulmu-ui'
import { useState } from 'react'

export default function Example() {
  const [page, setPage] = useState(1)
  return (
    <Stack gap={3}>
      <Pagination count={30} pageSize={10} page={page} onPageChange={(d) => setPage(d.page)} />
      <Text textStyle="caption" tone="subtle">
        Showing items {(page - 1) * 10 + 1} to {page * 10} of 30
      </Text>
    </Stack>
  )
}

Props

Prop	Type	Default	Description
`page`	`number`	-	The controlled active page
`count`	`number`	-	Total number of data items
`pageSize`	`number`	-	The controlled number of data items per page
`siblingCount`	`number`	-	Number of pages to show beside active page
`defaultPage`	`number`	-	The initial active page when rendered. Use when you don't need to control the active page of the pagination.
`onPageChange`	`((details: PageChangeDetails) => void)`	-	Called when the page number is changed

The remaining props of Ark UI’s Pagination.Root are accepted too.

Accessibility and usage

count is the total number of items, not the number of pages.
It renders a <nav>. The arrows are labelled “Previous page” and “Next page”.
The Data Table does not page; slice the data yourself or fetch one page at a time.