@svelte-lean/table 0.1.0

package/dist/table/data-table.svelte

@@ -0,0 +1,1145 @@
+<script lang="ts" module>
+	/**
+	 * Inline icons: one `<svg>` per use, drawn by the `icon` snippet below. No component instance,
+	 * no font, no Unicode glyph that depends on the platform font.
+	 */
+	const ICONS = {
+		sort: 'M5 6l3-3 3 3M5 10l3 3 3-3',
+		asc: 'M8 13V3M4 7l4-4 4 4',
+		desc: 'M8 3v10M4 9l4 4 4-4',
+		edit: 'M3 13v-3l7.5-7.5 3 3L6 13z',
+		first: 'M7 4L3 8l4 4M13 4L9 8l4 4',
+		previous: 'M10 4L6 8l4 4',
+		next: 'M6 4l4 4-4 4',
+		last: 'M3 4l4 4-4 4M9 4l4 4-4 4',
+		expand: 'M6 4l4 4-4 4',
+		collapse: 'M4 6l4 4 4-4',
+		left: 'M13 8H3M7 4L3 8l4 4',
+		right: 'M3 8h10M9 4l4 4-4 4',
+		more: 'M3.5 8h.01M8 8h.01M12.5 8h.01'
+	} as const;
+	type IconName = keyof typeof ICONS;
+	/**
+	 * Widths of the leading control columns. Applications override `--slean-table-selection-width`
+	 * and `--slean-table-expand-width` in CSS; the fallbacks keep the table correct without
+	 * `style.css`. Read here, by the `<col>`s and by the pinned-column offsets only.
+	 */
+	const SELECTION_WIDTH = 'var(--slean-table-selection-width, 44px)';
+	const EXPAND_WIDTH = 'var(--slean-table-expand-width, 40px)';
+	/** A click on one of these inside a cell belongs to the control, not to the row. */
+	const NOT_ROW_CLICK =
+		'button,a,input,select,textarea,label,summary,[contenteditable],[role="menuitem"],[data-action],[data-no-row-click]';
+	/**
+	 * Numbered pages around the current one (0-based): the first, the last and the current ±1.
+	 * `null` marks a gap; a gap of one page shows that page instead.
+	 */
+	function pageWindow(current: number, count: number): (number | null)[] {
+		const pages = [...new Set([0, current - 1, current, current + 1, count - 1])]
+			.filter((page) => page >= 0 && page < count)
+			.sort((a, b) => a - b);
+		const result: (number | null)[] = [];
+		let previous = -1;
+		for (const page of pages) {
+			if (page - previous === 2) result.push(page - 1);
+			else if (page - previous > 2) result.push(null);
+			result.push(page);
+			previous = page;
+		}
+		return result;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	import { flushSync, tick, untrack } from 'svelte';
+	import type {
+		TableProps,
+		Column,
+		RowId,
+		RowNode,
+		CellPosition,
+		HeaderContext,
+		Pin
+	} from '../types.js';
+	import { createRowModel, valueOf } from '../core.js';
+	import { createTable } from '../table.svelte.js';
+	import { en } from '../messages.js';
+	import { parseEdit } from '../editing.js';
+	import { horizontalCell, verticalCell } from './navigation.js';
+	let {
+		data,
+		columns,
+		getRowId,
+		state: tableState = $bindable({}),
+		onStateChange,
+		getSubRows,
+		getRowModel = createRowModel,
+		manual = false,
+		rowCount,
+		pageCount,
+		id,
+		label = 'Data table',
+		caption,
+		title,
+		showHeader = true,
+		tableLayout = 'fixed',
+		searchable = false,
+		searchDelay = 0,
+		searchText,
+		filters = false,
+		columnControls = false,
+		selection = false,
+		isRowSelectable = () => true,
+		selectionScope = 'page',
+		hideSelectAll = false,
+		rowLabel,
+		rowDetails,
+		expandColumn = false,
+		rowExpandable = () => true,
+		expandRowByClick = false,
+		indentSize = 18,
+		onExpand,
+		onExpandedRowsChange,
+		loading = false,
+		fetching = false,
+		skeletonRows = 5,
+		error,
+		onRetry,
+		empty,
+		toolbar,
+		footer,
+		summary,
+		density = 'comfortable',
+		striped = false,
+		bordered = false,
+		stickyHeader = true,
+		height,
+		progressive = false,
+		pagination = true,
+		pageSizeOptions = [10, 20, 50, 100],
+		placeholder = '',
+		rowHoverable = true,
+		dir,
+		locale,
+		messages,
+		onEdit,
+		onRowClick,
+		onRowDoubleClick,
+		onRowContextMenu,
+		onScroll,
+		onAction,
+		rowClass,
+		onRowMove,
+		cellRange,
+		onCellRangeChange,
+		class: className = ''
+	}: TableProps<T> = $props();
+	/**
+	 * One engine. Props are handed over as getters so the engine follows every prop change.
+	 * `getSubRows` and `searchText` must stay `undefined` when absent (grouping rejects tree input;
+	 * search falls back to the columns), hence the property getters instead of wrapper functions.
+	 */
+	const table = createTable<T>({
+		data: () => data,
+		columns: () => columns,
+		getRowId: (row) => getRowId(row),
+		get getSubRows() {
+			return getSubRows;
+		},
+		get searchText() {
+			return searchText;
+		},
+		state: () => tableState,
+		onStateChange: (next) => {
+			tableState = next;
+			onStateChange?.(next);
+		},
+		getRowModel: (context) => getRowModel(context),
+		manual: () => manual,
+		rowCount: () => rowCount,
+		pageCount: () => pageCount,
+		locale: () => locale,
+		pagination: () => pagination,
+		selection: () => selection,
+		isRowSelectable: (row) => isRowSelectable(row),
+		selectionScope: () => selectionScope
+	});
+	const s = $derived(table.state);
+	const m = $derived({ ...en, ...messages });
+	const cols = $derived(table.visibleColumns);
+	const model = $derived(table.model);
+	/** The expand toggle has a column of its own when asked for and when anything can expand. */
+	const expander = $derived(expandColumn && (!!rowDetails || !!getSubRows));
+	/** Every column of a full-width row: the leading control columns and the data columns. */
+	const span = $derived(cols.length + (selection ? 1 : 0) + (expander ? 1 : 0));
+	let editing = $state<{ id: RowId; column: string; row: T; value: string } | null>(null);
+	let editError = $state('');
+	let saving = $state(false);
+	let dragging = $state<RowId | null>(null);
+	let root: HTMLDivElement;
+	let viewport: HTMLDivElement;
+	let body: HTMLTableSectionElement;
+	/** Rendered row nodes by their `data-row-id` text, to resolve the row of an event target. */
+	const nodes = $derived(new Map(model.rows.map((n) => [String(n.id), n])));
+	/**
+	 * The row of this table that contains `target`: the `<tr>` whose parent is this `<tbody>`, so
+	 * a table nested in a detail row never resolves to a row of the outer table or the reverse.
+	 */
+	function ownRow(target: EventTarget | null): RowNode<T> | undefined {
+		let element = target as Element | null;
+		while (element && element.parentElement !== body) element = element.parentElement;
+		return element ? nodes.get(element.getAttribute('data-row-id') ?? '') : undefined;
+	}
+	/** This table's own rows and cells, never those of a table nested in a detail row. */
+	function ownRows(selector = ''): NodeListOf<HTMLTableRowElement> {
+		return body.querySelectorAll<HTMLTableRowElement>(`:scope > tr[data-row-id]${selector}`);
+	}
+	const rangeBounds = $derived.by((): [number, number, number, number] | null => {
+		if (!cellRange) return null;
+		const a = model.rows.findIndex((r) => r.id === cellRange.start.row),
+			b = model.rows.findIndex((r) => r.id === cellRange.end.row),
+			c = cols.findIndex((col) => col.id === cellRange.start.column),
+			d = cols.findIndex((col) => col.id === cellRange.end.column);
+		return Math.min(a, b, c, d) < 0
+			? null
+			: [Math.min(a, b), Math.max(a, b), Math.min(c, d), Math.max(c, d)];
+	});
+	const movable = $derived(
+		!!onRowMove &&
+			!s.sorting.length &&
+			!s.filters.length &&
+			!s.search &&
+			!getSubRows &&
+			getRowModel === createRowModel
+	);
+	/**
+	 * Cells are focusable only when the table has cell-level interaction. The body then contributes
+	 * one Tab stop (APG grid pattern): `activeCell` carries `tabindex="0"`, every other cell `-1`.
+	 * `current` remembers the last cell the user reached; it falls back to the first rendered data
+	 * cell when that cell leaves the page (sorting, filtering, pagination, a covering span).
+	 */
+	const focusableCells = $derived(!!onEdit || !!onCellRangeChange);
+	/** Without cell navigation, a clickable row is a Tab stop answering Enter and Space. */
+	const focusableRows = $derived(!!onRowClick && !focusableCells);
+	let current = $state<CellPosition | null>(null);
+	function isRendered(node: RowNode<T>, index: number, col: Column<T>): boolean {
+		if (!col.span || node.data === undefined) return true;
+		const span = col.span({
+			row: node.data,
+			value: valueOf(node.data, col),
+			rowId: node.id,
+			index,
+			column: col
+		});
+		return span?.rows !== 0 && span?.columns !== 0;
+	}
+	const activeCell = $derived.by((): CellPosition | null => {
+		if (!focusableCells) return null;
+		const wanted = current;
+		if (wanted) {
+			const index = model.rows.findIndex((n) => n.id === wanted.row && n.data !== undefined);
+			const node = model.rows[index];
+			const col = cols.find((c) => c.id === wanted.column);
+			if (node && col && isRendered(node, index, col)) return wanted;
+		}
+		const first = model.rows.find((n) => n.data !== undefined);
+		const col = cols[0];
+		return first && col ? { row: first.id, column: col.id } : null;
+	});
+	function cellTabindex(rowId: RowId, column: string): 0 | -1 | undefined {
+		if (!focusableCells) return undefined;
+		return activeCell?.row === rowId && activeCell.column === column ? 0 : -1;
+	}
+	function positionOf(cell: HTMLTableCellElement): CellPosition | null {
+		const row = nodes.get(cell.dataset.row ?? '')?.id;
+		const column = cell.dataset.column;
+		return row !== undefined && column ? { row, column } : null;
+	}
+	function cellElement(position: CellPosition): HTMLTableCellElement | null {
+		return body.querySelector<HTMLTableCellElement>(
+			`:scope > tr > td[data-row="${CSS.escape(String(position.row))}"][data-column="${CSS.escape(position.column)}"]`
+		);
+	}
+	/**
+	 * Text direction: the `dir` prop when given, otherwise the nearest `dir` attribute above the
+	 * root, read at interaction time so no layout and no mirrored state are involved. `dir="auto"`
+	 * is delegated to the browser through `:dir(rtl)`; where that is unsupported, left-to-right.
+	 */
+	function isRtl(): boolean {
+		if (dir) return dir === 'rtl';
+		const value = root?.closest('[dir]')?.getAttribute('dir')?.toLowerCase();
+		if (value !== 'auto') return value === 'rtl';
+		try {
+			return root.matches(':dir(rtl)');
+		} catch {
+			return false;
+		}
+	}
+	function toggleExpanded(id: RowId, row?: T, value?: boolean) {
+		const was = table.isExpanded(id);
+		const open = table.toggleExpanded(id, value);
+		if (open === was) return;
+		if (row) onExpand?.(open, row);
+		onExpandedRowsChange?.(table.state.expanded);
+	}
+	function expandable(node: { children: unknown[] }, row: T) {
+		return node.children.length > 0 || (!!rowDetails && rowExpandable(row));
+	}
+	/** Accessible name of a row in its controls. */
+	function nameOf(node: RowNode<T>, row: T): string {
+		return rowLabel ? rowLabel(row) : String(node.id);
+	}
+	/** Text of a cell without a `cell` snippet; `null` when it is empty (the placeholder shows). */
+	function textOf(col: Column<T>, value: unknown, row: T): string | null {
+		const text = col.format ? col.format(value, row) : value == null ? '' : String(value);
+		return text == null || text === '' ? null : text;
+	}
+	/**
+	 * Progressive mounting (`progressive`). The first render is always complete, so server output
+	 * and hydration agree. Afterwards, a change that brings at least `batch` rows the table has not
+	 * rendered before (a fetch, a page change) renders the first `batch` rows in the same update and
+	 * the rest in slices, one macrotask each, sized so a slice takes about `SLICE_MS`. Sorting and
+	 * filtering rows already on screen renders at once. `shown` is the rendered prefix.
+	 */
+	const SLICE_MS = 30;
+	const batch = $derived(progressive === true ? 100 : progressive || 0);
+	let limit = $state(Number.POSITIVE_INFINITY);
+	let renderedIds: Set<RowId> | null = null;
+	let job = 0;
+	const shown = $derived(limit >= model.rows.length ? model.rows : model.rows.slice(0, limit));
+	$effect.pre(() => {
+		const rows = model.rows;
+		const size = batch;
+		untrack(() => {
+			const previous = renderedIds;
+			renderedIds = new Set(rows.map((n) => n.id));
+			job++;
+			let fresh = 0;
+			if (previous && size) for (const n of rows) if (!previous.has(n.id)) fresh++;
+			if (!previous || !size || fresh < size) {
+				limit = Number.POSITIVE_INFINITY;
+				return;
+			}
+			limit = size;
+			continueMount(job, size);
+		});
+	});
+	$effect(() => () => {
+		job++;
+	});
+	function continueMount(id: number, step: number) {
+		const channel = new MessageChannel();
+		channel.port1.onmessage = () => {
+			if (id !== job) return channel.port1.close();
+			const start = performance.now();
+			limit += step;
+			flushSync();
+			if (id !== job || limit >= model.rows.length) {
+				if (id === job) limit = Number.POSITIVE_INFINITY;
+				return channel.port1.close();
+			}
+			const spent = Math.max(1, performance.now() - start);
+			step = Math.min(1000, Math.max(10, Math.round((step * SLICE_MS) / spent)));
+			channel.port2.postMessage(null);
+		};
+		channel.port2.postMessage(null);
+	}
+	/**
+	 * Page-sticky header. Without `height` the scroll region only exists to scroll sideways, yet as
+	 * a scroll container it would also capture the sticky header. While the table fits its width,
+	 * the region stops being a scroll container (`data-page-sticky`) and the header sticks to the
+	 * page. One ResizeObserver per table; widths are read only when a size changes.
+	 */
+	let fits = $state(false);
+	$effect(() => {
+		if (!stickyHeader || height || typeof ResizeObserver === 'undefined') {
+			fits = false;
+			return;
+		}
+		const table = viewport.firstElementChild as HTMLElement;
+		const observer = new ResizeObserver(() => {
+			fits = table.offsetWidth <= viewport.clientWidth + 1;
+		});
+		observer.observe(viewport);
+		observer.observe(table);
+		return () => observer.disconnect();
+	});
+	export function scrollTo(config: {
+		key?: RowId;
+		index?: number;
+		top?: number;
+		offset?: number;
+		align?: ScrollLogicalPosition;
+	}) {
+		if (!viewport) return;
+		if (config.top !== undefined) {
+			viewport.scrollTo({ top: config.top, behavior: 'smooth' });
+			return;
+		}
+		const row =
+			config.key !== undefined
+				? ownRows(`[data-row-id="${CSS.escape(String(config.key))}"]`)[0]
+				: ownRows()[config.index ?? -1];
+		row?.scrollIntoView({ block: config.align ?? 'nearest', behavior: 'smooth' });
+		if (row && config.offset) viewport.scrollTop += config.offset;
+	}
+	/**
+	 * Sticky offsets of the pinned columns, computed once per column change instead of per cell.
+	 * Logical insets follow the table's own direction. `edge` marks the last start-pinned and the
+	 * first end-pinned column, where the stylesheet draws the pin shadow.
+	 */
+	const pins = $derived.by(() => {
+		const result = new Map<string, { pin: Exclude<Pin, false>; style: string; edge?: true }>();
+		const lead = [selection && SELECTION_WIDTH, expander && EXPAND_WIDTH].filter(Boolean);
+		for (const side of ['left', 'right'] as const) {
+			const ordered = side === 'left' ? cols : [...cols].reverse();
+			let offset = 0;
+			let last: string | undefined;
+			for (const col of ordered) {
+				if (table.pinOf(col) !== side) continue;
+				const inset =
+					side === 'left' && lead.length
+						? `calc(${offset}px + ${lead.join(' + ')})`
+						: `${offset}px`;
+				const property = side === 'left' ? 'inset-inline-start' : 'inset-inline-end';
+				result.set(col.id, { pin: side, style: `position:sticky;${property}:${inset};z-index:2;` });
+				offset += table.columnWidth(col);
+				last = col.id;
+			}
+			const edge = last === undefined ? undefined : result.get(last);
+			if (edge) edge.edge = true;
+		}
+		return result;
+	});
+	/** Pin attributes of a filter or footer cell. */
+	function pinned(col: Column<T>) {
+		const pin = pins.get(col.id);
+		return pin ? { 'data-pin': pin.pin, 'data-pin-edge': pin.edge, style: pin.style } : {};
+	}
+	/**
+	 * `<col>` width. With `tableLayout="auto"` a column without a declared, resized or pinned width
+	 * gets none, so the browser sizes it from its content.
+	 */
+	function colWidth(col: Column<T>): string | undefined {
+		return tableLayout === 'auto' &&
+			col.width === undefined &&
+			s.widths[col.id] === undefined &&
+			!pins.has(col.id)
+			? undefined
+			: `${table.columnWidth(col)}px`;
+	}
+	function headerContext(column: Column<T>, sort: HeaderContext<T>['sort']): HeaderContext<T> {
+		return {
+			column,
+			sort,
+			sorting: s.sorting,
+			toggleSort: (multi = false) => table.toggleSort(column.id, multi),
+			setSorting: (sorting) => table.setState({ sorting, pageIndex: 0 })
+		};
+	}
+	/** The page status: a manual table without `rowCount` does not know its total. */
+	const rowsKnown = $derived(!manual || rowCount !== undefined);
+	const headerRowCount = $derived(showHeader ? table.headers.length + (filters ? 1 : 0) : 0);
+	/** A manual page is part of a known total: `aria-rowcount` and `aria-rowindex` say where. */
+	const ariaRowCount = $derived(
+		manual && rowCount !== undefined ? rowCount + headerRowCount : undefined
+	);
+	const pageSizes = $derived([...new Set([...pageSizeOptions, s.pageSize])]);
+	const skeleton = $derived(
+		loading && !model.rows.length
+			? Array.from({ length: Math.max(0, skeletonRows) }, (_, i) => i)
+			: []
+	);
+	const emptyContext = $derived({
+		search: s.search,
+		filtered: s.filters.some(
+			(f) =>
+				f.operator === 'empty' ||
+				(f.value != null && f.value !== '' && !(Array.isArray(f.value) && !f.value.length))
+		),
+		loading
+	});
+	/**
+	 * `searchDelay`: the search box and the filter inputs write the state after the last keystroke.
+	 * Clearing a field applies at once. Timers exist only between a keystroke and its write.
+	 */
+	const timers = new Map<string, ReturnType<typeof setTimeout>>();
+	function delayed(key: string, value: string, apply: (value: string) => void) {
+		clearTimeout(timers.get(key));
+		timers.delete(key);
+		if (searchDelay <= 0 || !value) {
+			apply(value);
+			return;
+		}
+		timers.set(
+			key,
+			setTimeout(() => {
+				timers.delete(key);
+				apply(value);
+			}, searchDelay)
+		);
+	}
+	$effect(() => () => {
+		for (const timer of timers.values()) clearTimeout(timer);
+		timers.clear();
+	});
+	function resize(event: PointerEvent, col: Column<T>) {
+		const target = event.currentTarget as HTMLElement;
+		target.setPointerCapture(event.pointerId);
+		const start = event.clientX,
+			width = table.columnWidth(col),
+			sign = isRtl() ? -1 : 1;
+		const move = (e: PointerEvent) =>
+			table.resizeColumn(col.id, width + (e.clientX - start) * sign);
+		const end = () => {
+			target.removeEventListener('pointermove', move);
+			target.removeEventListener('pointerup', end);
+			target.removeEventListener('pointercancel', end);
+		};
+		target.addEventListener('pointermove', move);
+		target.addEventListener('pointerup', end);
+		target.addEventListener('pointercancel', end);
+	}
+	function editable(row: T, col: Column<T>): boolean {
+		return !!onEdit && !!(typeof col.editable === 'function' ? col.editable(row) : col.editable);
+	}
+	async function startEdit(row: T, col: Column<T>) {
+		if (saving || !editable(row, col)) return;
+		const id = getRowId(row);
+		current = { row: id, column: col.id };
+		editing = { id, column: col.id, row, value: String(valueOf(row, col) ?? '') };
+		editError = '';
+		await tick();
+		body
+			.querySelector<HTMLInputElement | HTMLSelectElement>(
+				':scope > tr > td > .slean-table-editor > :is(input, select)'
+			)
+			?.focus();
+	}
+	/** Closes the editor and returns focus to the cell that opened it. */
+	async function endEdit() {
+		const position = editing ? { row: editing.id, column: editing.column } : null;
+		editing = null;
+		editError = '';
+		if (!position) return;
+		await tick();
+		cellElement(position)?.focus();
+	}
+	async function save(col: Column<T>) {
+		if (!editing || saving) return;
+		try {
+			const current = editing,
+				value = parseEdit(col, current.value, current.row);
+			const problem = col.validate?.(value, current.row);
+			if (problem) {
+				editError = problem;
+				return;
+			}
+			saving = true;
+			await onEdit?.({
+				row: current.row,
+				rowId: current.id,
+				columnId: col.id,
+				previous: valueOf(current.row, col),
+				value
+			});
+			await endEdit();
+		} catch (e) {
+			editError = e instanceof Error ? e.message : String(e);
+		} finally {
+			saving = false;
+		}
+	}
+	function editorKey(e: KeyboardEvent, col: Column<T>) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			save(col);
+		} else if (e.key === 'Escape' && !saving) {
+			e.preventDefault();
+			endEdit();
+		}
+	}
+	function cellKey(e: KeyboardEvent, row: T, col: Column<T>) {
+		if (e.target !== e.currentTarget) return;
+		if (e.key === 'Enter' || e.key === 'F2') {
+			e.preventDefault();
+			startEdit(row, col);
+			return;
+		}
+		const cell = e.currentTarget as HTMLTableCellElement;
+		const rtl = isRtl();
+		const horizontal =
+			e.key === 'ArrowRight' ? (rtl ? -1 : 1) : e.key === 'ArrowLeft' ? (rtl ? 1 : -1) : 0;
+		const vertical = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : 0;
+		if (!horizontal && !vertical) return;
+		e.preventDefault();
+		const next = horizontal
+			? horizontalCell(cell, horizontal)
+			: verticalCell(cell, vertical as 1 | -1);
+		if (!next) return;
+		const target = positionOf(next);
+		if (target) current = target;
+		next.focus();
+		if (e.shiftKey && onCellRangeChange && target) {
+			onCellRangeChange({
+				start: cellRange?.start ?? { row: getRowId(row), column: col.id },
+				end: target
+			});
+		}
+	}
+	/** Enter and Space on a focused clickable row, delegated to the body: no listener per row. */
+	function rowKey(e: KeyboardEvent) {
+		if (!focusableRows || (e.key !== 'Enter' && e.key !== ' ')) return;
+		const tr = e.target as HTMLElement;
+		if (tr.parentElement !== e.currentTarget) return;
+		const node = nodes.get(tr.getAttribute('data-row-id') ?? '');
+		if (node?.data === undefined) return;
+		e.preventDefault();
+		if (expandRowByClick && expandable(node, node.data)) toggleExpanded(node.id, node.data);
+		onRowClick?.(node.data, e, model.rows.indexOf(node));
+	}
+</script>
+
+{#snippet icon(name: IconName)}<svg
+		class="slean-table-icon"
+		viewBox="0 0 16 16"
+		width="16"
+		height="16"
+		aria-hidden="true"
+		focusable="false"><path d={ICONS[name]} /></svg
+	>{/snippet}
+
+<!-- Empty cells of the leading control columns, for rows that hold no controls. -->
+{#snippet leading()}{#if selection}<td class="slean-table-selection"></td>{/if}{#if expander}<td
+			class="slean-table-expander"
+			style:inset-inline-start={selection ? SELECTION_WIDTH : '0px'}
+		></td>{/if}{/snippet}
+
+<!-- `dir` is spread so an absent prop leaves no attribute: for a literal dir={…} Svelte re-assigns
+     el.dir on every update (a Chromium workaround), which writes dir="" onto the root. -->
+<div
+	bind:this={root}
+	{id}
+	class="slean-table {className}"
+	data-density={density}
+	data-striped={striped}
+	data-bordered={bordered}
+	data-hoverable={rowHoverable}
+	data-fetching={fetching || undefined}
+	{...dir ? { dir } : {}}
+>
+	{#if title}<div class="slean-table-title">{@render title(model)}</div>{/if}
+	<!-- The toolbar exists only when something goes in it: an empty flex row would still paint its
+	     padding as a blank band above the header row (Svelte keeps a text node between the blocks,
+	     so `:empty` cannot hide it). -->
+	{#if searchable || toolbar || selection || columnControls}<div class="slean-table-toolbar">
+			{#if searchable}<input
+					class="slean-table-search slean-table-input"
+					type="search"
+					aria-label={m.search}
+					placeholder={m.search}
+					value={s.search}
+					oninput={(e) => delayed('search', e.currentTarget.value, (v) => table.setSearch(v))}
+				/>{/if}
+			{#if toolbar}{@render toolbar(model)}{/if}
+			{#if selection}<span class="slean-table-selected" aria-live="polite"
+					>{m.selected(s.selection.length)}</span
+				>{/if}
+			{#if columnControls}<details class="slean-table-columns">
+					<summary>{m.columns}</summary>
+					<div class="slean-table-column-panel">
+						{#each table.leafColumns as col (col.id)}<div>
+								<label
+									><input
+										type="checkbox"
+										class="slean-table-check"
+										data-slean="checkbox"
+										checked={!s.hidden.includes(col.id)}
+										disabled={col.hideable === false ||
+											(cols.length === 1 && !s.hidden.includes(col.id))}
+										onchange={() => table.toggleColumn(col.id)}
+									/>{col.header}</label
+								>
+								<button
+									type="button"
+									class="slean-table-button"
+									aria-label={`${m.moveLeft}: ${col.header}`}
+									onclick={() => table.moveColumn(col.id, -1)}>{@render icon('left')}</button
+								><button
+									type="button"
+									class="slean-table-button"
+									aria-label={`${m.moveRight}: ${col.header}`}
+									onclick={() => table.moveColumn(col.id, 1)}>{@render icon('right')}</button
+								>
+								<select
+									class="slean-table-input"
+									aria-label={`${m.pin}: ${col.header}`}
+									value={table.pinOf(col) ?? ''}
+									onchange={(e) =>
+										table.pin(
+											col.id,
+											e.currentTarget.value === 'left'
+												? 'left'
+												: e.currentTarget.value === 'right'
+													? 'right'
+													: false
+										)}
+									><option value="">{m.unpin}</option><option value="left">{m.pinLeft}</option
+									><option value="right">{m.pinRight}</option></select
+								>
+							</div>{/each}
+					</div>
+				</details>{/if}
+		</div>{/if}
+	{#if error}<div class="slean-table-error" role="alert">
+			{error}{#if onRetry}<button type="button" class="slean-table-button" onclick={onRetry}
+					>{m.retry}</button
+				>{/if}
+		</div>{/if}
+	{#if loading || fetching}<div
+			class="slean-table-status slean-table-visually-hidden"
+			role="status"
+		>
+			{m.loading}
+		</div>{/if}
+	<!-- A scroll container with a height limit is a Tab stop so keyboard users can scroll it when
+	     no cell or control inside is focusable (axe: scrollable-region-focusable). -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		bind:this={viewport}
+		class="slean-table-scroll"
+		data-page-sticky={fits || undefined}
+		style:max-height={height}
+		tabindex={height ? 0 : undefined}
+		role="region"
+		aria-label={label}
+		onscroll={onScroll}
+	>
+		<table
+			aria-label={label}
+			aria-busy={loading || fetching}
+			aria-rowcount={ariaRowCount}
+			class:slean-table-sticky={stickyHeader}
+			style:table-layout={tableLayout}
+		>
+			{#if caption}<caption>{caption}</caption>{/if}
+			<colgroup
+				>{#if selection}<col style="width:{SELECTION_WIDTH}" />{/if}{#if expander}<col
+						style="width:{EXPAND_WIDTH}"
+					/>{/if}{#each cols as col (col.id)}<col
+						data-column={col.id}
+						style:width={colWidth(col)}
+					/>{/each}</colgroup
+			>
+			{#if showHeader}<thead>
+					{#each table.headers as row, level}<tr
+							aria-rowindex={ariaRowCount === undefined ? undefined : level + 1}
+						>
+							{#if selection && level === 0}<th
+									scope="col"
+									rowspan={table.headers.length}
+									class="slean-table-selection"
+									>{#if selection === 'multiple' && !hideSelectAll}<input
+											type="checkbox"
+											class="slean-table-check"
+											data-slean="checkbox"
+											aria-label={m.selectAll}
+											checked={table.allSelected}
+											indeterminate={table.someSelected && !table.allSelected}
+											disabled={!table.selectable.length}
+											onchange={() => table.selectAll()}
+										/>{:else}<span class="slean-table-visually-hidden">{m.selectionHeader}</span
+										>{/if}</th
+								>{/if}
+							{#if expander && level === 0}<th
+									scope="col"
+									rowspan={table.headers.length}
+									class="slean-table-expander"
+									style:inset-inline-start={selection ? SELECTION_WIDTH : '0px'}
+									><span class="slean-table-visually-hidden">{m.expandHeader}</span></th
+								>{/if}
+							{#each row as h (h.key)}{@const col = h.column}{@const sort =
+									table.sortOf(col)}{@const pin = h.colSpan === 1 ? pins.get(col.id) : undefined}<th
+									scope={h.colSpan > 1 ? 'colgroup' : 'col'}
+									colspan={h.colSpan}
+									rowspan={h.rowSpan}
+									class={col.headerClass}
+									data-column={col.id}
+									data-align={h.colSpan === 1 && col.align !== 'start' ? col.align : undefined}
+									data-pin={pin?.pin}
+									data-pin-edge={pin?.edge}
+									style={pin?.style ?? ''}
+									aria-sort={sort ? (sort.desc ? 'descending' : 'ascending') : undefined}
+								>
+									{#if col.children?.length}{col.header}{:else}<div class="slean-table-heading">
+											{#if col.sortable !== false}<button
+													type="button"
+													class="slean-table-sort"
+													onclick={(e) => table.toggleSort(col.id, e.shiftKey)}
+													>{#if col.headerCell}{@render col.headerCell(
+															headerContext(col, sort)
+														)}{:else}{col.header}{/if}<span class="slean-table-sort-icon"
+														>{@render icon(
+															sort ? (sort.desc ? 'desc' : 'asc') : 'sort'
+														)}{#if sort && s.sorting.length > 1}<span
+																class="slean-table-visually-hidden">{` ${m.sortOrder} `}</span
+															>{sort.index + 1}{/if}</span
+													></button
+												>{:else if col.headerCell}{@render col.headerCell(
+													headerContext(col, sort)
+												)}{:else}{col.header}{/if}
+											{#if col.resizable !== false}<button
+													type="button"
+													class="slean-table-resize"
+													aria-label={`${m.resize}: ${col.header}`}
+													onpointerdown={(e) => resize(e, col)}
+													onkeydown={(e) => {
+														if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+															e.preventDefault();
+															table.resizeColumn(
+																col.id,
+																table.columnWidth(col) + (e.key === 'ArrowRight' ? 10 : -10)
+															);
+														}
+													}}
+												></button>{/if}
+										</div>{/if}
+								</th>{/each}
+						</tr>{/each}
+					<!-- Filter cells are not headers: <td> in <thead>, so a column without a filter is
+					     not an empty header cell (axe: empty-table-header). -->
+					{#if filters}<tr
+							class="slean-table-filters"
+							aria-rowindex={ariaRowCount === undefined ? undefined : table.headers.length + 1}
+							>{@render leading()}{#each cols as col (col.id)}<td {...pinned(col)}
+									>{#if col.filterable !== false}<input
+											class="slean-table-filter slean-table-input"
+											aria-label={m.filter(col.header)}
+											placeholder={col.header}
+											value={String(s.filters.find((f) => f.id === col.id)?.value ?? '')}
+											oninput={(e) =>
+												delayed(`filter:${col.id}`, e.currentTarget.value, (v) =>
+													table.setFilter(col.id, v)
+												)}
+										/>{/if}</td
+								>{/each}</tr
+						>{/if}
+				</thead>{/if}
+			<!-- Row keys and drags are delegated to the body; the focusable rows are the targets. -->
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+			<tbody
+				bind:this={body}
+				onkeydown={rowKey}
+				ondragstart={(e) => {
+					const id = ownRow(e.target)?.id;
+					if (movable && id !== undefined) dragging = id;
+				}}
+				ondragover={(e) => {
+					if (movable) e.preventDefault();
+				}}
+				ondrop={(e) => {
+					if (!movable) return;
+					e.preventDefault();
+					const id = ownRow(e.target)?.id;
+					if (dragging !== null && id !== undefined) onRowMove?.(dragging, id);
+					dragging = null;
+				}}
+			>
+				{#each skeleton as index (index)}<tr class="slean-table-skeleton-row" aria-hidden="true"
+						>{@render leading()}{#each cols as col (col.id)}<td
+								><span class="slean-table-skeleton"></span></td
+							>{/each}</tr
+					>{/each}
+				{#if !model.rows.length && !skeleton.length}<tr
+						><td colspan={Math.max(1, span)} class="slean-table-empty"
+							>{#if empty}{@render empty(emptyContext)}{:else}{loading
+									? m.loading
+									: m.empty}{/if}</td
+						></tr
+					>{/if}
+				{#each shown as node, index (node.id)}
+					{#if node.kind === 'group'}<tr class="slean-table-group"
+							><th colspan={span} scope="row"
+								><button
+									type="button"
+									class="slean-table-group-toggle"
+									aria-expanded={table.isExpanded(node.id)}
+									onclick={() => toggleExpanded(node.id)}
+									>{@render icon(table.isExpanded(node.id) ? 'collapse' : 'expand')}
+									{node.label} <span>({node.count})</span></button
+								>{#each cols.filter((c) => c.aggregate) as col (col.id)}<span
+										class="slean-table-aggregate"
+										>{col.header}: {String(node.aggregates?.[col.id] ?? '')}</span
+									>{/each}</th
+							></tr
+						>
+					{:else if node.data !== undefined}{@const row = node.data}{@const open = table.isExpanded(
+							node.id
+						)}
+						<tr
+							class={rowClass?.(row, index) ?? ''}
+							data-row-id={String(node.id)}
+							data-selected={table.isSelected(node.id)}
+							data-clickable={onRowClick ? true : undefined}
+							aria-rowindex={ariaRowCount === undefined
+								? undefined
+								: headerRowCount + model.pageIndex * s.pageSize + index + 1}
+							tabindex={focusableRows ? 0 : undefined}
+							draggable={movable}
+							ondblclick={(event) => onRowDoubleClick?.(row, event)}
+							oncontextmenu={(event) => onRowContextMenu?.(row, event)}
+						>
+							<!-- Two static branches: `data-slean` stays a static marker for build-time
+							     discovery (Tier 0, no runtime); a radio is not the checkbox primitive. -->
+							{#if selection === 'single'}<td class="slean-table-selection"
+									><input
+										type="radio"
+										class="slean-table-check"
+										name={id ? `${id}-selection` : undefined}
+										aria-label={`${m.selectRow}: ${nameOf(node, row)}`}
+										checked={table.isSelected(node.id)}
+										disabled={!isRowSelectable(row)}
+										onchange={() => table.toggleSelection(node.id)}
+									/></td
+								>{:else if selection}<td class="slean-table-selection"
+									><input
+										type="checkbox"
+										class="slean-table-check"
+										data-slean="checkbox"
+										aria-label={`${m.selectRow}: ${nameOf(node, row)}`}
+										checked={table.isSelected(node.id)}
+										disabled={!isRowSelectable(row)}
+										onchange={() => table.toggleSelection(node.id)}
+									/></td
+								>{/if}
+							{#if expander}<td
+									class="slean-table-expander"
+									style:inset-inline-start={selection ? SELECTION_WIDTH : '0px'}
+									>{#if expandable(node, row)}<button
+											type="button"
+											class="slean-table-button slean-table-expand"
+											aria-label={`${open ? m.collapse : m.expand}: ${nameOf(node, row)}`}
+											aria-expanded={open}
+											onclick={() => toggleExpanded(node.id, row)}
+											>{@render icon(open ? 'collapse' : 'expand')}</button
+										>{/if}</td
+								>{/if}
+							{#each cols as col, ci (col.id)}{@const value = valueOf(row, col)}{@const context = {
+									row,
+									value,
+									rowId: node.id,
+									index,
+									column: col
+								}}{@const span = col.span?.(context)}{@const pin = pins.get(col.id)}
+								{#if span?.rows !== 0 && span?.columns !== 0}<td
+										data-range={rangeBounds &&
+										index >= rangeBounds[0] &&
+										index <= rangeBounds[1] &&
+										ci >= rangeBounds[2] &&
+										ci <= rangeBounds[3]
+											? true
+											: undefined}
+										data-cell
+										data-row={String(node.id)}
+										data-column={col.id}
+										data-align={col.align !== 'start' ? col.align : undefined}
+										data-pin={pin?.pin}
+										data-pin-edge={pin?.edge}
+										class={typeof col.class === 'function' ? col.class(row) : col.class}
+										class:slean-table-ellipsis={!!col.ellipsis}
+										title={col.ellipsis &&
+										(typeof col.ellipsis === 'boolean' || col.ellipsis.showTitle !== false)
+											? String(value ?? '')
+											: undefined}
+										style={`${pin?.style ?? ''}text-align:${col.align ?? 'start'};`}
+										rowspan={span?.rows}
+										colspan={span?.columns}
+										tabindex={cellTabindex(node.id, col.id)}
+										onkeydown={(e) => cellKey(e, row, col)}
+										ondblclick={() => startEdit(row, col)}
+										onclick={(e) => {
+											if (focusableCells) current = { row: node.id, column: col.id };
+											const target = e.target as HTMLElement;
+											const action = target.closest<HTMLElement>('[data-action]');
+											if (action && e.currentTarget.contains(action)) {
+												onAction?.(action.dataset.action ?? '', row, action, index);
+												return;
+											}
+											const control = target.closest(NOT_ROW_CLICK);
+											if (control && e.currentTarget.contains(control)) return;
+											if (onCellRangeChange) {
+												const position = { row: node.id, column: col.id };
+												onCellRangeChange({
+													start: e.shiftKey && cellRange ? cellRange.start : position,
+													end: position
+												});
+											}
+											if (expandRowByClick && expandable(node, row)) toggleExpanded(node.id, row);
+											onRowClick?.(row, e, index);
+										}}
+									>
+										{#if editing?.id === node.id && editing.column === col.id}<div
+												class="slean-table-editor"
+											>
+												{#if col.editor === 'select'}<select
+														class="slean-table-input"
+														aria-label={col.header}
+														bind:value={editing.value}
+														disabled={saving}
+														onkeydown={(e) => editorKey(e, col)}
+														>{#each col.options ?? [] as option (option.value)}<option
+																value={option.value}>{option.label}</option
+															>{/each}</select
+													>{:else}<input
+														class="slean-table-input"
+														aria-label={col.header}
+														type={col.editor === 'number'
+															? 'number'
+															: col.editor === 'date'
+																? 'date'
+																: 'text'}
+														value={editing.value}
+														disabled={saving}
+														oninput={(e) => {
+															if (editing) editing.value = e.currentTarget.value;
+														}}
+														onkeydown={(e) => editorKey(e, col)}
+													/>{/if}
+												<button
+													type="button"
+													class="slean-table-button"
+													disabled={saving}
+													onclick={() => save(col)}>{m.save}</button
+												><button
+													type="button"
+													class="slean-table-button"
+													disabled={saving}
+													onclick={endEdit}>{m.cancel}</button
+												>{#if editError}<span role="alert">{editError}</span>{/if}
+											</div>{:else}<div
+												class="slean-table-cell"
+												style:padding-inline-start={ci === 0 && node.depth
+													? `${node.depth * indentSize}px`
+													: undefined}
+											>
+												{#if ci === 0 && movable}<span class="slean-table-row-move"
+														><button
+															type="button"
+															class="slean-table-button"
+															aria-label={`${m.moveUp}: ${nameOf(node, row)}`}
+															disabled={index === 0}
+															onclick={() => {
+																const target = model.rows[index - 1];
+																if (target) onRowMove?.(node.id, target.id);
+															}}>{@render icon('asc')}</button
+														><button
+															type="button"
+															class="slean-table-button"
+															aria-label={`${m.moveDown}: ${nameOf(node, row)}`}
+															disabled={index === model.rows.length - 1}
+															onclick={() => {
+																const target = model.rows[index + 1];
+																if (target) onRowMove?.(node.id, target.id);
+															}}>{@render icon('desc')}</button
+														></span
+													>{/if}
+												{#if ci === 0 && !expander && expandable(node, row)}<button
+														type="button"
+														class="slean-table-button slean-table-expand"
+														aria-label={`${open ? m.collapse : m.expand}: ${nameOf(node, row)}`}
+														aria-expanded={open}
+														onclick={() => toggleExpanded(node.id, row)}
+														>{@render icon(open ? 'collapse' : 'expand')}</button
+													>{:else if ci === 0 && !expander && (rowDetails || getSubRows)}<span
+														class="slean-table-expand-spacer"
+													></span>{/if}
+												{#if col.cell}{@render col.cell(context)}{:else}{@const text = textOf(
+														col,
+														value,
+														row
+													)}{#if text !== null}{text}{:else if placeholder}<span
+															class="slean-table-placeholder">{placeholder}</span
+														>{/if}{/if}
+												{#if editable(row, col)}<button
+														type="button"
+														class="slean-table-button slean-table-edit"
+														tabindex="-1"
+														aria-label={`${m.edit}: ${col.header}`}
+														onclick={() => startEdit(row, col)}>{@render icon('edit')}</button
+													>{/if}
+											</div>{/if}
+									</td>{/if}
+							{/each}
+						</tr>
+						{#if rowDetails && open && rowExpandable(row)}<tr class="slean-table-detail"
+								><td colspan={span}
+									>{@render rowDetails(row, {
+										rowId: node.id,
+										index,
+										collapse: () => toggleExpanded(node.id, row, false)
+									})}</td
+								></tr
+							>{/if}
+					{/if}
+				{/each}
+			</tbody>
+			{#if summary}<tfoot
+					><tr
+						>{@render leading()}{#each cols as col (col.id)}<td {...pinned(col)}
+								>{summary[col.id] ?? ''}</td
+							>{/each}</tr
+					></tfoot
+				>{/if}
+		</table>
+	</div>
+	{#if pagination}<div class="slean-table-pagination">
+			<span class="slean-table-page-status" aria-live="polite"
+				>{m.page(model.pageIndex + 1, model.pageCount, rowsKnown ? model.total : undefined)}</span
+			><label class="slean-table-page-size"
+				>{m.pageSize}<select
+					class="slean-table-input"
+					value={s.pageSize}
+					onchange={(e) => table.setPageSize(Number(e.currentTarget.value))}
+					>{#each pageSizes as size (size)}<option value={size}
+							>{size === 0 ? m.allRows : size}</option
+						>{/each}</select
+				></label
+			><span class="slean-table-pager"
+				><button
+					type="button"
+					class="slean-table-button"
+					aria-label={m.first}
+					disabled={model.pageIndex === 0}
+					onclick={() => table.setPage(0)}>{@render icon('first')}</button
+				><button
+					type="button"
+					class="slean-table-button"
+					aria-label={m.previous}
+					disabled={model.pageIndex === 0}
+					onclick={() => table.setPage(model.pageIndex - 1)}>{@render icon('previous')}</button
+				>{#if model.pageCount > 1}<span class="slean-table-pages"
+						>{#each pageWindow(model.pageIndex, model.pageCount) as page, i (page ?? `gap-${i}`)}{#if page === null}<span
+									class="slean-table-page-gap">{@render icon('more')}</span
+								>{:else}<button
+									type="button"
+									class="slean-table-button"
+									aria-label={m.pageNumber(page + 1)}
+									aria-current={page === model.pageIndex ? 'page' : undefined}
+									onclick={() => table.setPage(page)}>{page + 1}</button
+								>{/if}{/each}</span
+					>{/if}<button
+					type="button"
+					class="slean-table-button"
+					aria-label={m.next}
+					disabled={model.pageIndex >= model.pageCount - 1}
+					onclick={() => table.setPage(model.pageIndex + 1)}>{@render icon('next')}</button
+				><button
+					type="button"
+					class="slean-table-button"
+					aria-label={m.last}
+					disabled={model.pageIndex >= model.pageCount - 1}
+					onclick={() => table.setPage(model.pageCount - 1)}>{@render icon('last')}</button
+				></span
+			>
+		</div>{/if}
+	{#if footer}{@render footer(model)}{/if}
+</div>