primitives

TablePagination

Footer strip for tables: "Showing X of Y · rows-per-page · page X of Y · navigation". Used internally by `<DSTable>` — most pages don't need to render this directly.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/table-pagination.json

Or import from the workspace package:

import { TablePagination } from "@8maverik8/design";

Examples

Standalone

Showing 20 of 147

Rows per page

Page 1 of 8

<TablePagination
  showingCount={23}
  totalCount={147}
  currentPage={1}
  totalPages={8}
  pageSize={20}
  onPageChange={setPage}
  onPageSizeChange={setSize}
/>

Guidelines

Pass it through `DSTable`'s pagination props instead of rendering it manually.
Hard-code page-size options.Use `pageSizeOptions` prop. The default `[20, 50, 100]` matches our internal-tools convention.