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.

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. Without a label bag an English app would pair an already-translated DataTable with a Vietnamese pagination bar — a half-translated screen, which is worse than a consistently Vietnamese one.

Three of those keys — range, pageStatus and pageSizeSelect — are functions, not templates with placeholders. The reason is word order. The Vietnamese default reads 1–20 trên tổng 57 mục, the English one 1–20 of 57 items: 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.

Every key of TablePaginationLabels, with the Vietnamese default it replaces:

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. Translate firstPage, previousPage, nextPage and lastPage even though 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.