Pagination

Pagination pages through a long table or list in a row of joined pixel cells, the current page solid. Past seven pages it shows the ends and the pages around the current one, so the row keeps its width as you page. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Pagination } from "@/components/dithercharts/pagination"

const [page, setPage] = useState(1)
const rows = data.slice((page - 1) * 25, page * 25)

<Pagination page={page} pageCount={Math.ceil(data.length / 25)} onPageChange={setPage} />

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add pagination

Props

It renders a native element, so every other attribute that element takes passes through.