Pagination

Pagination component for navigating through pages

import { Pagination } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`current`	Optional	`number \| undefined`	—	Current active page number
`total`	Optional	`number \| undefined`	—	Total number of items
`pageSize`	Optional	`number \| undefined`	`20`	Number of items per page
`pageSizeOptions`	Optional	`number[] \| undefined`	`[10, 20, 50, 100]`	Page size options for the select dropdown
`showSizeChanger`	Optional	`boolean \| undefined`	`true`	Show page size changer
`showTotal`	Optional	`boolean \| undefined`	`false`	Show total count text
`disabled`	Optional	`boolean \| undefined`	`false`	Disable pagination
`size`	Optional	`ComponentSize \| undefined`	`'sm'`	Size variant
`className`	Optional	`string \| undefined`	—	Custom className for the root element
`onChange`	Optional	`((page: number, pageSize: number) => void) \| undefined`	—	Callback when page number or page size changes
`onSizeChange`	Optional	`((current: number, size: number) => void) \| undefined`	—	Callback when page size changes

Usage

Page navigation control with prev/next, page numbers, first/last jumps and an optional page-size selector.

Notes

For server-side pagination, pass current/total from your fetch state and refetch in onChange.
Pair with DataTable by reading the table's pagination state.

Example

/** * Runnable example for Pagination. */import { useState } from 'react'import { Pagination } from '@tetherto/mdk-react-devkit'export const PaginationExample = () => {  const [page, setPage] = useState(1)  const [pageSize, setPageSize] = useState(20)  return (    <Pagination      total={483}      current={page}      pageSize={pageSize}      showTotal      onChange={(p, ps) => {        setPage(p)        setPageSize(ps)      }}    />  )}