docs / content

<tc-pagination>

Prev/next + windowed page numbers with ellipses. Emits a change event — the parent decides when to update.

import "@ra9/tan-compose-kit/pagination"

Props

Name	Type	Default	Description
`current`	`number`	`1`	The active page (1-based).
`total`	`number`	`1`	Total number of pages. When `total <= 1` the component renders nothing.
`siblings`	`number`	`1`	How many page numbers to show on each side of the current page.
`boundaries`	`number`	`1`	How many pages to always keep visible at the very start and end of the range.
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Forwarded to the underlying `tc-button` controls.
`prev-label`	`string`	`"Prev"`	Text on the "previous" button. Useful for i18n.
`next-label`	`string`	`"Next"`	Text on the "next" button.
`label`	`string`	`"Pagination"`	Accessible label on the wrapping `<nav>`.

Events

Event	Detail	When
`tc-page-change`	`{ page: number }`	Fires when the user picks a different page. The component does NOT update `current` itself — the parent must.

Examples

Basic usage

The component is controlled — it tells you when the user clicks a page, and you decide what to do.

<tc-pagination id="pager" current="3" total="12"></tc-pagination> <script type="module"> const pager = document.getElementById("pager"); pager.addEventListener("tc-page-change", (e) => { pager.current = e.detail.page; loadPage(e.detail.page); }); </script>

Windowing

siblings controls how many numbers appear on each side of the current page; boundaries keeps a fixed number of pages pinned to the ends. With current=5, total=10, siblings=1, boundaries=1 you get: 1 … 4 5 6 … 10.

<tc-pagination current="5" total="10" siblings="1" boundaries="1"></tc-pagination>

Wider window:

<tc-pagination current="5" total="20" siblings="2" boundaries="2"></tc-pagination>

Sizes

size is forwarded to the underlying tc-buttons.

Custom labels

Useful for translated UIs:

<tc-pagination current="2" total="8" prev-label="Précédent" next-label="Suivant" label="Pagination" ></tc-pagination>

Small datasets

When total <= 1, the component renders nothing — safe to drop into a page that may or may not need paginating.

<tc-pagination current="1" total="1"></tc-pagination>

With `tc-table`

tc-table has its own built-in pagination, but for client-side filtering with custom page UI, render the table without its pager and use tc-pagination separately:

<tc-table id="t" page-size="999" filterable="false" rows='[…]' columns='[…]'></tc-table> <tc-pagination id="p" current="1" total="12"></tc-pagination>

Theming

The component delegates all styling to tc-button and the global accent + ink tokens. To re-skin, theme tc-button.

Accessibility

The container is a <nav> with an aria-label (default: "Pagination").
The current page button has aria-current="page" and is non-interactive via pointer-events: none.
Prev / next buttons are disabled at the edges; disabled buttons drop their data-page so clicks do nothing.
The ellipsis is aria-hidden — screen readers skip the visual separator and announce only the page numbers.

← All components