Pagination component · Kition Tessera

Playground

Props

total

pageSize

What is shown

import { Pagination } from '@kition/tessera-ui'
import { useState } from 'react'

const [page, setPage] = useState(6)

<Pagination total={564} pageSize={10} page={page} onChange={setPage} />

When to use

A list the server pages; Table pages its own rows.

Examples

Page 6 of 57

pagination.tsx

import { useState } from 'react'
import { Pagination } from '@kition/tessera-ui'

export default function Demo() {
  const [page, setPage] = useState(6)
  const [size, setSize] = useState(20)
  return <Pagination page={page} pageSize={size} total={1137} pageSizeOptions={[20, 50, 100]} onChange={(next, pageSize) => { setPage(next); setSize(pageSize) }} />
}

Props

Pagination

The pages of a long list: the range shown, page buttons, and an optional page size.

Prop	Type	Default	Description
`page`required	`number`	—
`pageSize`required	`number`	—
`total`required	`number`	—
`onChange`required	`(page: number, pageSize: number) => void`	—
`pageSizeOptions`	`readonly number[]`	—	Offers these page sizes; without it the size is fixed.
`className`	`string`	—