@ruckc/truss-ui 0.0.0-stage → 1.0.0

package/dist/components/DataTable.svelte

@@ -0,0 +1,657 @@
+<script lang="ts" generics="T extends Record<string, any>">
+	import { tick, untrack, type Snippet } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import Icon from '../icons/Icon.svelte';
+	import Button from './Button.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Popover from './Popover.svelte';
+	import Spinner from './Spinner.svelte';
+
+	import type { Column, ColumnFilters, SortState } from '../types.js';
+
+	let {
+		columns,
+		rows,
+		rowKey,
+		getChildren,
+		cell,
+		selected = $bindable(),
+		selectable = false,
+		checked = $bindable([]),
+		columnMenu = false,
+		toolbar,
+		caption,
+		maxHeight = '420px',
+		// pagination vs. continuous
+		pagination = true,
+		pageSize = 10,
+		// virtual scrolling + infinite loading
+		virtual = false,
+		rowHeight = 32,
+		overscan = 6,
+		hasMore = false,
+		loading = false,
+		loadThreshold = 8,
+		onloadmore,
+		// column filtering / sorting
+		filterable = false,
+		filters = $bindable({}),
+		sort = $bindable(null),
+		remote = false,
+		filterDelay,
+		empty = 'No matching rows'
+	}: {
+		columns: Column<T>[];
+		rows: T[];
+		rowKey: (row: T) => string;
+		/** Provide to render a tree-grid; first column gets indentation + expander. */
+		getChildren?: (row: T) => T[] | undefined;
+		/** Custom cell renderer, e.g. status badges. Fall back to the raw value. */
+		cell?: Snippet<[row: T, column: Column<T>]>;
+		/** Active (highlighted) row id. */
+		selected?: string;
+		/** Show checkbox column; `checked` holds the checked row ids. */
+		selectable?: boolean;
+		checked?: string[];
+		/** Show a column visibility menu. */
+		columnMenu?: boolean;
+		toolbar?: Snippet;
+		caption: string;
+		maxHeight?: string;
+
+		/** Page the rows with a floating pager. Turn off for one continuous (optionally virtual) list. */
+		pagination?: boolean;
+		pageSize?: number;
+
+		/** Render only the rows in view (fixed `rowHeight`). Needs a bounded `maxHeight`. Use with `pagination={false}`. */
+		virtual?: boolean;
+		/** px; every row is exactly this tall when `virtual`. */
+		rowHeight?: number;
+		/** Extra rows rendered above/below the viewport. */
+		overscan?: number;
+		/** Infinite scroll: more rows exist beyond `rows`. */
+		hasMore?: boolean;
+		/** Infinite scroll: a fetch is in flight (shows a spinner row). */
+		loading?: boolean;
+		/** Request more when within this many rows of the bottom. */
+		loadThreshold?: number;
+		/** Called near the end of the list. Append to `rows` (or flip `hasMore` off); it is not called again until `rows.length` changes. */
+		onloadmore?: () => void | Promise<void>;
+
+		/** Show a filter row; columns opt in with `filter`. */
+		/**
+		 * Column filtering UI (columns opt in with `filter`): `'row'` (or `true`) adds a filter row under the header;
+		 * `'menu'` has no row — filters live in each column heading's menu (funnel button, right-click, or Shift+F10);
+		 * `'both'` offers both. `false` turns filtering off.
+		 */
+		filterable?: boolean | 'row' | 'menu' | 'both';
+		/** Active filters by column key: text → string, select → string[], number → { min, max }. */
+		filters?: ColumnFilters;
+		sort?: SortState;
+		/** Your data source filters and sorts: the table only reports `filters`/`sort` (bind them) and shows `rows` as-is. */
+		remote?: boolean;
+		/** ms to debounce typed filters (default 120 client, 300 remote). */
+		filterDelay?: number;
+		empty?: string;
+	} = $props();
+
+	// ---------- columns / widths
+	let widths = $state<Record<string, number>>({});
+	const w = (c: Column<T>) => widths[c.key] ?? c.width ?? 160;
+	let hidden = $state<string[]>([]);
+	let menuOpen = $state(false);
+	const cols = $derived(columns.filter((c) => !hidden.includes(c.key)));
+	const total = $derived(cols.reduce((a, c) => a + w(c), selectable ? 40 : 0));
+	const toggleCol = (key: string) => (hidden = hidden.includes(key) ? hidden.filter((k) => k !== key) : [...hidden, key]);
+	const ncols = $derived(cols.length + (selectable ? 1 : 0));
+	const rowFilters = $derived(filterable === true || filterable === 'row' || filterable === 'both');
+	const menuFilters = $derived(filterable === 'menu' || filterable === 'both');
+
+	// ---------- filtering
+	const isActive = (v: unknown) =>
+		v != null && v !== '' && !(Array.isArray(v) && !v.length) && !(typeof v === 'object' && !Array.isArray(v) && (v as { min?: number; max?: number }).min == null && (v as { max?: number }).max == null);
+	const activeFilters = $derived(Object.entries(filters).filter(([, v]) => isActive(v)));
+	const activeCount = $derived(activeFilters.length);
+	const clientFilter = $derived(!remote && activeCount > 0);
+
+	function matches(row: T): boolean {
+		for (const [key, v] of activeFilters) {
+			const kind = columns.find((c) => c.key === key)?.filter;
+			const raw = row[key];
+			if (kind === 'select') { if (!(v as string[]).includes(String(raw ?? ''))) return false; }
+			else if (kind === 'number') {
+				const n = Number(raw), { min, max } = v as { min?: number; max?: number };
+				if (Number.isNaN(n) || (min != null && n < min) || (max != null && n > max)) return false;
+			} else if (!String(raw ?? '').toLowerCase().includes(String(v).toLowerCase())) return false;
+		}
+		return true;
+	}
+	/** With filters on, keep matching rows plus the ancestors of matching descendants. */
+	const kept = $derived.by(() => {
+		if (!clientFilter) return null;
+		const kids = new Map<string, T[]>();
+		const prune = (list: T[]): T[] => {
+			const out: T[] = [];
+			for (const row of list) {
+				const k = prune(getChildren?.(row) ?? []);
+				if (k.length) kids.set(rowKey(row), k);
+				if (matches(row) || k.length) out.push(row);
+			}
+			return out;
+		};
+		return { roots: prune(rows), kids };
+	});
+
+	const distinct = $derived.by(() => {
+		const out: Record<string, string[]> = {};
+		const sel = columns.filter((c) => c.filter === 'select' && !c.filterOptions);
+		if (!sel.length) return out;
+		const sets = Object.fromEntries(sel.map((c) => [c.key, new Set<string>()]));
+		const walk = (list: T[]) => list.forEach((r) => { for (const c of sel) sets[c.key].add(String(r[c.key] ?? '')); const k = getChildren?.(r); if (k) walk(k); });
+		walk(rows);
+		for (const c of sel) out[c.key] = [...sets[c.key]].sort();
+		return out;
+	});
+	const optionsFor = (c: Column<T>) => c.filterOptions ?? distinct[c.key] ?? [];
+
+	const setFilter = (key: string, v: ColumnFilters[string]) => (filters = { ...filters, [key]: v });
+	const clearFilters = () => { filters = {}; drafts = {}; };
+
+	// typed filters keep a local draft and commit after a short debounce
+	let drafts = $state<Record<string, string>>({});
+	const timers: Record<string, ReturnType<typeof setTimeout>> = {};
+	const delay = $derived(filterDelay ?? (remote ? 300 : 120));
+	function typed(key: string, value: string, commit: () => void) {
+		drafts[key] = value;
+		clearTimeout(timers[key]);
+		timers[key] = setTimeout(commit, delay);
+	}
+	$effect(() => () => Object.values(timers).forEach(clearTimeout));
+	$effect(() => {
+		// keep drafts in step when filters change from outside (e.g. cleared)
+		const f = filters;
+		untrack(() => {
+			const next: Record<string, string> = {};
+			for (const c of columns) {
+				const v = f[c.key];
+				if (c.filter === 'text' || (c.filter === undefined && typeof v === 'string')) next[c.key] = typeof v === 'string' ? v : '';
+				if (c.filter === 'number') {
+					const r = (v ?? {}) as { min?: number; max?: number };
+					next[`${c.key}:min`] = r.min != null ? String(r.min) : '';
+					next[`${c.key}:max`] = r.max != null ? String(r.max) : '';
+				}
+			}
+			drafts = next;
+		});
+	});
+	function commitNumber(key: string) {
+		const mn = (drafts[`${key}:min`] ?? '').trim(), mx = (drafts[`${key}:max`] ?? '').trim();
+		const min = mn === '' || Number.isNaN(Number(mn)) ? undefined : Number(mn);
+		const max = mx === '' || Number.isNaN(Number(mx)) ? undefined : Number(mx);
+		setFilter(key, min == null && max == null ? undefined : { min, max });
+	}
+
+	// select-filter popover lives at the root so it can escape the scroll container
+	let filterMenu = $state<{ key: string; el: HTMLElement } | null>(null);
+	let menuCol = $derived(filterMenu ? columns.find((c) => c.key === filterMenu!.key) : undefined);
+
+	// column-heading menu: sort, filter, hide — opened from a funnel button, right-click, or Shift+F10 / the Menu key
+	let headMenu = $state<{ key: string; el: HTMLElement; opener?: HTMLElement } | null>(null);
+	const headCol = $derived(headMenu ? columns.find((c) => c.key === headMenu!.key) : undefined);
+	let headMenuEl = $state<HTMLDivElement>();
+	const hasHeadMenu = (c: Column<T>) => menuFilters && (!!c.filter || !!c.sortable);
+	function openHeadMenu(c: Column<T>, th: HTMLElement, opener?: HTMLElement) {
+		filterMenu = null;
+		headMenu = { key: c.key, el: th, opener: opener ?? th.querySelector<HTMLElement>('button.hf, button.head') ?? undefined };
+	}
+	function onHeadContext(e: MouseEvent, c: Column<T>) {
+		if (!hasHeadMenu(c)) return; // keep the browser's own menu where we have nothing to offer
+		e.preventDefault();
+		openHeadMenu(c, e.currentTarget as HTMLElement);
+	}
+	function onHeadKey(e: KeyboardEvent, c: Column<T>) {
+		if (!hasHeadMenu(c)) return;
+		if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) { e.preventDefault(); openHeadMenu(c, e.currentTarget as HTMLElement, e.target as HTMLElement); }
+	}
+	const setSort = (c: Column<T>, dir: 1 | -1 | null) => (sort = dir ? { key: c.key, dir } : null);
+	$effect(() => { if (headMenu && headMenuEl) tick().then(() => headMenuEl?.querySelector<HTMLElement>('input, button:not(:disabled)')?.focus()); });
+	function togglePick(key: string, opt: string) {
+		const cur = (filters[key] as string[] | undefined) ?? [];
+		const next = cur.includes(opt) ? cur.filter((x) => x !== opt) : [...cur, opt];
+		setFilter(key, next.length ? next : undefined);
+	}
+	const selLabel = (key: string) => {
+		const v = (filters[key] as string[] | undefined) ?? [];
+		return v.length === 0 ? 'All' : v.length === 1 ? v[0] : `${v.length} selected`;
+	};
+
+	// ---------- sorting + flattening
+	let page = $state(0);
+	const expanded = new SvelteSet<string>();
+
+	function sorted(list: T[]): T[] {
+		if (!sort || remote) return list;
+		const { key, dir } = sort;
+		return [...list].sort((a, b) => (a[key] > b[key] ? dir : a[key] < b[key] ? -dir : 0));
+	}
+	type Flat = { row: T; depth: number; expandable: boolean };
+	const flat = $derived.by(() => {
+		const out: Flat[] = [];
+		const kidsOf = (row: T) => (kept ? kept.kids.get(rowKey(row)) : getChildren?.(row));
+		const walk = (list: T[], depth: number) => {
+			for (const row of sorted(list)) {
+				const kids = kidsOf(row);
+				const expandable = !!kids?.length;
+				out.push({ row, depth, expandable });
+				if (expandable && (expanded.has(rowKey(row)) || !!kept)) walk(kids!, depth + 1);
+			}
+		};
+		walk(kept ? kept.roots : rows, 0);
+		return out;
+	});
+
+	const pages = $derived(Math.max(1, Math.ceil(flat.length / pageSize)));
+	const list = $derived(pagination ? flat.slice(page * pageSize, (page + 1) * pageSize) : flat);
+	$effect(() => { if (page >= pages) page = pages - 1; });
+
+	// ---------- virtual window
+	let wrap = $state<HTMLDivElement>();
+	let viewH = $state(0);
+	let headH = $state(28);
+	let scrollTop = $state(0);
+	const start = $derived(virtual ? Math.max(0, Math.floor(scrollTop / rowHeight) - overscan) : 0);
+	const end = $derived(virtual ? Math.min(list.length, Math.ceil((scrollTop + viewH) / rowHeight) + overscan) : list.length);
+	const shown = $derived(virtual ? list.slice(start, end) : list);
+
+	// ---------- infinite loading
+	let calledAt = -1;
+	function maybeLoad(el: HTMLElement) {
+		if (!onloadmore || !hasMore || loading || pagination) return;
+		if (el.scrollHeight - el.scrollTop - el.clientHeight > loadThreshold * rowHeight) return;
+		if (calledAt === rows.length) return;
+		calledAt = rows.length;
+		onloadmore();
+	}
+	function onScroll(e: Event) {
+		const el = e.currentTarget as HTMLElement;
+		scrollTop = el.scrollTop;
+		maybeLoad(el);
+	}
+	// Fill the viewport when the first batch is shorter than the container
+	$effect(() => {
+		rows.length; hasMore; viewH; flat.length;
+		untrack(() => { if (wrap) tick().then(() => wrap && maybeLoad(wrap)); });
+	});
+	// filter/sort changes restart from the top
+	$effect(() => {
+		filters; sort;
+		untrack(() => { page = 0; calledAt = -1; if (wrap) { wrap.scrollTop = 0; scrollTop = 0; } });
+	});
+
+	// ---------- selection
+	const scopeIds = $derived(list.map((f) => rowKey(f.row)));
+	const allOn = $derived(scopeIds.length > 0 && scopeIds.every((id) => checked.includes(id)));
+	const someOn = $derived(scopeIds.some((id) => checked.includes(id)));
+	function toggleAll(on: boolean) {
+		checked = on ? [...new Set([...checked, ...scopeIds])] : checked.filter((id) => !scopeIds.includes(id));
+	}
+	const toggleRow = (id: string) => (checked = checked.includes(id) ? checked.filter((x) => x !== id) : [...checked, id]);
+
+	function toggleSort(c: Column<T>) {
+		if (!c.sortable) return;
+		sort = sort?.key !== c.key ? { key: c.key, dir: 1 } : sort.dir === 1 ? { key: c.key, dir: -1 } : null;
+	}
+	function toggleExpand(id: string) {
+		if (expanded.has(id)) expanded.delete(id);
+		else expanded.add(id);
+	}
+
+	// ---------- resize
+	function startResize(e: PointerEvent, c: Column<T>) {
+		const el = e.currentTarget as HTMLElement;
+		el.setPointerCapture(e.pointerId);
+		const x0 = e.clientX, w0 = w(c), min = c.minWidth ?? 60;
+		const move = (ev: PointerEvent) => (widths[c.key] = Math.max(min, w0 + ev.clientX - x0));
+		const up = () => { el.removeEventListener('pointermove', move); el.removeEventListener('pointerup', up); };
+		el.addEventListener('pointermove', move);
+		el.addEventListener('pointerup', up);
+	}
+	function resizeKey(e: KeyboardEvent, c: Column<T>) {
+		const d = e.key === 'ArrowRight' ? 12 : e.key === 'ArrowLeft' ? -12 : 0;
+		if (d) { e.preventDefault(); widths[c.key] = Math.max(c.minWidth ?? 60, w(c) + d); }
+	}
+
+	// ---------- keyboard (index based so it works across the virtual window)
+	async function focusIndex(i: number) {
+		if (i < 0 || i >= list.length || !wrap) return;
+		if (virtual && (i < start + 1 || i >= end - 1)) {
+			scrollTop = wrap.scrollTop = Math.max(0, i * rowHeight - viewH / 2 + headH);
+			await tick();
+		}
+		wrap.querySelector<HTMLElement>(`tr[data-index="${i}"]`)?.focus();
+	}
+	function rowKeydown(e: KeyboardEvent, f: Flat, index: number) {
+		if (e.target !== e.currentTarget) return; // ignore keys from inner controls (checkbox, twisty)
+		const id = rowKey(f.row);
+		const page_ = Math.max(1, Math.floor((viewH - headH) / rowHeight) - 1);
+		if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selected = id; }
+		else if (f.expandable && e.key === 'ArrowRight' && !expanded.has(id)) toggleExpand(id);
+		else if (f.expandable && e.key === 'ArrowLeft' && expanded.has(id)) toggleExpand(id);
+		else if (e.key === 'ArrowDown') { e.preventDefault(); focusIndex(index + 1); }
+		else if (e.key === 'ArrowUp') { e.preventDefault(); focusIndex(index - 1); }
+		else if (e.key === 'PageDown') { e.preventDefault(); focusIndex(Math.min(list.length - 1, index + page_)); }
+		else if (e.key === 'PageUp') { e.preventDefault(); focusIndex(Math.max(0, index - page_)); }
+		else if (e.key === 'Home') { e.preventDefault(); focusIndex(0); }
+		else if (e.key === 'End') { e.preventDefault(); focusIndex(list.length - 1); }
+	}
+
+	const showBar = $derived(selectable || columnMenu || !!toolbar || activeCount > 0 || !pagination);
+	const fmt = (n: number) => n.toLocaleString();
+</script>
+
+{#snippet textCtl(c: Column<T>)}
+	<input
+		class="fi" data-on={isActive(filters[c.key])} placeholder="Filter…" aria-label="Filter {c.header}"
+		value={drafts[c.key] ?? ''}
+		oninput={(e) => { const v = e.currentTarget.value; typed(c.key, v, () => setFilter(c.key, v.trim() ? v : undefined)); }}
+	/>
+{/snippet}
+{#snippet numCtl(c: Column<T>)}
+	<span class="range" data-on={isActive(filters[c.key])}>
+		<input class="fi" inputmode="decimal" placeholder="Min" aria-label="{c.header} minimum" value={drafts[`${c.key}:min`] ?? ''}
+			oninput={(e) => typed(`${c.key}:min`, e.currentTarget.value, () => commitNumber(c.key))} />
+		<input class="fi" inputmode="decimal" placeholder="Max" aria-label="{c.header} maximum" value={drafts[`${c.key}:max`] ?? ''}
+			oninput={(e) => typed(`${c.key}:max`, e.currentTarget.value, () => commitNumber(c.key))} />
+	</span>
+{/snippet}
+
+<div class="tr-table" style:--rh="{rowHeight}px">
+{#if showBar}
+	<div class="bar">
+		{#if selectable}<span class="sel" aria-live="polite">{checked.length ? `${fmt(checked.length)} selected` : ''}</span>{/if}
+		<div class="grow">{#if toolbar}{@render toolbar()}{/if}</div>
+		{#if activeCount > 0}
+			<Button variant="minimal" intent="neutral" size="sm" icon="cross" onclick={clearFilters}>Clear {activeCount === 1 ? 'filter' : `${activeCount} filters`}</Button>
+		{/if}
+		{#if !pagination}
+			<span class="rows" aria-live="polite">{fmt(flat.length)}{hasMore ? '+' : ''} rows</span>
+		{/if}
+		{#if columnMenu}
+			<div class="tr-anchor">
+				<Button variant="minimal" intent="neutral" size="sm" icon="cog" aria-haspopup="true" aria-expanded={menuOpen} onclick={() => (menuOpen = !menuOpen)}>Columns</Button>
+				<Popover bind:open={menuOpen} align="end">
+					<ul class="colmenu" aria-label="Visible columns">
+						{#each columns as c}
+							<li><Checkbox checked={!hidden.includes(c.key)} disabled={!hidden.includes(c.key) && cols.length === 1} onchange={() => toggleCol(c.key)}>{c.header}</Checkbox></li>
+						{/each}
+					</ul>
+				</Popover>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<div class="tr-table-wrap" style:max-height={maxHeight} bind:this={wrap} bind:clientHeight={viewH} onscroll={onScroll} data-virtual={virtual}>
+	<table style:width="{total}px" role={getChildren ? 'treegrid' : 'grid'} aria-rowcount={virtual ? list.length + 1 : undefined} aria-busy={loading || undefined}>
+		<caption class="tr-visually-hidden">{caption}</caption>
+		<colgroup>
+			{#if selectable}<col style:width="40px" />{/if}
+			{#each cols as c (c.key)}<col style:width="{w(c)}px" />{/each}
+		</colgroup>
+		<thead bind:clientHeight={headH}>
+			<tr>
+				{#if selectable}
+					<th scope="col" class="chk"><Checkbox checked={allOn} indeterminate={!allOn && someOn} aria-label={pagination ? 'Select all rows on this page' : 'Select all rows'} onchange={(e) => toggleAll((e.currentTarget as HTMLInputElement).checked)} /></th>
+				{/if}
+				{#each cols as c, i (c.key)}
+					<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+					<th
+						scope="col"
+						data-align={c.align}
+						data-sortable={c.sortable}
+						data-menu={hasHeadMenu(c)}
+						oncontextmenu={(e) => onHeadContext(e, c)}
+						onkeydown={(e) => onHeadKey(e, c)}
+						aria-sort={sort?.key === c.key ? (sort.dir === 1 ? 'ascending' : 'descending') : c.sortable ? 'none' : undefined}
+					>
+						<div class="hc">
+							{#if c.sortable}
+								<button type="button" class="head" onclick={() => toggleSort(c)}>
+									{c.header}
+									{#if sort?.key === c.key}<Icon name={sort.dir === 1 ? 'sort-asc' : 'sort-desc'} />{/if}
+								</button>
+							{:else}<span class="head">{c.header}</span>{/if}
+							{#if menuFilters && c.filter}
+								<button
+									type="button" class="hf" data-on={isActive(filters[c.key])} aria-haspopup="dialog" aria-expanded={headMenu?.key === c.key}
+									aria-label="{c.header} column menu" title="Filter and sort"
+									onclick={(e) => (headMenu?.key === c.key ? (headMenu = null) : openHeadMenu(c, e.currentTarget.closest('th')!, e.currentTarget))}
+								><Icon name="filter" /></button>
+							{/if}
+						</div>
+						{#if c.resizable !== false && i < cols.length - 1}
+							<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+							<div
+								class="grip"
+								role="separator"
+								aria-orientation="vertical"
+								aria-label="Resize {c.header} column"
+								tabindex="0"
+								onpointerdown={(e) => startResize(e, c)}
+								onkeydown={(e) => resizeKey(e, c)}
+							></div>
+						{/if}
+					</th>
+				{/each}
+			</tr>
+			{#if rowFilters}
+				<tr class="filters">
+					{#if selectable}<th class="chk"></th>{/if}
+					{#each cols as c (c.key)}
+						<th>
+							{#if c.filter === 'text'}
+								{@render textCtl(c)}
+							{:else if c.filter === 'number'}
+								{@render numCtl(c)}
+							{:else if c.filter === 'select'}
+								<button
+									type="button" class="fi fsel" data-on={isActive(filters[c.key])} aria-haspopup="listbox" aria-expanded={filterMenu?.key === c.key}
+									aria-label="Filter {c.header}: {selLabel(c.key)}"
+									onclick={(e) => (filterMenu = filterMenu?.key === c.key ? null : { key: c.key, el: e.currentTarget })}
+								><span>{selLabel(c.key)}</span><Icon name="chevron-down" /></button>
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			{/if}
+		</thead>
+		<tbody>
+			{#if virtual && start > 0}
+				<tr class="spacer" aria-hidden="true" style:height="{start * rowHeight}px"><td colspan={ncols} style:height="{start * rowHeight}px"></td></tr>
+			{/if}
+			{#each shown as f, k (rowKey(f.row))}
+				{@const id = rowKey(f.row)}
+				{@const index = start + k}
+				<tr
+					tabindex="0"
+					data-index={index}
+					data-active={selected === id}
+					aria-selected={selected === id}
+					aria-rowindex={virtual ? index + 2 : undefined}
+					aria-level={getChildren ? f.depth + 1 : undefined}
+					aria-expanded={f.expandable ? expanded.has(id) || !!kept : undefined}
+					onclick={() => (selected = id)}
+					onkeydown={(e) => rowKeydown(e, f, index)}
+				>
+					{#if selectable}
+						<td class="chk" onclick={(e) => e.stopPropagation()}><Checkbox checked={checked.includes(id)} aria-label="Select row" onchange={() => toggleRow(id)} /></td>
+					{/if}
+					{#each cols as c, ci (c.key)}
+						<td data-align={c.align}>
+							<div class="cell" style:padding-inline-start={ci === 0 && getChildren ? `${f.depth * 20}px` : undefined}>
+								{#if ci === 0 && getChildren}
+									{#if f.expandable}
+										<button
+											type="button"
+											class="twisty"
+											aria-label={expanded.has(id) || kept ? 'Collapse' : 'Expand'}
+											onclick={(e) => { e.stopPropagation(); toggleExpand(id); }}
+										>
+											<Icon name={expanded.has(id) || kept ? 'chevron-down' : 'chevron-right'} />
+										</button>
+									{:else}<span class="twisty"></span>{/if}
+								{/if}
+								{#if cell}{@render cell(f.row, c)}{:else}{f.row[c.key]}{/if}
+							</div>
+						</td>
+					{/each}
+				</tr>
+			{/each}
+			{#if virtual && end < list.length}
+				<tr class="spacer" aria-hidden="true" style:height="{(list.length - end) * rowHeight}px"><td colspan={ncols} style:height="{(list.length - end) * rowHeight}px"></td></tr>
+			{/if}
+			{#if loading}
+				<tr class="more" aria-live="polite"><td colspan={ncols}><span class="ld"><Spinner size={16} label="Loading more rows" /> Loading more…</span></td></tr>
+			{:else if list.length === 0}
+				<tr class="more"><td colspan={ncols}><span class="ld">{empty}</span></td></tr>
+			{/if}
+		</tbody>
+	</table>
+
+	<!-- Floating pagination (Material elevation) pinned to the scroll viewport -->
+	{#if pagination}
+		<nav class="pager" aria-label="Pagination">
+			<span class="count">{flat.length ? page * pageSize + 1 : 0}–{Math.min((page + 1) * pageSize, flat.length)} of {flat.length}</span>
+			<Button variant="minimal" intent="neutral" size="sm" icon="chevron-left" aria-label="Previous page" disabled={page === 0} onclick={() => page--} />
+			<Button variant="minimal" intent="neutral" size="sm" icon="chevron-right" aria-label="Next page" disabled={page >= pages - 1} onclick={() => page++} />
+		</nav>
+	{/if}
+</div>
+
+{#if headMenu && headCol}
+	<Popover open={true} fixed anchor={headMenu.el} onclose={(r) => { const o = headMenu?.opener; headMenu = null; if (r) o?.focus(); }}>
+		<div class="hmenu" role="dialog" aria-label="{headCol.header} column menu" bind:this={headMenuEl}>
+			{#if headCol.sortable}
+				<div class="hsec" role="group" aria-label="Sort">
+					<button type="button" class="hi" data-on={sort?.key === headCol.key && sort.dir === 1} onclick={() => setSort(headCol!, 1)}><Icon name="sort-asc" />Sort ascending</button>
+					<button type="button" class="hi" data-on={sort?.key === headCol.key && sort.dir === -1} onclick={() => setSort(headCol!, -1)}><Icon name="sort-desc" />Sort descending</button>
+					<button type="button" class="hi" disabled={sort?.key !== headCol.key} onclick={() => setSort(headCol!, null)}><Icon name="cross" />Clear sort</button>
+				</div>
+			{/if}
+			{#if headCol.filter}
+				<div class="hsec">
+					<div class="hlabel">Filter</div>
+					{#if headCol.filter === 'text'}{@render textCtl(headCol)}
+					{:else if headCol.filter === 'number'}{@render numCtl(headCol)}
+					{:else}
+						<ul class="fmenu inline" aria-label="{headCol.header} values">
+							{#each optionsFor(headCol) as opt (opt)}
+								<li><Checkbox checked={((filters[headCol.key] as string[] | undefined) ?? []).includes(opt)} onchange={() => togglePick(headCol!.key, opt)}>{opt || '(empty)'}</Checkbox></li>
+							{/each}
+						</ul>
+					{/if}
+					<Button size="sm" variant="minimal" intent="neutral" disabled={!isActive(filters[headCol.key])} onclick={() => setFilter(headCol!.key, undefined)}>Clear filter</Button>
+				</div>
+			{/if}
+			{#if columnMenu && cols.length > 1}
+				<div class="hsec"><button type="button" class="hi" onclick={() => { toggleCol(headCol!.key); headMenu = null; }}><Icon name="minus" />Hide column</button></div>
+			{/if}
+		</div>
+	</Popover>
+{/if}
+
+{#if filterMenu && menuCol}
+	<Popover open={true} fixed anchor={filterMenu.el} onclose={() => (filterMenu = null)}>
+		<ul class="fmenu" aria-label="{menuCol.header} values">
+			{#each optionsFor(menuCol) as opt (opt)}
+				<li><Checkbox checked={((filters[menuCol.key] as string[] | undefined) ?? []).includes(opt)} onchange={() => togglePick(menuCol!.key, opt)}>{opt || '(empty)'}</Checkbox></li>
+			{/each}
+		</ul>
+		<div class="fmfoot"><Button size="sm" variant="minimal" intent="neutral" disabled={!isActive(filters[menuCol.key])} onclick={() => setFilter(menuCol!.key, undefined)}>Clear</Button></div>
+	</Popover>
+{/if}
+</div>
+
+<style>
+	.bar { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 6px; }
+	.grow { flex: 1; }
+	.sel { font-size: var(--tr-text-sm); font-weight: 600; color: var(--tr-primary); min-width: 80px; }
+	.rows { font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); font-variant-numeric: tabular-nums; }
+	.colmenu { list-style: none; margin: 0; padding: 8px 12px; display: grid; gap: 4px; white-space: nowrap; }
+	.chk { width: 40px; padding: 0 0 0 10px !important; }
+	.tr-table-wrap { position: relative; overflow: auto; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); background: var(--tr-surface); }
+	table { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--tr-text-md); }
+	/* Frozen header */
+	thead th {
+		position: sticky; top: 0; z-index: 2; height: 28px; padding: 0 8px; text-align: start;
+		background: var(--tr-surface-container); border-bottom: 1px solid var(--tr-outline-variant);
+		font-size: var(--tr-text-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--tr-on-surface-variant);
+		white-space: nowrap; overflow: hidden;
+	}
+	th[data-align='end'], td[data-align='end'] { text-align: end; }
+	.head { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
+	button.head { cursor: pointer; }
+	button.head:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); border-radius: 2px; }
+	th[data-sortable='true']:hover { background: var(--tr-surface-container-high); }
+	.grip { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
+	.grip::after { content: ''; position: absolute; top: 6px; bottom: 6px; right: 3px; width: 1px; background: var(--tr-outline-variant); }
+	.grip:hover::after, .grip:focus-visible::after { width: 2px; right: 3px; background: var(--tr-primary); }
+	.grip:focus-visible { outline: none; }
+
+	/* Heading cell: label + (optional) funnel that opens the column menu */
+	.hc { display: flex; align-items: center; gap: 2px; height: 28px; min-width: 0; }
+	.hf { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface-variant); cursor: pointer; opacity: 0; transition: opacity var(--tr-dur-fast) var(--tr-ease), background-color var(--tr-dur-fast) var(--tr-ease); }
+	th:hover .hf, .hf:focus-visible, .hf[data-on='true'], .hf[aria-expanded='true'] { opacity: 1; }
+	.hf:hover { background: var(--tr-surface-container-highest); }
+	.hf:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	.hf[data-on='true'] { color: var(--tr-primary); background: color-mix(in srgb, var(--tr-primary-container) 70%, transparent); }
+	.hmenu { display: grid; min-width: 248px; padding: 2px 0; }
+	.hsec { display: grid; gap: 6px; padding: 6px 8px; }
+	.hsec + .hsec { border-top: 1px solid var(--tr-outline-variant); }
+	.hlabel { font-size: var(--tr-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tr-on-surface-variant); }
+	.hi { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--tr-control-h); padding: 0 8px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface); font: inherit; text-align: left; cursor: pointer; }
+	.hi:hover:not(:disabled), .hi:focus-visible { outline: none; background: var(--tr-surface-container-highest); }
+	.hi:disabled { opacity: 0.45; cursor: not-allowed; }
+	.hi[data-on='true'] { color: var(--tr-primary); font-weight: 700; }
+	.fmenu.inline { padding: 0; max-height: 160px; }
+
+	/* Filter row sits under the header, also frozen */
+	thead tr.filters th { top: 28px; z-index: 2; height: 34px; padding: 4px 6px; font-weight: 400; background: var(--tr-surface-container-low); overflow: visible; }
+	.fi { width: 100%; min-width: 0; height: 24px; padding: 0 6px; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-sm); background: var(--tr-surface); color: var(--tr-on-surface); font: var(--tr-text-sm) var(--tr-font-sans); box-sizing: border-box; }
+	.fi::placeholder { color: var(--tr-placeholder); }
+	.fi:hover { border-color: var(--tr-outline); }
+	.fi:focus-visible { outline: none; border-color: var(--tr-primary); box-shadow: inset 0 -2px 0 var(--tr-primary), var(--tr-focus-ring); }
+	.fi[data-on='true'], .range[data-on='true'] .fi { border-color: var(--tr-primary); background: color-mix(in srgb, var(--tr-primary-container) 45%, var(--tr-surface)); }
+	.range { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
+	.fsel { display: flex; align-items: center; justify-content: space-between; gap: 4px; text-align: left; cursor: pointer; }
+	.fsel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+	.fmenu { list-style: none; margin: 0; padding: 8px 12px; display: grid; gap: 4px; max-height: 240px; overflow: auto; white-space: nowrap; }
+	.fmfoot { display: flex; justify-content: flex-end; padding: 4px 8px; border-top: 1px solid var(--tr-outline-variant); }
+
+	/* Every row is exactly --rh tall so the virtual window math is exact */
+	tbody tr { height: var(--rh); }
+	tbody td { height: var(--rh); box-sizing: border-box; padding: 0 8px; border-bottom: 1px solid var(--tr-outline-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+	tbody tr.spacer, tbody tr.spacer td { padding: 0; border: 0; pointer-events: none; }
+	tbody tr.more td { text-align: center; color: var(--tr-on-surface-variant); border-bottom: 0; }
+	tbody tr.more:hover { background: none; }
+	.ld { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tr-text-sm); }
+	.cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
+	td[data-align='end'] .cell { justify-content: flex-end; }
+	.twisty { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface-variant); cursor: pointer; }
+	button.twisty:hover { background: var(--tr-surface-container-highest); }
+
+	/* Material tonal hover; active row = left accent bar + soft tonal highlight */
+	tbody tr { cursor: default; transition: background-color var(--tr-dur-fast) var(--tr-ease); }
+	tbody tr:hover { background: var(--tr-surface-container-low); }
+	tbody tr:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tr-primary); }
+	tbody tr[data-active='true'] { background: color-mix(in srgb, var(--tr-primary-container) 55%, transparent); }
+	tbody tr[data-active='true'] td:first-child { box-shadow: inset 3px 0 0 var(--tr-primary); }
+
+	.pager {
+		position: sticky; bottom: 12px; left: 100%; z-index: 3; width: max-content; margin: 12px 12px 12px auto;
+		display: flex; align-items: center; gap: 2px; padding: 2px 4px 2px 12px;
+		background: var(--tr-surface-container-highest); border: 1px solid var(--tr-outline-variant);
+		border-radius: var(--tr-radius-pill); box-shadow: var(--tr-elevation-3);
+	}
+	.count { font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); margin-right: 4px; font-variant-numeric: tabular-nums; }
+</style>