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

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

100 rows

of 10

Props

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

* denotes required field

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

of 5

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

250 rows

of 10

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

100 rows

of 10

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}
  />
)
}

Pagination

Quick Start

Example

Props

Related Components

Common Use Cases

Basic Pagination

With Row Count

With Page Size Selector

See Also