50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
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>
|
||
);
|
||
}
|