Table Pagination

Paired with a table

57 invoices, sliced client-side. Change the page size and the page resets to 1 — that is your job, not the component's: it clamps what it displays into the valid range but never calls onPageChange on your behalf, so a stale page number in your state would keep slicing the wrong window. The same applies when a filter shrinks total.

What the component computes for you

There is deliberately no pageCount prop. Two places deriving the same number drift by one on the last record with depressing regularity, and the user-visible symptom is a Next page button that is still enabled after the table has run out of rows. So the bar derives everything from total, pageSize and page:

const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)))
const current   = Math.min(Math.max(1, page), pageCount)   // display clamp only
const start     = total === 0 ? 0 : (current - 1) * pageSize + 1
const end       = Math.min(current * pageSize, total)
const isFirst   = current <= 1                             // disables ⏮ and ◀
const isLast    = current >= pageCount                     // disables ▶ and ⏭

• pageCount is never 0 — an empty table still reads as page 1 of 1 rather than 1 of 0.
• start collapses to 0 when there is nothing to count, so range() gets (0, 0, 0, unit) and a translation can special-case it.
• The clamp is presentational. If your state says page 9 of a 3-page list, the bar shows page 3 and enables nothing forward — but your slice is still computed from 9. Clamp your own state too.

Page sizes

DEFAULT_PAGE_SIZE_OPTIONS is [20, 50, 100], fixed at three steps so that every table across the Comitor products offers the same choice. Override it per table with pageSizeOptions, or remove the control with hidePageSize when the size is the system's decision. Keep pageSize inside the option list: the select matches by value, so an unlisted size leaves the trigger blank. The options are the only numbers the bar prints outside its label table, so they follow the provider’s locale directly — a 1000 option reads 1,000 in English and 1.000 under locale="vi" — and fall back to plain digits when that locale is malformed: "vi_VN" gets the Vietnamese table from the provider, but Intl rejects it.

Like DEFAULT_TABLE_PAGINATION_LABELS, this constant lives in a module that carries no 'use client' directive. Anything exported from a client module arrives in a Server Component as a client-reference proxy that reads back as undefined — no throw, no warning — and validating a ?size= search param on the server is exactly what you would want this constant for.

Function-valued labels

Eight of this component's ten strings are unreachable by any dedicated prop: the four sr-only button names, the aria-label of the size select, the visible prefix in front of it, and the two counters. Only region and unitLabel have a standalone prop of their own. All ten follow the tablePagination namespace of ComitorLocaleProvider, the same provider that translates the DataTable above it, so the two cannot end up in different languages — a half-translated screen is worse than a consistently untranslated one. labels is for the wording you want different, one key at a time.

Three of those keys — range, pageStatus and pageSizeSelect — are functions, not templates with placeholders. The reason is word order. The English default reads 1–20 of 57 items, the Vietnamese table 1–20 trên tổng 57 mục: the same four values, different order, different glue. A placeholder string would force every call site to concatenate on the application side, which is a reliable way to get the order wrong in the next language. A function hands the translator the raw values and lets it decide everything else — including branching on them, for plural rules or a zero case. The flip side: a function cannot cross from a Server Component into a client one, so declare these in a client component.

The numbers arrive raw; the table formats them. Both built-in tables group the digits for their language — the English one returns 2,001–3,000 of 123,456 items, the Vietnamese one 2.001–3.000 trên tổng 123.456 mục — and the first two rows below, counting 12,345 items, show it live. A range or pageStatus of your own receives the same raw values and has to format them itself — the German table in the code does it with Intl.NumberFormat. The grouping follows the table’s language, not the full locale: under locale="en-IN" the English table still prints 123,456, not 1,23,456 — override the two keys in the provider if that matters. Before 3.1.0 every language printed 123456, so a test that matches the raw digits needs the separators now.

Every key of TablePaginationLabels, with its English default and what the Vietnamese table says:

Props

Accessibility

• The bar is a <nav> named by label (falling back to labels.region), so it appears in the landmark list. Give each bar its own name once a screen has two paginated tables.
• Both counters are role="status" live regions. Moving between pages is announced politely without stealing focus from the button that was just pressed — which matters, because that button may become disabled at the end of the range.
• The four navigation buttons are icon-only, and each carries its name in an sr-only span while the icon itself is aria-hidden. firstPage, previousPage, nextPage and lastPage follow the provider like the visible strings do; they are the four to check, because nothing on screen shows them.
• First and last are hidden sm:inline-flex — on a narrow screen only previous and next remain, so the row never wraps into an unreadable stack. Jumping to the last page is a convenience, not the only path.
• The buttons are genuinely disabled at the ends of the range, never merely dimmed — so keyboard and screen-reader users are told, rather than shown, that there is nothing further.
• The size select is a real listbox with an aria-label from pageSizeSelect(unitLabel), because its visible prefix is hidden below the sm breakpoint and cannot be relied on as its name.
• Both counters use tabular-nums, so the digits do not change width as you page and the buttons beside them stay put.