@svelte-lean/table 0.1.1 → 0.3.0

package/dist/table/data-table.svelte

@@ -50,7 +50,8 @@
 </script>
 
 <script lang="ts" generics="T">
-	import { flushSync, tick, untrack } from 'svelte';
+	import { flushSync, tick, untrack, type Snippet } from 'svelte';
+	import { BROWSER } from 'esm-env';
 	import type {
 		TableProps,
 		Column,
@@ -58,9 +59,10 @@
 		RowNode,
 		CellPosition,
 		HeaderContext,
+		CellContext,
 		Pin
 	} from '../types.js';
-	import { createRowModel, valueOf } from '../core.js';
+	import { createRowModel, valueOf, type HeaderCell } from '../core.js';
 	import { createTable } from '../table.svelte.js';
 	import { en } from '../messages.js';
 	import { parseEdit } from '../editing.js';
@@ -82,6 +84,7 @@
 		title,
 		showHeader = true,
 		tableLayout = 'fixed',
+		layout = 'table',
 		searchable = false,
 		searchDelay = 0,
 		searchText,
@@ -116,6 +119,7 @@
 		progressive = false,
 		pagination = true,
 		pageSizeOptions = [10, 20, 50, 100],
+		pageSizeSelect = 'native',
 		placeholder = '',
 		rowHoverable = true,
 		dir,
@@ -133,6 +137,15 @@
 		onCellRangeChange,
 		class: className = ''
 	}: TableProps<T> = $props();
+	/** Ids of this instance's own relationships (the page-size label and listbox); SSR-stable. */
+	const uid = $props.id();
+	/**
+	 * The Select primitive's root marker, spread rather than written: @svelte-lean/vite registers
+	 * the behavior of every marker it reads in markup, and a marker here would put the select
+	 * behavior in every application that renders a table. The application that sets
+	 * `pageSizeSelect="custom"` imports `@svelte-lean/primitives/select/register` itself.
+	 */
+	const SELECT_ROOT = { 'data-slean': 'select' } as const;
 	/**
 	 * 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;
@@ -177,21 +190,32 @@
 	let dragging = $state<RowId | null>(null);
 	let root: HTMLDivElement;
 	let viewport: HTMLDivElement;
-	let body: HTMLTableSectionElement;
+	let tableElement: HTMLTableElement;
 	/** 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.
+	 * This table's own body rows: a `<tr>` in one of its `<tbody>` elements. A table nested in a
+	 * detail row has its own, so a target never resolves to a row of the other table.
 	 */
+	function isOwnRow(element: Element | null): element is HTMLTableRowElement {
+		const section = element?.parentElement;
+		return (
+			element?.tagName === 'TR' &&
+			section?.tagName === 'TBODY' &&
+			section.parentElement === tableElement
+		);
+	}
+	/** The row node of the body row that contains `target`. */
 	function ownRow(target: EventTarget | null): RowNode<T> | undefined {
 		let element = target as Element | null;
-		while (element && element.parentElement !== body) element = element.parentElement;
+		while (element && !isOwnRow(element)) 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. */
+	/** This table's own rows, in document order across its body sections. */
 	function ownRows(selector = ''): NodeListOf<HTMLTableRowElement> {
-		return body.querySelectorAll<HTMLTableRowElement>(`:scope > tr[data-row-id]${selector}`);
+		return tableElement.querySelectorAll<HTMLTableRowElement>(
+			`:scope > tbody > tr[data-row-id]${selector}`
+		);
 	}
 	const rangeBounds = $derived.by((): [number, number, number, number] | null => {
 		if (!cellRange) return null;
@@ -250,13 +274,13 @@
 		return activeCell?.row === rowId && activeCell.column === column ? 0 : -1;
 	}
 	function positionOf(cell: HTMLTableCellElement): CellPosition | null {
-		const row = nodes.get(cell.dataset.row ?? '')?.id;
+		const row = nodes.get(cell.parentElement?.getAttribute('data-row-id') ?? '')?.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)}"]`
+		return tableElement.querySelector<HTMLTableCellElement>(
+			`:scope > tbody > tr[data-row-id="${CSS.escape(String(position.row))}"] > td[data-column="${CSS.escape(position.column)}"]`
 		);
 	}
 	/**
@@ -294,70 +318,473 @@
 		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.
+	 * Progressive mounting (`progressive`). A change that brings at least a first batch of rows the
+	 * table has not rendered before (the first render in the browser, a fetch, a page change)
+	 * renders that batch in the same update and the rest in slices, one macrotask each, sized from
+	 * the measured cost of a row so a slice takes about `SLICE_MS` of work. Sorting and filtering
+	 * rows already on screen renders at once. `shown` is the rendered prefix. A server render is
+	 * complete, and so is the first client render of a table the server rendered (it hydrates, and
+	 * must match): the server marks its root `data-ssr`, which hydration removes.
 	 */
 	const SLICE_MS = 30;
-	const batch = $derived(progressive === true ? 100 : progressive || 0);
-	let limit = $state(Number.POSITIVE_INFINITY);
-	let renderedIds: Set<RowId> | null = null;
+	/** The height of a body row, read off the first section once drawn; skipped sections assume it. */
+	let rowEstimate = $state(0);
+	const batch = $derived(
+		progressive === true
+			? Math.min(60, Math.ceil((BROWSER ? window.innerHeight : 800) / (rowEstimate || 40)) + 4)
+			: progressive || 0
+	);
+	const SERVER = !BROWSER;
+	const hydrating = BROWSER && !!document.querySelector('.slean-table[data-ssr]');
+	let limit = $state(
+		untrack(() =>
+			!SERVER && !hydrating && batch && model.rows.length > batch ? batch : Number.POSITIVE_INFINITY
+		)
+	);
+	/** Where each rendered row stood: its index, and so, in grid layout, its body section. */
+	let renderedAt: Map<RowId, number> | null = null;
 	let job = 0;
+	let rowsPerSlice = 10;
 	const shown = $derived(limit >= model.rows.length ? model.rows : model.rows.slice(0, limit));
+	/**
+	 * Grid layout groups the body rows in sections of `CHUNK` (`<tbody>` each); the section, not the
+	 * row, is what the browser skips off screen, so a scroll checks a few dozen boxes, not every row.
+	 * A row that moves to another section is drawn anew there, progressively like new rows. Every
+	 * section of the page stands from the start: one whose rows are not drawn yet holds their
+	 * expected height, so a progressive mount does not grow the page, and move what is below it,
+	 * with every slice.
+	 */
+	const CHUNK = 50;
+	let previousChunks: RowNode<T>[][] = [];
+	const chunks = $derived.by(() => {
+		if (!grid) return (previousChunks = []);
+		const result: RowNode<T>[][] = [];
+		for (let i = 0, c = 0; i < model.rows.length; i += CHUNK, c++) {
+			const next = shown.slice(i, i + CHUNK);
+			const before = previousChunks[c];
+			// A section whose rows are the same keeps its array, so its rows are not diffed again
+			// when a progressive slice or a change elsewhere touches another section.
+			result.push(
+				before && before.length === next.length && before.every((n, j) => n === next[j])
+					? before
+					: next
+			);
+		}
+		return (previousChunks = result);
+	});
 	$effect.pre(() => {
 		const rows = model.rows;
-		const size = batch;
 		untrack(() => {
-			const previous = renderedIds;
-			renderedIds = new Set(rows.map((n) => n.id));
+			const size = batch;
+			const previous = renderedAt;
+			renderedAt = new Map(rows.map((n, i) => [n.id, i]));
 			job++;
-			let fresh = 0;
-			if (previous && size) for (const n of rows) if (!previous.has(n.id)) fresh++;
-			if (!previous || !size || fresh < size) {
+			if (!previous) {
+				if (limit < rows.length) continueMount(job);
+				return;
+			}
+			// Rows to draw: new ones, and in grid layout rows that changed section (a section's rows
+			// are drawn anew when they move to another one). Rows before the first of them stay.
+			let drawn = 0;
+			let first = -1;
+			if (size)
+				rows.forEach((n, i) => {
+					const was = previous.get(n.id);
+					if (was !== undefined && (!grid || Math.floor(was / CHUNK) === Math.floor(i / CHUNK)))
+						return;
+					drawn++;
+					if (first < 0) first = i;
+				});
+			if (!size || drawn < size || rows.length <= size) {
 				limit = Number.POSITIVE_INFINITY;
 				return;
 			}
-			limit = size;
-			continueMount(job, size);
+			limit = Math.max(size, first);
+			continueMount(job);
 		});
 	});
 	$effect(() => () => {
 		job++;
 	});
-	function continueMount(id: number, step: number) {
+	function continueMount(id: number) {
 		const channel = new MessageChannel();
 		channel.port1.onmessage = () => {
 			if (id !== job) return channel.port1.close();
 			const start = performance.now();
-			limit += step;
+			const count = rowsPerSlice;
+			limit += count;
 			flushSync();
+			const cost = (performance.now() - start) / count;
+			rowsPerSlice = Math.max(5, Math.min(400, Math.floor(SLICE_MS / Math.max(cost, 0.05))));
 			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);
+		// The first slice waits for the frame that paints the first batch: queued right away, it
+		// could run before that frame, and the interaction that brought the rows (a sort, a page)
+		// would be answered only after it. A hidden page paints no frames: it starts at once.
+		if (document.hidden) channel.port2.postMessage(null);
+		else requestAnimationFrame(() => channel.port2.postMessage(null));
+	}
+	/**
+	 * What a plain body cell's attributes are, per column, computed once per column change: the
+	 * cell template reads them as plain properties, so a row adds no per-cell computations.
+	 */
+	const cellMeta = $derived(
+		Object.fromEntries(
+			cols.map((col) => {
+				const pin = pins.get(col.id);
+				return [
+					col.id,
+					{
+						align: col.align !== 'start' ? col.align : undefined,
+						pin: pin?.pin,
+						edge: pin?.edge,
+						clip: clipped.has(col.id) || undefined,
+						className: typeof col.class === 'string' ? col.class : undefined,
+						gridClass: `slean-table-cell${typeof col.class === 'string' ? ` ${col.class}` : ''}`,
+						style: pin?.style
+					}
+				];
+			})
+		)
+	);
+	/**
+	 * The plain cells' contexts of one row, by column id: built once per row (a `{@const}` in the
+	 * row), again only when the row's node or the columns change. `index` is read through a getter,
+	 * so a reorder does not rebuild them.
+	 */
+	function rowContexts(
+		node: RowNode<T>,
+		row: T,
+		index: () => number
+	): Record<string, CellContext<T>> {
+		const result: Record<string, CellContext<T>> = {};
+		for (const column of cols)
+			result[column.id] = {
+				row,
+				rowId: node.id,
+				column,
+				get value() {
+					return valueOf(row, column);
+				},
+				get index() {
+					return index();
+				}
+			};
+		return result;
 	}
+	/**
+	 * A cell's context, created once per row and column: `index` is read through a getter, so a
+	 * reorder that only moves a row does not hand its cells a new context to render again.
+	 */
+	function cellContext(
+		node: RowNode<T>,
+		row: T,
+		column: Column<T>,
+		index: () => number
+	): CellContext<T> {
+		return {
+			row,
+			get value() {
+				return valueOf(row, column);
+			},
+			rowId: node.id,
+			column,
+			get index() {
+				return index();
+			}
+		};
+	}
+	/**
+	 * Grid layout (`layout="grid"`). Rows are CSS grid rows over one track list; a body section off
+	 * screen is skipped by the browser (`content-visibility: auto`). Column widths come from the
+	 * content: read off hidden copies of a sample of rows, every cell at its max-content width
+	 * (`data-measuring`), when a new set of rows first renders and once more, when idle, after a
+	 * progressive mount completes; then kept. A width only grows while the columns stay, so nothing shifts under the
+	 * reader. A declared `width` is the minimum; `maxWidth` (default `GRID_MAX`) caps a measured
+	 * width, and the cells of a capped column clip with an ellipsis.
+	 */
+	const GRID_MAX = 480;
+	const GRID_MIN = 48;
+	const MEASURE_ROWS = 30;
+	const grid = $derived(layout === 'grid');
+	let measured = $state<Record<string, number>>({});
+	function gridWidth(col: Column<T>): number {
+		const resized = s.widths[col.id];
+		if (resized !== undefined) return resized;
+		const declared = col.width ?? 0;
+		const max = Math.max(col.maxWidth ?? GRID_MAX, declared);
+		return Math.max(col.minWidth ?? GRID_MIN, declared, Math.min(measured[col.id] ?? 0, max));
+	}
+	const clipped = $derived(
+		new Set(
+			grid
+				? cols
+						.filter(
+							(col) => (measured[col.id] ?? 0) > Math.max(col.maxWidth ?? GRID_MAX, col.width ?? 0)
+						)
+						.map((col) => col.id)
+				: []
+		)
+	);
+	/**
+	 * When to measure: the first rows of a new column set, before they are painted; a page of rows
+	 * the table has not drawn before, when idle; the whole page once a progressive mount completes,
+	 * when idle. A sort, a filter or the same rows arriving again measure nothing.
+	 */
+	let measuredColumns = '';
+	let measuredRows: Set<RowId> = new Set();
+	let measuredWhole = false;
+	$effect(() => {
+		if (!grid) return;
+		const columns = cols.map((col) => col.id).join('\u0000');
+		const rows = shown;
+		const complete = limit === Number.POSITIVE_INFINITY;
+		if (!rows.length) return;
+		untrack(() => {
+			if (columns !== measuredColumns) {
+				measuredColumns = columns;
+				measured = {};
+				measuredRows = new Set(rows.map((n) => n.id));
+				measuredWhole = complete;
+				measure(complete);
+				void tick().then(() => untrack(() => estimateRows()));
+				return;
+			}
+			// A progressive mount is measured once, when it completes.
+			if (!complete) return;
+			const fresh = rows.some((n) => !measuredRows.has(n.id));
+			if (!fresh && measuredWhole) return;
+			// The first rows are measured again only on a new page (its first row is new); a page whose
+			// first batch was measured as it arrived needs only the spread over the rest.
+			const first = !measuredRows.has(rows[0]!.id);
+			measuredRows = new Set(rows.map((n) => n.id));
+			measuredWhole = true;
+			whenIdle(() => measure(true, first));
+		});
+	});
+	/**
+	 * What a body row stands, from the first section once its rows are drawn: the sections the
+	 * browser skips assume it, so the page is about as tall before they are drawn as after.
+	 */
+	function estimateRows() {
+		const section = tableElement?.querySelector<HTMLElement>(':scope > tbody.slean-table-chunk');
+		const first = section?.firstElementChild;
+		if (!section || !first) return;
+		// Before its first frame the browser has not yet decided the section is on screen, and its
+		// rows may be skipped: it is laid out here, as it is about to be anyway, and read.
+		const skipped = first.checkVisibility?.({ contentVisibilityAuto: true }) === false;
+		if (skipped) section.style.contentVisibility = 'visible';
+		const height = first.getBoundingClientRect().height;
+		if (skipped) section.style.contentVisibility = '';
+		if (height > 0) rowEstimate = Math.round(height * 100) / 100;
+	}
+	function whenIdle(run: () => void) {
+		if (typeof requestIdleCallback === 'function') requestIdleCallback(run, { timeout: 500 });
+		else setTimeout(run, 50);
+	}
+	/**
+	 * Content widths, read from clones: the header row and a sample of body rows are copied into a
+	 * hidden table inside the root, laid out there with every cell at its max-content width
+	 * (`data-measuring`), read, and removed. The live rows are neither restyled nor laid out.
+	 */
+	function measure(whole: boolean, first = true) {
+		const live = viewport?.firstElementChild as HTMLElement | null;
+		if (!live || !root) return;
+		const leaves = new Set(cols.map((col) => col.id));
+		const rows = [...ownRows()];
+		// The first rows and the header, and for a whole page twenty rows spread over the rest; a pass
+		// over a page whose first rows were measured already (`first` false) takes only the spread.
+		const sample = first ? rows.slice(0, MEASURE_ROWS) : [];
+		if (whole && rows.length > MEASURE_ROWS) {
+			const step = Math.ceil((rows.length - MEASURE_ROWS) / 20);
+			for (let i = MEASURE_ROWS; i < rows.length; i += step) sample.push(rows[i]!);
+		}
+		if (!sample.length) return;
+		const region = document.createElement('div');
+		region.className = 'slean-table-scroll';
+		region.setAttribute('aria-hidden', 'true');
+		region.style.cssText =
+			'position:absolute;inset-block-start:0;inset-inline-start:0;visibility:hidden;pointer-events:none;contain:layout style;';
+		const clone = document.createElement('table');
+		clone.setAttribute('data-measuring', '');
+		const head = live.querySelector(':scope > thead > tr:last-child');
+		const thead = document.createElement('thead');
+		if (head && first) thead.append(head.cloneNode(true));
+		const tbody = document.createElement('tbody');
+		for (const row of sample) tbody.append(row.cloneNode(true));
+		clone.append(thead, tbody);
+		region.append(clone);
+		root.append(region);
+		const next = { ...measured };
+		let changed = false;
+		for (const cell of clone.querySelectorAll(':scope > * > tr > [data-column]')) {
+			const id = cell.getAttribute('data-column');
+			if (!id || !leaves.has(id)) continue;
+			const width = Math.ceil(cell.getBoundingClientRect().width);
+			if (width > (next[id] ?? 0)) {
+				next[id] = width;
+				changed = true;
+			}
+		}
+		region.remove();
+		if (changed) measured = next;
+	}
+	/**
+	 * Idle warming (grid layout). A section the browser has skipped (`content-visibility: auto`) is
+	 * styled and laid out in the frame that scrolls it into view; in a fast scroll through a long
+	 * page that is every frame. Once a page is fully rendered, sections are laid out ahead in idle
+	 * time, nearest the screen first, as many per idle period as it has room for, so a section that
+	 * arrives costs only its paint. Nothing is windowed: every row stays in the document; this only
+	 * does the browser's work early. New rows and new column widths make sections cold again.
+	 */
+	$effect(() => {
+		if (!grid || limit !== Number.POSITIVE_INFINITY || typeof requestIdleCallback !== 'function')
+			return;
+		void chunks;
+		void tracks?.template;
+		const warm = new WeakSet<Element>();
+		let handle = 0;
+		let warmCost = 10;
+		const step = (deadline: IdleDeadline) => {
+			const view = viewport.getBoundingClientRect();
+			const cold = [
+				...tableElement.querySelectorAll<HTMLElement>(':scope > tbody.slean-table-chunk')
+			]
+				.filter((section) => !warm.has(section))
+				.map((section) => {
+					const box = section.getBoundingClientRect();
+					const distance =
+						box.bottom < view.top
+							? view.top - box.bottom
+							: Math.max(0, box.top - Math.min(view.bottom, innerHeight));
+					return { section, distance };
+				})
+				.sort((a, b) => a.distance - b.distance);
+			// As many sections as the idle period has room for, judged by what the last one cost (half
+			// of it may run past the period): warming a section is a layout of its rows, and a long
+			// idle callback is a long task all the same. A callback the browser ran late
+			// (`didTimeout`, a busy page) warms one.
+			let done = 0;
+			for (const { section } of cold) {
+				if (deadline.didTimeout ? done > 0 : deadline.timeRemaining() < Math.min(warmCost / 2, 40))
+					break;
+				warm.add(section);
+				// The section itself is never skipped, its rows are: a drawn first row means the
+				// browser has laid this section out already.
+				if (section.firstElementChild?.checkVisibility?.({ contentVisibilityAuto: true })) continue;
+				const start = performance.now();
+				section.style.contentVisibility = 'visible';
+				void section.offsetHeight;
+				section.style.contentVisibility = '';
+				warmCost = performance.now() - start;
+				done++;
+			}
+			if (cold.some(({ section }) => !warm.has(section)))
+				handle = requestIdleCallback(step, { timeout: 2000 });
+		};
+		handle = requestIdleCallback(step, { timeout: 2000 });
+		return () => cancelIdleCallback(handle);
+	});
+	/**
+	 * The grid track list, and the width below which the rows scroll sideways. A column is never
+	 * narrower than its content (its measured width, a declared `width` or `minWidth`); spare width
+	 * is shared in proportion to the content (`fr`). Header labels count with their longest word
+	 * (they wrap), so a long label does not widen a column of short values. When the content does
+	 * not fit, the rows scroll sideways. Pinned and resized columns keep their exact width, which
+	 * the sticky offsets are computed from.
+	 */
+	const tracks = $derived.by(() => {
+		if (!grid) return null;
+		const lead = [selection && SELECTION_WIDTH, expander && EXPAND_WIDTH].filter(
+			(part): part is string => !!part
+		);
+		const parts = [...lead];
+		let min = 0;
+		for (const col of cols) {
+			const width = gridWidth(col);
+			if (s.widths[col.id] !== undefined || pins.has(col.id)) {
+				parts.push(`${width}px`);
+				min += width;
+				continue;
+			}
+			const floor = width;
+			parts.push(`minmax(${floor}px, ${width}fr)`);
+			min += floor;
+		}
+		return {
+			template: parts.join(' '),
+			min: lead.length ? `calc(${min}px + ${lead.join(' + ')})` : `${min}px`
+		};
+	});
+	/**
+	 * Header rows. In grid layout every row is a grid of its own, so a cell spanning rows sits in
+	 * the lowest row it spans, placed at its first column; the leading control headers sit there
+	 * too.
+	 */
+	const leafIndex = $derived(new Map(cols.map((col, i) => [col.id, i])));
+	function firstLeaf(column: Column<T>): number {
+		if (!column.children?.length) return leafIndex.get(column.id) ?? 0;
+		return Math.min(...column.children.map(firstLeaf));
+	}
+	const headerLevels = $derived.by((): { cell: HeaderCell<T>; place?: string }[][] => {
+		const levels = table.headers;
+		if (!grid) return levels.map((row) => row.map((cell) => ({ cell })));
+		const lead = (selection ? 1 : 0) + (expander ? 1 : 0);
+		const result: { cell: HeaderCell<T>; place?: string }[][] = levels.map(() => []);
+		levels.forEach((row, level) =>
+			row.forEach((cell) => {
+				const target = Math.min(levels.length - 1, level + cell.rowSpan - 1);
+				const start = lead + firstLeaf(cell.column) + 1;
+				result[target]!.push({ cell, place: `grid-column:${start} / span ${cell.colSpan};` });
+			})
+		);
+		return result;
+	});
+	const leadLevel = $derived(grid ? table.headers.length - 1 : 0);
+	/**
+	 * The last body row carries `data-last`, where the stylesheet drops its bottom line (the region's
+	 * border closes the table). Set here, on one element after each update, instead of a
+	 * `:last-child` selector, which would restyle every cell each time a row is appended.
+	 */
+	let lastRow: Element | null = null;
+	$effect(() => {
+		void shown;
+		void skeleton;
+		void table.state.expanded;
+		const sections = tableElement.tBodies;
+		const last = sections[sections.length - 1]?.lastElementChild ?? null;
+		if (last === lastRow) return;
+		lastRow?.removeAttribute('data-last');
+		last?.setAttribute('data-last', '');
+		lastRow = last;
+	});
 	/**
 	 * 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.
+	 *
+	 * A region that scrolls sideways but not down (no `height`, too wide to fit) captures the sticky
+	 * header without ever letting it stick; the header is then not sticky at all (`scrollsY`), since
+	 * a sticky box in a scroller is composited, and every row painted under it is weighed against it
+	 * (at 1000 rows about a tenth of a fast scroll's main-thread work).
 	 */
 	let fits = $state(false);
+	let scrollsY = $state(true);
 	$effect(() => {
 		if (!stickyHeader || height || typeof ResizeObserver === 'undefined') {
 			fits = false;
+			scrollsY = true;
 			return;
 		}
 		const table = viewport.firstElementChild as HTMLElement;
 		const observer = new ResizeObserver(() => {
 			fits = table.offsetWidth <= viewport.clientWidth + 1;
+			scrollsY = viewport.scrollHeight > viewport.clientHeight + 1;
 		});
 		observer.observe(viewport);
 		observer.observe(table);
@@ -402,7 +829,7 @@
 						: `${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);
+				offset += grid ? gridWidth(col) : table.columnWidth(col);
 				last = col.id;
 			}
 			const edge = last === undefined ? undefined : result.get(last);
@@ -509,9 +936,9 @@
 		editing = { id, column: col.id, row, value: String(valueOf(row, col) ?? '') };
 		editError = '';
 		await tick();
-		body
+		tableElement
 			.querySelector<HTMLInputElement | HTMLSelectElement>(
-				':scope > tr > td > .slean-table-editor > :is(input, select)'
+				':scope > tbody > tr > td > .slean-table-editor > :is(input, select)'
 			)
 			?.focus();
 	}
@@ -558,14 +985,12 @@
 			endEdit();
 		}
 	}
-	function cellKey(e: KeyboardEvent, row: T, col: Column<T>) {
-		if (e.target !== e.currentTarget) return;
+	function cellKey(e: KeyboardEvent, cell: HTMLTableCellElement, row: T, col: Column<T>) {
 		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;
@@ -586,11 +1011,93 @@
 			});
 		}
 	}
+	/**
+	 * A body cell takes the full template only when something in it can differ from a plain value:
+	 * an editor, range selection, row moves, spans, or the first column's toggle and indentation.
+	 * Every other cell is a `<td>` with one rendered snippet.
+	 */
+	const fullCells = $derived(
+		!!onEdit ||
+			!!onCellRangeChange ||
+			movable ||
+			cols.some((col) => (!grid && !!col.span) || typeof col.class === 'function' || !!col.ellipsis)
+	);
+	const firstSpecial = $derived(!!getSubRows || (!!rowDetails && !expander));
+	/**
+	 * Grid rows with nothing but data cells take the plain row template: no group rows (the default
+	 * row model, no tree), no selection column, detail rows only behind an expand column, no cell
+	 * that needs the full template. The choice is made once per table, not per row, so a plain row
+	 * carries no per-cell branches. Everything else takes the full template.
+	 */
+	const plainRows = $derived(
+		grid &&
+			!fullCells &&
+			!firstSpecial &&
+			!selection &&
+			!getSubRows &&
+			getRowModel === createRowModel
+	);
+	/**
+	 * Cell events are delegated to the body: one listener each for click, double click, context
+	 * menu and keys, resolving the cell, its row and its column from the target. A cell of a table
+	 * nested in a detail row never resolves here (its row's parent is the nested body).
+	 */
+	const colById = $derived(new Map(cols.map((col) => [col.id, col])));
+	function ownCell(
+		target: EventTarget | null
+	): { cell: HTMLTableCellElement; node: RowNode<T>; row: T; col: Column<T> } | null {
+		let element = target as Element | null;
+		while (element && !isOwnRow(element.parentElement)) element = element.parentElement;
+		if (!element || !element.hasAttribute('data-cell')) return null;
+		const node = nodes.get(element.parentElement?.getAttribute('data-row-id') ?? '');
+		const col = colById.get(element.getAttribute('data-column') ?? '');
+		if (!node || node.data === undefined || !col) return null;
+		return { cell: element as HTMLTableCellElement, node, row: node.data, col };
+	}
+	function bodyClick(e: MouseEvent) {
+		const hit = ownCell(e.target);
+		if (!hit) return;
+		const { cell, node, row, col } = hit;
+		const index = model.rows.indexOf(node);
+		if (focusableCells) current = { row: node.id, column: col.id };
+		const target = e.target as HTMLElement;
+		const action = target.closest<HTMLElement>('[data-action]');
+		if (action && cell.contains(action)) {
+			onAction?.(action.dataset.action ?? '', row, action, index);
+			return;
+		}
+		const control = target.closest(NOT_ROW_CLICK);
+		if (control && cell.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);
+	}
+	function bodyDoubleClick(e: MouseEvent) {
+		const hit = ownCell(e.target);
+		if (hit) startEdit(hit.row, hit.col);
+		const node = ownRow(e.target);
+		if (node?.data !== undefined) onRowDoubleClick?.(node.data, e);
+	}
+	function bodyContextMenu(e: MouseEvent) {
+		const node = ownRow(e.target);
+		if (node?.data !== undefined) onRowContextMenu?.(node.data, e);
+	}
+	function bodyKey(e: KeyboardEvent) {
+		const hit = ownCell(e.target);
+		if (hit && e.target === hit.cell) cellKey(e, hit.cell, hit.row, hit.col);
+		else rowKey(e);
+	}
 	/** 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;
+		if (!isOwnRow(tr)) return;
 		const node = nodes.get(tr.getAttribute('data-row-id') ?? '');
 		if (node?.data === undefined) return;
 		e.preventDefault();
@@ -608,8 +1115,343 @@
 		focusable="false"><path d={ICONS[name]} /></svg
 	>{/snippet}
 
+<!-- A cell without a `cell` snippet: its formatted value, or the placeholder. -->
+{#snippet plainCell(context: CellContext<T>)}{@const text = textOf(
+		context.column,
+		context.value,
+		context.row
+	)}{#if text !== null}{text}{:else if placeholder}<span class="slean-table-placeholder"
+			>{placeholder}</span
+		>{/if}{/snippet}
+
+<!-- Skeleton rows while loading, or the empty row. -->
+{#snippet placeholders()}
+	{#each skeleton as index (index)}<tr
+			class="slean-table-skeleton-row"
+			aria-hidden="true"
+			role={grid ? 'row' : undefined}
+			>{@render leading()}{#each cols as col (col.id)}<td role={grid ? 'cell' : undefined}
+					><span class="slean-table-skeleton"></span></td
+				>{/each}</tr
+		>{/each}
+	{#if !model.rows.length && !skeleton.length}<tr role={grid ? 'row' : undefined}
+			><td
+				colspan={Math.max(1, span)}
+				class="slean-table-empty slean-table-full"
+				role={grid ? 'cell' : undefined}
+				>{#if empty}{@render empty(emptyContext)}{:else}{loading ? m.loading : m.empty}{/if}</td
+			></tr
+		>{/if}{/snippet}
+
+<!-- A body section of grid layout. Its rows are the only content of the <tbody>, so a section
+     emptied at once (a new page, a sort) is cleared in one DOM operation. -->
+{#snippet section(
+	chunk: RowNode<T>[],
+	c: number,
+	row: Snippet<[RowNode<T>, number]>
+)}<!-- svelte-ignore a11y_no_redundant_roles --><tbody
+		class="slean-table-chunk"
+		role="rowgroup"
+		style:--slean-table-chunk-rows={Math.min(CHUNK, model.rows.length - c * CHUNK)}
+		style:--slean-table-row-estimate={rowEstimate ? `${rowEstimate}px` : undefined}
+		data-pending={chunk.length < Math.min(CHUNK, model.rows.length - c * CHUNK) || undefined}
+		>{#each chunk as node, i (node.id)}{@render row(node, c * CHUNK + i)}{/each}</tbody
+	>{/snippet}
+
+<!-- One body row: a group row, or a data row and its detail row. -->
+<!-- A plain grid row (see `plainRows`): the row and its cells, with no per-row branches. -->
+{#snippet plainRow(node: RowNode<T>, index: number)}{@const row = node.data!}{@const contexts =
+		rowContexts(node, row, () => index)}<!-- svelte-ignore a11y_no_redundant_roles -->
+	<tr
+		class={rowClass?.(row, index) ?? ''}
+		data-row-id={String(node.id)}
+		role="row"
+		data-even={striped && index % 2 === 1 ? '' : undefined}
+		data-clickable={onRowClick ? true : undefined}
+		aria-rowindex={ariaRowCount === undefined
+			? undefined
+			: headerRowCount + model.pageIndex * s.pageSize + index + 1}
+		tabindex={focusableRows ? 0 : undefined}
+		>{#if expander}{@render plainExpander(node, row)}{/if}{#each cols as col (col.id)}<td
+				data-cell
+				role="cell"
+				data-column={col.id}
+				data-align={cellMeta[col.id]!.align}
+				data-pin={cellMeta[col.id]!.pin}
+				data-pin-edge={cellMeta[col.id]!.edge}
+				data-clip={cellMeta[col.id]!.clip}
+				class={cellMeta[col.id]!.gridClass}
+				style={cellMeta[col.id]!.style}>{@render (col.cell ?? plainCell)(contexts[col.id]!)}</td
+			>{/each}</tr
+	>{#if rowDetails && table.isExpanded(node.id) && rowExpandable(row)}<!-- svelte-ignore a11y_no_redundant_roles --><tr
+			class="slean-table-detail"
+			role="row"
+			><td colspan={span} class="slean-table-full" role="cell"
+				>{@render rowDetails(row, {
+					rowId: node.id,
+					index,
+					collapse: () => toggleExpanded(node.id, row, false)
+				})}</td
+			></tr
+		>{/if}{/snippet}
+
+<!-- The expand column's cell of a plain row (no selection column precedes it). The chevron is the
+     button's own mask (`slean-table-chevron`), not an SVG element per row. -->
+{#snippet plainExpander(node: RowNode<T>, row: T)}<td
+		role="cell"
+		class="slean-table-expander"
+		style="inset-inline-start:0px"
+		>{#if rowDetails && rowExpandable(row)}{@const open = table.isExpanded(node.id)}<button
+				type="button"
+				class="slean-table-button slean-table-expand slean-table-chevron"
+				aria-label={`${open ? m.collapse : m.expand}: ${nameOf(node, row)}`}
+				aria-expanded={open}
+				onclick={() => toggleExpanded(node.id, row)}
+			></button>{/if}</td
+	>{/snippet}
+
+{#snippet bodyRow(node: RowNode<T>, index: number)}
+	{#if node.kind === 'group'}<tr class="slean-table-group" role={grid ? 'row' : undefined}
+			><th colspan={span} scope="row" class="slean-table-full" role={grid ? 'rowheader' : undefined}
+				><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
+		)}{@const contexts = rowContexts(node, row, () => index)}
+		<tr
+			class={rowClass?.(row, index) ?? ''}
+			data-row-id={String(node.id)}
+			data-even={striped && index % 2 === 1 ? '' : undefined}
+			data-last={index === shown.length - 1 && !(rowDetails && open && rowExpandable(row))
+				? ''
+				: undefined}
+			role={grid ? 'row' : undefined}
+			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}
+		>
+			<!-- 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" role={grid ? 'cell' : undefined}
+					><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" role={grid ? 'cell' : undefined}
+					><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
+					role={grid ? 'cell' : undefined}
+					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}
+			{#if fullCells || firstSpecial}{#each cols as col, ci (col.id)}{#if fullCells || ci === 0}{@const value =
+							valueOf(row, col)}{@const context = cellContext(
+							node,
+							row,
+							col,
+							() => index
+						)}{@const span = grid ? undefined : 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
+								role={grid ? 'cell' : undefined}
+								data-clip={clipped.has(col.id) || undefined}
+								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}
+								rowspan={span?.rows}
+								colspan={span?.columns}
+								tabindex={cellTabindex(node.id, col.id)}
+								>{#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}
+					{:else}<td
+							data-cell
+							role={grid ? 'cell' : undefined}
+							data-clip={cellMeta[col.id]!.clip}
+							data-column={col.id}
+							data-align={cellMeta[col.id]!.align}
+							data-pin={cellMeta[col.id]!.pin}
+							data-pin-edge={cellMeta[col.id]!.edge}
+							class={cellMeta[col.id]!.className}
+							style={cellMeta[col.id]!.style}
+							><div class="slean-table-cell">
+								{@render (col.cell ?? plainCell)(contexts[col.id]!)}
+							</div></td
+						>{/if}{/each}{:else if grid}{#each cols as col (col.id)}<td
+						data-cell
+						role="cell"
+						data-column={col.id}
+						data-align={cellMeta[col.id]!.align}
+						data-pin={cellMeta[col.id]!.pin}
+						data-pin-edge={cellMeta[col.id]!.edge}
+						data-clip={cellMeta[col.id]!.clip}
+						class={cellMeta[col.id]!.gridClass}
+						style={cellMeta[col.id]!.style}>{@render (col.cell ?? plainCell)(contexts[col.id]!)}</td
+					>{/each}{:else}{#each cols as col (col.id)}<td
+						data-cell
+						data-column={col.id}
+						data-align={cellMeta[col.id]!.align}
+						data-pin={cellMeta[col.id]!.pin}
+						data-pin-edge={cellMeta[col.id]!.edge}
+						class={cellMeta[col.id]!.className}
+						style={cellMeta[col.id]!.style}
+						><div class="slean-table-cell">
+							{@render (col.cell ?? plainCell)(contexts[col.id]!)}
+						</div></td
+					>{/each}{/if}
+		</tr>
+		{#if rowDetails && open && rowExpandable(row)}<tr
+				class="slean-table-detail"
+				role={grid ? 'row' : undefined}
+				><td colspan={span} class="slean-table-full" role={grid ? 'cell' : undefined}
+					>{@render rowDetails(row, {
+						rowId: node.id,
+						index,
+						collapse: () => toggleExpanded(node.id, row, false)
+					})}</td
+				></tr
+			>{/if}
+	{/if}{/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
+{#snippet leading()}{#if selection}<td
+			class="slean-table-selection"
+			role={grid ? 'cell' : undefined}
+		></td>{/if}{#if expander}<td
+			role={grid ? 'cell' : undefined}
 			class="slean-table-expander"
 			style:inset-inline-start={selection ? SELECTION_WIDTH : '0px'}
 		></td>{/if}{/snippet}
@@ -620,6 +1462,8 @@
 	bind:this={root}
 	{id}
 	class="slean-table {className}"
+	data-layout={layout}
+	data-ssr={SERVER ? '' : undefined}
 	data-density={density}
 	data-striped={striped}
 	data-bordered={bordered}
@@ -714,29 +1558,55 @@
 		aria-label={label}
 		onscroll={onScroll}
 	>
+		<!-- Row keys, clicks and drags are delegated to the table; rows and cells are the targets. -->
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 		<table
+			bind:this={tableElement}
+			onkeydown={bodyKey}
+			onclick={bodyClick}
+			ondblclick={bodyDoubleClick}
+			oncontextmenu={bodyContextMenu}
+			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;
+			}}
+			role={grid ? 'table' : undefined}
 			aria-label={label}
 			aria-busy={loading || fetching}
 			aria-rowcount={ariaRowCount}
-			class:slean-table-sticky={stickyHeader}
-			style:table-layout={tableLayout}
+			class:slean-table-sticky={stickyHeader && (fits || scrollsY)}
+			style:table-layout={grid ? undefined : tableLayout}
+			style:--slean-table-tracks={tracks?.template}
+			style:--slean-table-min-width={tracks?.min}
 		>
 			{#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
+			{#if !grid}<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}
+			{#if showHeader}<thead role={grid ? 'rowgroup' : undefined}>
+					{#each headerLevels as row, level}<tr
+							role={grid ? 'row' : undefined}
 							aria-rowindex={ariaRowCount === undefined ? undefined : level + 1}
 						>
-							{#if selection && level === 0}<th
+							{#if selection && level === leadLevel}<th
 									scope="col"
-									rowspan={table.headers.length}
+									role={grid ? 'columnheader' : undefined}
+									rowspan={grid ? undefined : table.headers.length}
 									class="slean-table-selection"
 									>{#if selection === 'multiple' && !hideSelectAll}<input
 											type="checkbox"
@@ -750,24 +1620,26 @@
 										/>{:else}<span class="slean-table-visually-hidden">{m.selectionHeader}</span
 										>{/if}</th
 								>{/if}
-							{#if expander && level === 0}<th
+							{#if expander && level === leadLevel}<th
 									scope="col"
-									rowspan={table.headers.length}
+									role={grid ? 'columnheader' : undefined}
+									rowspan={grid ? undefined : 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 =
+							{#each row as { cell: h, place } (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'}
+									role={grid ? 'columnheader' : undefined}
 									colspan={h.colSpan}
-									rowspan={h.rowSpan}
+									rowspan={grid ? undefined : 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 ?? ''}
+									style={`${pin?.style ?? ''}${place ?? ''}`}
 									aria-sort={sort ? (sort.desc ? 'descending' : 'ascending') : undefined}
 								>
 									{#if col.children?.length}{col.header}{:else}<div class="slean-table-heading">
@@ -808,9 +1680,12 @@
 					<!-- 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
+							role={grid ? 'row' : undefined}
 							class="slean-table-filters"
 							aria-rowindex={ariaRowCount === undefined ? undefined : table.headers.length + 1}
-							>{@render leading()}{#each cols as col (col.id)}<td {...pinned(col)}
+							>{@render leading()}{#each cols as col (col.id)}<td
+									{...pinned(col)}
+									role={grid ? 'cell' : undefined}
 									>{#if col.filterable !== false}<input
 											class="slean-table-filter slean-table-input"
 											aria-label={m.filter(col.header)}
@@ -824,266 +1699,26 @@
 								>{/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"
+			<!-- In grid layout the sections are `display: block`; the roles keep the table semantics
+			     that some engines drop with a changed display. -->
+			<!-- svelte-ignore a11y_no_redundant_roles -->
+			{#if grid}{#if skeleton.length || !model.rows.length}<tbody role="rowgroup"
+						>{@render placeholders()}</tbody
+					>{/if}{#each chunks as chunk, c (c)}{@render section(
+						chunk,
+						c,
+						plainRows ? plainRow : bodyRow
+					)}{/each}{:else}<tbody
+					>{@render placeholders()}{#each shown as node, index (node.id)}{@render bodyRow(
+							node,
+							index
+						)}{/each}</tbody
+				>{/if}
+			{#if summary}<tfoot role={grid ? 'rowgroup' : undefined}
+					><tr role={grid ? 'row' : undefined}
 						>{@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
+								{...pinned(col)}
+								role={grid ? 'cell' : undefined}>{summary[col.id] ?? ''}</td
 							>{/each}</tr
 					></tfoot
 				>{/if}
@@ -1092,16 +1727,42 @@
 	{#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"
+			>{#if pageSizeSelect === 'custom'}<span class="slean-table-page-size"
+					><span id="{uid}-page-size">{m.pageSize}</span>
+					<div class="slean-table-page-select" {...SELECT_ROOT} data-size="sm">
+						<select
+							data-slean-part="native"
+							aria-labelledby="{uid}-page-size"
+							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
+						><button
+							type="button"
+							role="combobox"
+							aria-haspopup="listbox"
+							aria-expanded="false"
+							aria-controls="{uid}-page-sizes"
+							aria-labelledby="{uid}-page-size"
+							data-slean-part="trigger"
+							><span data-slean-part="value">{s.pageSize === 0 ? m.allRows : s.pageSize}</span
+							></button
+						><span data-slean-part="toggle" aria-hidden="true"></span>
+						<div popover="manual" data-slean-part="popup">
+							<ul id="{uid}-page-sizes" role="listbox" aria-labelledby="{uid}-page-size"></ul>
+						</div>
+					</div></span
+				>{:else}<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
+				>{/if}<span class="slean-table-pager"
 				><button
 					type="button"
 					class="slean-table-button"