pagenation

src/components/TablePager.tsx

@@ -0,0 +1,49 @@
+import { Pagination } from '@astryxdesign/core/Pagination';
+import type { Paged } from './usePaged';
+import { PAGE_SIZES } from './usePaged';
+import './tablePager.css';
+
+/**
+ * The pager that sits under a table.
+ *
+ * One component so every table in the console counts, labels and behaves the
+ * same way, rather than each page inventing its own row of buttons.
+ *
+ * ── It hides itself ─────────────────────────────────────────────────────────
+ *
+ * Nothing renders while everything fits on one page. That is what makes it safe
+ * to put under EVERY table, including the ones that usually hold four rows: a
+ * pager reading "1–4 of 4" next to a dead prev/next pair is noise, and noise
+ * under every table is worse than no pager at all. It appears exactly when it
+ * has something to offer.
+ *
+ * `variant="count"` — "21–40 of 96" — rather than a strip of page numbers.
+ * With 25 rows a page a busy day is four pages, and the number an operator
+ * actually wants is how much is left, not which of four buttons is lit.
+ */
+export function TablePager({
+  paged,
+  label = 'rows',
+}: {
+  paged: Paged<unknown>;
+  /** What is being counted, for the screen-reader label: "orders", "products". */
+  label?: string;
+}) {
+  if (paged.totalPages <= 1) return null;
+
+  return (
+    <div className="table-pager">
+      <Pagination
+        page={paged.page}
+        onChange={paged.setPage}
+        totalItems={paged.total}
+        pageSize={paged.pageSize}
+        pageSizeOptions={PAGE_SIZES}
+        onPageSizeChange={paged.setPageSize}
+        variant="count"
+        size="sm"
+        label={`Page through ${label}`}
+      />
+    </div>
+  );
+}