feat(tables): a glyph pager with first/last, and tablet-width columns step aside

The pager is four named arrows round the page box (first, previous,
next, last). A table hides a tabletHidden column below 64rem of its own
width, as narrowHidden does below 42rem, through one shared helper that
also hides the column's <col>. The Channels table drops Prio, About and
Length there: at 1024 the channel name had 60 px.
This commit is contained in:
2026-09-27 07:12:51 +02:00
parent d3e1d8219c
commit 955c23d321
9 changed files with 128 additions and 37 deletions
+22
View File
@@ -42,6 +42,28 @@ export interface Column<T> {
// no width. The table's own width, not the viewport's (an `@container` round it): beside the
// playlist rail a desktop window gave the table 432 px, and the title column was 0 px wide.
narrowHidden?: boolean;
// …and one a table leaves out while it is narrower than 64rem — a 1024 tablet window, or a desktop
// one beside a panel: a secondary column that gives its room back to the name (the owner,
// 2026-09-27: at 1024 the channel name had 60 px while About took as much). Same `@container` rule.
tabletHidden?: boolean;
}
// The classes that hide a column below its width (`narrowHidden` / `tabletHidden`), for its cells and,
// in a fixed layout, for its <col> too: a hidden cell under a <col> that keeps its width would leave an
// empty stripe. The table's OWN width decides, so the caller wraps the table in an `@container`.
// Whole literals, because Tailwind only generates a class it can read in one piece.
const HIDE_BELOW = {
narrow: { cell: " hidden @2xl:table-cell", col: " hidden @2xl:table-column" },
tablet: { cell: " hidden @5xl:table-cell", col: " hidden @5xl:table-column" },
} as const;
export function columnHideClass(
col: { narrowHidden?: boolean; tabletHidden?: boolean },
part: "cell" | "col" = "cell",
): string {
if (col.narrowHidden) return HIDE_BELOW.narrow[part];
if (col.tabletHidden) return HIDE_BELOW.tablet[part];
return "";
}
export type FilterMap = Record<string, string | string[]>;