Pagination

Navigate through pages of data with customizable controls.

Import

import { Pagination } from 'asterui'

Examples

Basic Pagination

Simple pagination with page numbers.

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={85}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

With Size Changer

Allow users to change page size.

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  
  return (
      <Pagination
        current={current}
        total={500}
        pageSize={pageSize}
        showSizeChanger
        onChange={(page, size) => {
          setCurrent(page);
          setPageSize(size);
        }}
      />
    )
}

export default App

Show Total

Display total count of items.

Total 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={250} showTotal />
    )
}

export default App

Custom Total

Custom rendering of total count.

Showing 1-10 of 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination
        total={250}
        showTotal={(total, range) => `Showing ${range[0]}-${range[1]} of ${total} items`}
      />
    )
}

export default App

Quick Jumper

Allow users to jump to a specific page.

Go to

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={500} showQuickJumper />
    )
}

export default App

All Features

Pagination with all features enabled.

1-10 of 500

Go to

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={500}
        showSizeChanger
        showQuickJumper
        showTotal={(total, range) => `${range[0]}-${range[1]} of ${total}`}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

Simple Mode

Minimal pagination with only prev/next controls.

1 / 10

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} simple />
    )
}

export default App

Sizes

Different sizes for pagination controls.

Extra Small

Small

Medium (default)

Large

import { Pagination } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <div>
          <div className="text-sm text-base-content/60 mb-2">Extra Small</div>
          <Pagination total={100} size="xs" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Small</div>
          <Pagination total={100} size="sm" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Medium (default)</div>
          <Pagination total={100} size="md" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Large</div>
          <Pagination total={100} size="lg" />
        </div>
      </div>
    )
}

export default App

Disabled

Disabled state for pagination.

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} disabled />
    )
}

export default App

API

`Pagination`

Property	Description	Type	Default
`current`	Current page number (controlled)	`number`	-
`defaultCurrent`	Default initial page number	`number`	`1`
`total`	Total number of items	`number`	-
`pageSize`	Number of items per page (controlled)	`number`	-
`defaultPageSize`	Default number of items per page	`number`	`10`
`pageSizeOptions`	Options for page size selector	`number[]`	`[10, 20, 50, 100]`
`onChange`	Callback when page or pageSize changes	`(page: number, pageSize: number) => void`	-
`onShowSizeChange`	Callback when pageSize changes	`(current: number, size: number) => void`	-
`showSizeChanger`	Show page size selector	`boolean`	`false`
`showQuickJumper`	Show quick jump to page input	`boolean`	`false`
`showTotal`	Show total count or custom render function	`boolean \| ((total: number, range: [number, number]) => ReactNode)`	`false`
`simple`	Simple mode with minimal controls	`boolean`	`false`
`size`	Size of pagination buttons	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`disabled`	Disable all pagination controls	`boolean`	`false`
`data-testid`	Test ID prefix for child elements	`string`	-
`className`	Additional CSS classes	`string`	-

Accessibility

Uses nav element with aria-label="Pagination"
Current page is marked with aria-current="page"
Disabled buttons have proper aria-disabled state
Quick jumper input has accessible label