Pagination

bunx shadcn@latest add @nalarx/pagination

TablePaginationCopy Anchor Link

For a client-paged list. Pages are 1-based; it renders nothing when everything fits on one page.

<TablePagination page={page} pageSize={20} total={rows.length} onPageChange={setPage} />

PaginationBarCopy Anchor Link

For a server-paged table. Pages are 0-based in code and shown 1-based; the window keeps the first page, the last page and the neighbours of the current one, with an ellipsis for longer gaps.

<PaginationBar page={page} pageCount={pageCount} onPageChange={setPage}
  pageSize={pageSize} pageSizeOptions={[10, 20, 50]} onPageSizeChange={setPageSize} total={total} />

Middle of a long list, and a disabled bar while a page loads:

StatesCopy Anchor Link

• First / last page: Previous / Next is disabled (40%).
• Current page: an outlined button with aria-current="page"; the others are ghost.
• Range line: announced politely when it changes.
• Disabled bar: every control is disabled, for while the next page loads.

KeyboardCopy Anchor Link

Tab reaches Previous, each page number, Next and the rows-per-page select in reading order; Enter or Space activates. The select follows Select's keys. Disabled buttons stay out of the tab order.

PropsCopy Anchor Link

TablePagination: page, pageSize, total, onPageChange. Text comes from the paginationLabel, showingRange, pageOf, previous and next strings.

PaginationBar:

pageWindow(current, pageCount) returns the numbers to show, with null for a gap.

ReplacesCopy Anchor Link

Web TablePagination.tsx (and base/TablePagination.tsx, TablePagination.legacy.tsx); Platform base/Pagination.tsx (Pagination becomes PaginationBar).