TkxPagination

Showing 1–10 of 250 items

12…25

import { TkxPagination } from 'tekivex-ui';

<TkxPagination
  total={250}
  pageSize={10}
  page={current}
  onChange={setCurrent}
/>

Sibling count

siblingCount={0} — compact

Showing 41–50 of 1000 items

1…5…100

Controls how many pages on each side of the current page are shown:

<TkxPagination total={1000} pageSize={10} siblingCount={1} />  {/* default */}
<TkxPagination total={1000} pageSize={10} siblingCount={2} />  {/* wider */}
<TkxPagination total={1000} pageSize={10} siblingCount={0} />  {/* compact */}

When the gap is too large, an ellipsis (…) renders instead of consecutive page numbers.

With first/last buttons

<TkxPagination total={500} pageSize={10} showEdges />

The first/last buttons are useful for very large data sets. They share the localised “First page” / “Last page” aria-label.

With page size selector

With page-size selector

Showing 1–25 of 1000 items

12…40

Rows per page102550100

<TkxPagination
  total={total}
  page={page}
  onChange={setPage}
  pageSize={pageSize}
  showPageSize
  pageSizeOptions={[10, 25, 50, 100]}
  onPageSizeChange={setPageSize}
/>

Sizes

<TkxPagination size="sm" {...props} />
<TkxPagination size="md" {...props} />  {/* default */}
<TkxPagination size="lg" {...props} />

Localisation

Pagination renders the “Showing X–Y of Z items” line, “Page N” labels for buttons, and “Previous page” / “Next page” aria-labels — all from the active locale, with English fallbacks for the optional fields.

Accessibility

• Renders as <nav aria-label="Pagination">
• Disabled buttons get the native disabled attribute (not just visual)
• Active page button has aria-current="page"
• Each page button gets aria-label="Page N"
• Edge buttons (first/last) hidden when showEdges={false}

Props

Prop	Type	Required	Description
total	number	yes	Total item count.
pageSize	number		Defaults to 10.
page	number		Controlled current page (1-based).
defaultPage	number		Uncontrolled initial page.
onChange	(page: number) => void		Page change callback.
siblingCount	number		Pages on each side of current. Defaults to 1.
showEdges	boolean		First/last buttons. Defaults to true.
showPageSize	boolean		Render page-size dropdown.
pageSizeOptions	number[]		Defaults to [10, 25, 50, 100].
size	'sm' | 'md' | 'lg'		Defaults to md.

Source

src/components/TkxPagination.tsx