---
title: Pagination
description: Pagination allows users to navigate through multiple pages of content and control the number of items displayed per page.
category: Navigation
related: [Table, Container, NumberField, Select]
commonPatterns: [table-with-pagination, paginated-list]
---

Source: https://clickhouse.design/click-ui/pagination

# Pagination

Pagination provides navigation controls for moving between pages of content. It includes page number input, previous/next buttons, and optional page size selection.

## Quick start

```tsx
import { Pagination } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyPagination() {
const [currentPage, setCurrentPage] = useState(1)

return (
  <Pagination
    currentPage={currentPage}
    totalPages={10}
    onChange={setCurrentPage}
  />
)
}
```

## Example

## Props

| Prop               | Type                           | Default value | Description                                                                                               |
| ------------------ | ------------------------------ | ------------- | --------------------------------------------------------------------------------------------------------- |
| currentPage \*     | `number`                       | `-`           | The currently selected page number. Required.                                                             |
| onChange \*        | `(pageNumber: number) => void` | `-`           | Callback function called when the page number changes. Receives the new page number. Required.            |
| totalPages         | `number`                       | `undefined`   | Total number of pages available. Displays "of X" text when provided.                                      |
| rowCount           | `number \| string`             | `undefined`   | Total row count to display. Shows formatted count like "1,000 rows" when provided.                        |
| pageSize           | `number`                       | `-1`          | Current page size/rows per page. Use -1 for "All rows" when allowAllRows is true.                         |
| maxRowsPerPageList | `Array<number>`                | `[]`          | Array of options for the rows per page dropdown (e.g., \[10, 25, 50, 100]). Shows dropdown when provided. |
| onPageSizeChange   | `(pageSize: number) => void`   | `undefined`   | Callback when page size selection changes. Receives the new page size number.                             |
| allowAllRows       | `boolean`                      | `true`        | Whether to show "All rows" option in the page size dropdown.                                              |
| disableNextButton  | `boolean`                      | `false`       | Whether to disable the next page button. Useful for dynamic loading scenarios.                            |
| onNextPageClick    | `MouseEventHandler`            | `undefined`   | Additional callback when next page button is clicked. onChange is still called.                           |
| onPrevPageClick    | `MouseEventHandler`            | `undefined`   | Additional callback when previous page button is clicked. onChange is still called.                       |
| onPageNumberFocus  | `FocusEventHandler`            | `undefined`   | Callback when page number input receives focus.                                                           |
| onPageNumberBlur   | `FocusEventHandler`            | `undefined`   | Callback when page number input loses focus.                                                              |

```tsx
import { Pagination } from '@clickhouse/click-ui'
import { useState } from 'react'

function PaginationExample() {
const [currentPage, setCurrentPage] = useState(1)
const [pageSize, setPageSize] = useState(10)

return (
  <Pagination
    currentPage={currentPage}
    totalPages={10}
    onChange={setCurrentPage}
    rowCount={100}
    maxRowsPerPageList={[10, 25, 50, 100]}
    pageSize={pageSize}
    onPageSizeChange={setPageSize}
  />
)
}
```

## Related components

- **Table**: Use Pagination below Table for paginated data display
- **Container**: Use Container to layout Pagination with other components
- **NumberField**: Pagination uses NumberField internally for page input
- **Select**: Pagination uses Select internally for page size selection

## Common use cases

### Basic pagination

```tsx
import { Pagination } from '@clickhouse/click-ui'
import { useState } from 'react'

function BasicPagination() {
const [currentPage, setCurrentPage] = useState(1)

return (
  <Pagination
    currentPage={currentPage}
    totalPages={5}
    onChange={setCurrentPage}
  />
)
}
```

### With row count

```tsx
import { Pagination } from '@clickhouse/click-ui'
import { useState } from 'react'

function PaginationWithRowCount() {
const [currentPage, setCurrentPage] = useState(1)

return (
  <Pagination
    currentPage={currentPage}
    totalPages={10}
    onChange={setCurrentPage}
    rowCount={250}
  />
)
}
```

### With page size selector

```tsx
import { Pagination } from '@clickhouse/click-ui'
import { useState } from 'react'

function PaginationWithPageSize() {
const [currentPage, setCurrentPage] = useState(1)
const [pageSize, setPageSize] = useState(10)

return (
  <Pagination
    currentPage={currentPage}
    totalPages={10}
    onChange={setCurrentPage}
    rowCount={100}
    maxRowsPerPageList={[10, 25, 50, 100]}
    pageSize={pageSize}
    onPageSizeChange={setPageSize}
  />
)
}
```

## See also

- Common Patterns - See Table with Pagination example
- Table - For displaying paginated data