@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/Table/Table.svelte

@@ -1,694 +1,562 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import {
-		ContextMenuContext,
-		type IContextMenuOption,
-	} from '../../Contexts/ContextMenuContext.svelte';
-	import { cssLength, devCatch, refWrapper } from '../../Helpers/Helpers.svelte';
-	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
-	import LoadingOverlay from '../LoadingOverlay.svelte';
-	import TableBody from './Body/TableBody.svelte';
-	import TableHead from './Headers/TableHead.svelte';
-	import TableFooter from './Misc/TableFooter.svelte';
-	import TableHorizontalBar from './Misc/TableHorizontalBar.svelte';
-	import TableSidebar from './Misc/TableSidebar.svelte';
-	import { TableContext } from './Types/Context/TableContext.svelte';
-	import type { Primitive } from './Types/Context/TableInitOptions.js';
-	import { PaginationType } from './Types/Pagination/PaginationType.js';
-	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
-
-	declare global {
-		interface HTMLElementEventMap {
-			edit: CustomEvent<{
-				selectAll: boolean;
-			}>;
-		}
-	}
-
-	/**
-	 * Top-level orchestrator props. Accepts either:
-	 *
-	 * - `table`: the structured `Table` instance returned by `createTable(...)`.
-	 *   This is the consumer-facing form.
-	 * - `tableContext`: the underlying `TableContext`. Used internally by
-	 *   `NestedTable` which constructs a context directly for each
-	 *   expansion. Not intended for consumer use.
-	 *
-	 * Exactly one of the two must be supplied; a runtime guard inside the
-	 * component throws if both are missing. The reference passed in is
-	 * captured at mount via `setContext` and should not be reassigned
-	 * afterwards.
-	 */
-	export interface TableProps<T extends object, IdType extends Primitive> {
-		readonly table?: { readonly _context: TableContext<T, IdType> };
-		readonly tableContext?: TableContext<T, IdType>;
-		nested?: boolean;
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import { ContextMenuContext } from "../../Contexts/ContextMenuContext.svelte";
+import { cssLength, devCatch, refWrapper } from "../../Helpers/Helpers.svelte";
+import { getContext, onMount, setContext, tick, untrack } from "svelte";
+import LoadingOverlay from "../LoadingOverlay.svelte";
+import TableBody from "./Body/TableBody.svelte";
+import TableHead from "./Headers/TableHead.svelte";
+import TableFooter from "./Misc/TableFooter.svelte";
+import TableHorizontalBar from "./Misc/TableHorizontalBar.svelte";
+import TableSidebar from "./Misc/TableSidebar.svelte";
+import { TableContext } from "./Types/Context/TableContext.svelte";
+import { PaginationType } from "./Types/Pagination/PaginationType.js";
+import { ToolbarPosition } from "./Types/Toolbar/ToolbarPosition.js";
+/**
+* Symbol used to share the currently-open quick-filter select across
+* every header in a single Table tree. Stored via `setContext` on
+* the same component that hosts the Table tree so multiple
+* independent tables on a page each own their own popup state.
+*/
+export const quickFilterContextIdentifier = Symbol();
+const openedQuickFilterSelect = refWrapper(null);
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,IdType extends Primitive"
+>const { nested = false, table, tableContext: tableContextProp } = $props();
+// Resolve the underlying TableContext from whichever prop was passed:
+// consumers pass `table`; internal `NestedTable` passes `tableContext`
+// directly. Exactly one must be present — throw cleanly here rather
+// than letting it surface as a downstream null-deref.
+const tableContext = (() => {
+	const ctx = table?._context ?? tableContextProp;
+	if (!ctx) {
+		throw new Error("scoria: <Table /> requires either a `table` prop (the structured instance returned by createTable) or a `tableContext` prop (used internally by NestedTable).");
 	}
-
-	/**
-	 * Symbol used to share the currently-open quick-filter select across
-	 * every header in a single Table tree. Stored via `setContext` on
-	 * the same component that hosts the Table tree so multiple
-	 * independent tables on a page each own their own popup state.
-	 */
-	export const quickFilterContextIdentifier: symbol = Symbol();
-
-	const openedQuickFilterSelect = refWrapper<symbol | null>(null);
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,IdType extends Primitive"
->
-	const { nested = false, table, tableContext: tableContextProp }: TableProps<T, IdType> = $props();
-
-	// Resolve the underlying TableContext from whichever prop was passed:
-	// consumers pass `table`; internal `NestedTable` passes `tableContext`
-	// directly. Exactly one must be present — throw cleanly here rather
-	// than letting it surface as a downstream null-deref.
-	const tableContext: TableContext<T, IdType> = (() => {
-		const ctx = table?._context ?? tableContextProp;
-		if (!ctx) {
-			throw new Error(
-				'scoria: <Table /> requires either a `table` prop (the structured instance returned by createTable) or a `tableContext` prop (used internally by NestedTable).'
-			);
-		}
-		return ctx;
-	})();
-
-	// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
-	setContext(TableContext.identifier, tableContext);
-
-	const { openContextMenu: _openContextMenu } = getContext<ContextMenuContext>(
-		ContextMenuContext.identifier
-	);
-
-	let ref: HTMLDivElement | undefined = $state();
-	let unfocusRef: HTMLDivElement | undefined = $state();
-
-	setContext(quickFilterContextIdentifier, openedQuickFilterSelect);
-
-	// Focus-restore on focusStart change. The DOM work runs inside `untrack`
-	// so a future selector tweak that reads reactive state (e.g.
-	// `document.activeElement`) does not retrigger on every focus change.
-	$effect(() => {
-		void tableContext.focusStart;
-		void ref;
-		untrack(() => {
-			if (tableContext.focusStart && ref) {
-				const { row, column: index } = tableContext.focusStart;
-				// `columnDefs[index]` can be undefined when the focus
-				// coordinate references a slot that no longer exists
-				// (e.g. an inner expand table remounted with a different
-				// column count, or a preset hydration raced column init).
-				// Guard so out-of-range degrades to "no focus restored".
-				const def = tableContext.columnDefs[index];
-				if (!def) {
-					return;
-				}
-				let element = ref.querySelector(
-					`#${tableContext.tableName}-cell-${row}-${def.id}`
-				) as HTMLElement | undefined;
-
-				if (element?.tabIndex == -1) {
-					const td = element;
-					element = td.querySelector('button') as HTMLElement | undefined;
-					if (!element) {
-						element = td.querySelector('input') as HTMLElement | undefined;
-					}
-				}
-
-				element?.focus({ preventScroll: true });
-				// Skip horizontal scroll-into-view for pinned cells (see the
-				// focusEnd effect for the rationale).
-				const startCell = element?.closest('[role="cell"]');
-				const isStartPinned =
-					startCell?.classList.contains('pinned-left') ||
-					startCell?.classList.contains('pinned-right');
-				element?.scrollIntoView({
-					behavior: 'instant',
-					block: 'nearest',
-					inline: isStartPinned ? undefined : 'nearest',
-				});
+	return ctx;
+})();
+// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
+setContext(TableContext.identifier, tableContext);
+const { openContextMenu: _openContextMenu } = getContext(ContextMenuContext.identifier);
+let ref = $state();
+let unfocusRef = $state();
+setContext(quickFilterContextIdentifier, openedQuickFilterSelect);
+// Focus-restore on focusStart change. The DOM work runs inside `untrack`
+// so a future selector tweak that reads reactive state (e.g.
+// `document.activeElement`) does not retrigger on every focus change.
+$effect(() => {
+	void tableContext.focusStart;
+	void ref;
+	untrack(() => {
+		if (tableContext.focusStart && ref) {
+			const { row, column: index } = tableContext.focusStart;
+			// `columnDefs[index]` can be undefined when the focus
+			// coordinate references a slot that no longer exists
+			// (e.g. an inner expand table remounted with a different
+			// column count, or a preset hydration raced column init).
+			// Guard so out-of-range degrades to "no focus restored".
+			const def = tableContext.columnDefs[index];
+			if (!def) {
+				return;
 			}
-		});
-	});
-
-	// Scroll-into-view on focusEnd change. DOM work wrapped in `untrack` so
-	// reading layout properties never re-establishes a reactive dependency.
-	$effect(() => {
-		void tableContext.focusEnd;
-		void ref;
-		untrack(() => {
-			if (tableContext.focusEnd && ref) {
-				const { row, column: index } = tableContext.focusEnd;
-				const def = tableContext.columnDefs[index];
-				if (!def) {
-					return;
+			let element = ref.querySelector(`#${tableContext.tableName}-cell-${row}-${def.id}`);
+			if (element?.tabIndex == -1) {
+				const td = element;
+				element = td.querySelector("button");
+				if (!element) {
+					element = td.querySelector("input");
 				}
-				const cell = ref.querySelector(
-					`#${tableContext.tableName}-cell-${row}-${def.id}`
-				) as HTMLElement | undefined;
-
-				// Pinned cells are visually always on screen, but their true
-				// layout position is at their real column track — which for
-				// a right-pinned column in a wider-than-viewport table is
-				// offscreen. Calling `scrollIntoView({inline:'nearest'})`
-				// would then scroll the table sideways to surface the cell's
-				// underlying position, which the user sees as the table
-				// jumping when they click a pinned Actions button. The
-				// vertical (block) axis still scrolls normally because the
-				// row's vertical position is the user's real scroll target.
-				const isPinned =
-					cell?.classList.contains('pinned-left') ||
-					cell?.classList.contains('pinned-right');
-				cell?.scrollIntoView({
-					behavior: 'instant',
-					block: 'nearest',
-					inline: isPinned ? undefined : 'nearest',
-				});
 			}
-		});
-	});
-
-	/**
-	 * Routes a right-click into either a "focus the cell that was
-	 * clicked" path (if the click landed on a cell other than the
-	 * current focus) or a "show copy options" context menu (when the
-	 * Table is configured with `allowCopy` and the platform exposes the
-	 * Clipboard API).
-	 */
-	function openContextMenu(e: MouseEvent) {
-		e.stopPropagation();
-
-		if (
-			(e.target as HTMLElement).tagName === 'INPUT' ||
-			(e.target as HTMLElement).closest('.select-wrapper') != null
-		) {
-			return;
+			element?.focus({ preventScroll: true });
+			// Skip horizontal scroll-into-view for pinned cells (see the
+			// focusEnd effect for the rationale).
+			const startCell = element?.closest("[role=\"cell\"]");
+			const isStartPinned = startCell?.classList.contains("pinned-left") || startCell?.classList.contains("pinned-right");
+			element?.scrollIntoView({
+				behavior: "instant",
+				block: "nearest",
+				inline: isStartPinned ? undefined : "nearest"
+			});
 		}
-
-		const clickedElement = document.activeElement?.id.split('-cell-')[1]?.split('-');
-
-		if (clickedElement) {
-			const [rowString, columnId] = clickedElement;
-			const row = parseInt(rowString);
-
-			if (
-				!tableContext.focusedColumnIds.has(columnId) ||
-				!tableContext.focusedRowIndices.has(row)
-			) {
-				const columnIndex = tableContext.columnDefs.find((it) => it.id === columnId)?.index;
-
-				// Use `!= null` rather than a truthy check so a column at
-				// memory index 0 (the leftmost column) is not silently
-				// rejected. The previous truthy check broke right-click
-				// copy on the first column.
-				// `!= null` (not truthy) so an index of 0 (leftmost column) is
-				// not silently rejected.
-				if (columnIndex != null) {
-					tableContext.moveFocus({
-						column: columnIndex,
-						row,
-						id: columnId,
-					});
-				}
+	});
+});
+// Scroll-into-view on focusEnd change. DOM work wrapped in `untrack` so
+// reading layout properties never re-establishes a reactive dependency.
+$effect(() => {
+	void tableContext.focusEnd;
+	void ref;
+	untrack(() => {
+		if (tableContext.focusEnd && ref) {
+			const { row, column: index } = tableContext.focusEnd;
+			const def = tableContext.columnDefs[index];
+			if (!def) {
+				return;
 			}
+			const cell = ref.querySelector(`#${tableContext.tableName}-cell-${row}-${def.id}`);
+			// Pinned cells are visually always on screen, but their true
+			// layout position is at their real column track — which for
+			// a right-pinned column in a wider-than-viewport table is
+			// offscreen. Calling `scrollIntoView({inline:'nearest'})`
+			// would then scroll the table sideways to surface the cell's
+			// underlying position, which the user sees as the table
+			// jumping when they click a pinned Actions button. The
+			// vertical (block) axis still scrolls normally because the
+			// row's vertical position is the user's real scroll target.
+			const isPinned = cell?.classList.contains("pinned-left") || cell?.classList.contains("pinned-right");
+			cell?.scrollIntoView({
+				behavior: "instant",
+				block: "nearest",
+				inline: isPinned ? undefined : "nearest"
+			});
 		}
-
-		// `window.Clipboard` may be absent in non-HTTPS contexts.
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		if (tableContext.allowCopy && window.Clipboard) {
-			e.preventDefault();
-
-			const options: Array<IContextMenuOption> = [
-				{
-					callback: () => {
-						tableContext.copyDataToClipboard().catch(devCatch);
-					},
-					text: 'Copy Selection',
-				},
-			];
-
-			if (tableContext.hasHighlightedItems) {
-				options.push({
-					callback: () => {
-						tableContext.copyHighlightedRowsToClipboard().catch(devCatch);
-					},
-					text: 'Copy Highlighted Rows',
+	});
+});
+/**
+* Routes a right-click into either a "focus the cell that was
+* clicked" path (if the click landed on a cell other than the
+* current focus) or a "show copy options" context menu (when the
+* Table is configured with `allowCopy` and the platform exposes the
+* Clipboard API).
+*/
+function openContextMenu(e) {
+	e.stopPropagation();
+	if (e.target.tagName === "INPUT" || e.target.closest(".select-wrapper") != null) {
+		return;
+	}
+	const clickedElement = document.activeElement?.id.split("-cell-")[1]?.split("-");
+	if (clickedElement) {
+		const [rowString, columnId] = clickedElement;
+		const row = parseInt(rowString);
+		if (!tableContext.focusedColumnIds.has(columnId) || !tableContext.focusedRowIndices.has(row)) {
+			const columnIndex = tableContext.columnDefs.find((it) => it.id === columnId)?.index;
+			// Use `!= null` rather than a truthy check so a column at
+			// memory index 0 (the leftmost column) is not silently
+			// rejected. The previous truthy check broke right-click
+			// copy on the first column.
+			// `!= null` (not truthy) so an index of 0 (leftmost column) is
+			// not silently rejected.
+			if (columnIndex != null) {
+				tableContext.moveFocus({
+					column: columnIndex,
+					row,
+					id: columnId
 				});
 			}
-
-			_openContextMenu(e, options).catch(devCatch);
 		}
 	}
-
-	/**
-	 * Closes the quick-filter popup and the actions-cell popup whenever
-	 * the user clicks somewhere that is not inside either floating UI.
-	 */
-	function handleClickOutside(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (target.isConnected) {
-			// A click inside an open Svelecte dropdown (marked with
-			// `data-scoria-portal-dropdown` by `dropdownPortal.ts`) is a
-			// logical extension of the trigger inside the quick-filter
-			// popup, so it must not close either floating popover.
-			const insidePortalDropdown = target.closest('[data-scoria-portal-dropdown]') != null;
-			if (
-				!insidePortalDropdown &&
-				target.closest('div.floating') == null &&
-				target.closest('div.stick-right') == null
-			) {
-				openedQuickFilterSelect.value = null;
-			}
-
-			if (!insidePortalDropdown && target.closest('div.slot-wrapper') == null) {
-				tableContext.shownActionsPopup = undefined;
-			}
+	// `window.Clipboard` may be absent in non-HTTPS contexts.
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+	if (tableContext.allowCopy && window.Clipboard) {
+		e.preventDefault();
+		const options = [{
+			callback: () => {
+				tableContext.copyDataToClipboard().catch(devCatch);
+			},
+			text: "Copy Selection"
+		}];
+		if (tableContext.hasHighlightedItems) {
+			options.push({
+				callback: () => {
+					tableContext.copyHighlightedRowsToClipboard().catch(devCatch);
+				},
+				text: "Copy Highlighted Rows"
+			});
 		}
+		_openContextMenu(e, options).catch(devCatch);
 	}
-
-	// nested table resizing
-	let isResizing = $state(false);
-	let remPxRatio = $state(0);
-	const minNestedHeight = $derived(20 * remPxRatio);
-
-	let nestedHeight = $state(0);
-	$effect.pre(() => {
-		if (!isResizing) {
-			nestedHeight = minNestedHeight;
+}
+/**
+* Closes the quick-filter popup and the actions-cell popup whenever
+* the user clicks somewhere that is not inside either floating UI.
+*/
+function handleClickOutside(e) {
+	const target = e.target;
+	if (target.isConnected) {
+		// A click inside an open Svelecte dropdown (marked with
+		// `data-scoria-portal-dropdown` by `dropdownPortal.ts`) is a
+		// logical extension of the trigger inside the quick-filter
+		// popup, so it must not close either floating popover.
+		const insidePortalDropdown = target.closest("[data-scoria-portal-dropdown]") != null;
+		if (!insidePortalDropdown && target.closest("div.floating") == null && target.closest("div.stick-right") == null) {
+			openedQuickFilterSelect.value = null;
 		}
-	});
-
-	let tableRef: HTMLDivElement | undefined = $state();
-	let mousedDownEmptySpace = $state(false);
-
-	onMount(() => {
-		remPxRatio = parseFloat(getComputedStyle(document.documentElement).fontSize);
-	});
-
-	$effect(() => {
-		if (!isResizing) {
-			return;
+		if (!insidePortalDropdown && target.closest("div.slot-wrapper") == null) {
+			tableContext.shownActionsPopup = undefined;
 		}
-		const onResize = (e: MouseEvent) => {
-			const sliderHeight = tableRef ? e.clientY - tableRef.getBoundingClientRect().top : 0;
-			nestedHeight = Math.max(sliderHeight, minNestedHeight);
-		};
-		window.addEventListener('mousemove', onResize);
-		return () => {
-			window.removeEventListener('mousemove', onResize);
-		};
-	});
-
-	function addOverrideResizeHandler() {
-		isResizing = true;
 	}
-
-	function removeOverrideResizeHandler() {
-		isResizing = false;
+}
+// nested table resizing
+let isResizing = $state(false);
+let remPxRatio = $state(0);
+const minNestedHeight = $derived(20 * remPxRatio);
+let nestedHeight = $state(0);
+$effect.pre(() => {
+	if (!isResizing) {
+		nestedHeight = minNestedHeight;
 	}
-
-	const usesLoading = $derived(
-		tableContext.paginationRepo &&
-			tableContext.paginationRepo.paginationType === PaginationType.Remote
-	);
-
-	const shouldUnfocusRemote = $derived(
-		usesLoading &&
-			tableContext.paginationRepo?.isLoading === false &&
-			tableContext.paginationRepo.paginationState.pageIndex !==
-				tableContext.paginationRepo.previouslyViewedPage
-	);
-
-	const shouldUnfocusLocal = $derived(
-		!usesLoading && tableContext.paginationRepo?.paginationState.pageIndex
-	);
-
-	$effect(() => {
-		if ((shouldUnfocusRemote || shouldUnfocusLocal) && unfocusRef) {
-			const el = unfocusRef;
-			untrack(() => {
-				tableContext.unfocus();
-				el.scrollTop = 0;
-			});
-		} else if (usesLoading && tableContext.paginationRepo?.isLoading === false) {
-			// refocus same element after a reload
-			// this does not break mutifocus
-			untrack(() => {
-				const fs = tableContext.focusStart;
-				if (!fs) {
-					return;
-				}
-				const idToFocusTo = `#${tableContext.tableName}-cell-${fs.row}-${fs.id}`;
-
-				tick()
-					.then(() => {
-						(document.querySelector(idToFocusTo) as HTMLElement | undefined)?.focus();
-					})
-					.catch(devCatch);
-			});
-		}
-	});
-
-	const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
-	const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
-	const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
-
-	// CSS Grid template for the table.
-	//
-	// - First track is the 20px highlight column (always present).
-	// - For each other column, the track depends on its `userResized`
-	//   flag and its declared width/maxWidth:
-	//
-	//   userResized = true                            → `${width}px`
-	//   userResized = false, maxWidth set             → `minmax(width, maxWidth)`
-	//   userResized = false, widthIsFixed             → `${width}px`
-	//   userResized = false, on per-kind default      → `minmax(width, 1fr)`
-	//
-	// This produces "specify widths for the columns you care about; let
-	// the rest fill the gap", matching the legacy `<table>` behaviour.
-	// Pinned and centre columns use the same rule so pinning a column
-	// does not change its width. Sticky-cell offsets read from
-	// `_columnRenderedWidths` (populated by TableHead's ResizeObserver).
-	const colsTemplate = $derived.by(() => {
-		void tableContext.columnSizing;
-		const track = (col: {
-			columnDef: {
-				width: number;
-				maxWidth?: number;
-				userResized: boolean;
-				widthIsFixed: boolean;
-			};
-		}) => {
-			if (col.columnDef.userResized) {
-				return `${col.columnDef.width}px`;
-			}
-			if (col.columnDef.maxWidth != null) {
-				return `minmax(${col.columnDef.width}px, ${col.columnDef.maxWidth}px)`;
-			}
-			if (col.columnDef.widthIsFixed) {
-				return `${col.columnDef.width}px`;
+});
+let tableRef = $state();
+let mousedDownEmptySpace = $state(false);
+onMount(() => {
+	remPxRatio = parseFloat(getComputedStyle(document.documentElement).fontSize);
+});
+$effect(() => {
+	if (!isResizing) {
+		return;
+	}
+	const onResize = (e) => {
+		const sliderHeight = tableRef ? e.clientY - tableRef.getBoundingClientRect().top : 0;
+		nestedHeight = Math.max(sliderHeight, minNestedHeight);
+	};
+	window.addEventListener("mousemove", onResize);
+	return () => {
+		window.removeEventListener("mousemove", onResize);
+	};
+});
+function addOverrideResizeHandler() {
+	isResizing = true;
+}
+function removeOverrideResizeHandler() {
+	isResizing = false;
+}
+const usesLoading = $derived(tableContext.paginationRepo && tableContext.paginationRepo.paginationType === PaginationType.Remote);
+const shouldUnfocusRemote = $derived(usesLoading && tableContext.paginationRepo?.isLoading === false && tableContext.paginationRepo.paginationState.pageIndex !== tableContext.paginationRepo.previouslyViewedPage);
+const shouldUnfocusLocal = $derived(!usesLoading && tableContext.paginationRepo?.paginationState.pageIndex);
+$effect(() => {
+	if ((shouldUnfocusRemote || shouldUnfocusLocal) && unfocusRef) {
+		const el = unfocusRef;
+		untrack(() => {
+			tableContext.unfocus();
+			el.scrollTop = 0;
+		});
+	} else if (usesLoading && tableContext.paginationRepo?.isLoading === false) {
+		// refocus same element after a reload
+		// this does not break mutifocus
+		untrack(() => {
+			const fs = tableContext.focusStart;
+			if (!fs) {
+				return;
 			}
-			return `minmax(${col.columnDef.width}px, 1fr)`;
-		};
-		const tracks: Array<string> = ['20px'];
-		for (const col of leftColumns) {
-			tracks.push(track(col));
-		}
-		for (const col of centreColumns) {
-			tracks.push(track(col));
+			const idToFocusTo = `#${tableContext.tableName}-cell-${fs.row}-${fs.id}`;
+			tick().then(() => {
+				document.querySelector(idToFocusTo)?.focus();
+			}).catch(devCatch);
+		});
+	}
+});
+const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
+const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
+const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
+// CSS Grid template for the table.
+//
+// - First track is the 20px highlight column (always present).
+// - For each other column, the track depends on its `userResized`
+//   flag and its declared width/maxWidth:
+//
+//   userResized = true                            → `${width}px`
+//   userResized = false, maxWidth set             → `minmax(width, maxWidth)`
+//   userResized = false, widthIsFixed             → `${width}px`
+//   userResized = false, on per-kind default      → `minmax(width, 1fr)`
+//
+// This produces "specify widths for the columns you care about; let
+// the rest fill the gap", matching the legacy `<table>` behaviour.
+// Pinned and centre columns use the same rule so pinning a column
+// does not change its width. Sticky-cell offsets read from
+// `_columnRenderedWidths` (populated by TableHead's ResizeObserver).
+const colsTemplate = $derived.by(() => {
+	void tableContext.columnSizing;
+	const track = (col) => {
+		if (col.columnDef.userResized) {
+			return `${col.columnDef.width}px`;
 		}
-		for (const col of rightColumns) {
-			tracks.push(track(col));
+		if (col.columnDef.maxWidth != null) {
+			return `minmax(${col.columnDef.width}px, ${col.columnDef.maxWidth}px)`;
 		}
-		return tracks.join(' ');
-	});
-
-	// Total rendered width of the pinned-left and pinned-right column
-	// stacks. Driven by `_columnRenderedWidths` so the values track actual
-	// layout rather than the declared `columnDef.width`. Exposed to CSS
-	// as `--pinned-left` / `--pinned-right`; the SCSS uses these in
-	// `scroll-padding-{left,right}` so `scrollIntoView` (called on keyboard
-	// nav and focus restore) keeps the focused cell out from behind the
-	// pinned columns. The 20px highlight column is always pinned-left.
-	const totalPinnedLeftWidth = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		let total = 20;
-		for (const col of leftColumns) {
-			total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
+		if (col.columnDef.widthIsFixed) {
+			return `${col.columnDef.width}px`;
 		}
-		return total;
-	});
-	const totalPinnedRightWidth = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		let total = 0;
-		for (const col of rightColumns) {
-			total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
+		return `minmax(${col.columnDef.width}px, 1fr)`;
+	};
+	const tracks = ["20px"];
+	for (const col of leftColumns) {
+		tracks.push(track(col));
+	}
+	for (const col of centreColumns) {
+		tracks.push(track(col));
+	}
+	for (const col of rightColumns) {
+		tracks.push(track(col));
+	}
+	return tracks.join(" ");
+});
+// Total rendered width of the pinned-left and pinned-right column
+// stacks. Driven by `_columnRenderedWidths` so the values track actual
+// layout rather than the declared `columnDef.width`. Exposed to CSS
+// as `--pinned-left` / `--pinned-right`; the SCSS uses these in
+// `scroll-padding-{left,right}` so `scrollIntoView` (called on keyboard
+// nav and focus restore) keeps the focused cell out from behind the
+// pinned columns. The 20px highlight column is always pinned-left.
+const totalPinnedLeftWidth = $derived.by(() => {
+	void tableContext._columnRenderedWidths.size;
+	let total = 20;
+	for (const col of leftColumns) {
+		total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
+	}
+	return total;
+});
+const totalPinnedRightWidth = $derived.by(() => {
+	void tableContext._columnRenderedWidths.size;
+	let total = 0;
+	for (const col of rightColumns) {
+		total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
+	}
+	return total;
+});
+// Single scroll listener for the shared scroll container, which is
+// also the host the row virtualiser registers against. The same
+// handler updates `hasScrolledPastHeader` / `hasContentBelowFooter`,
+// which drive the sticky-row drop shadows — shadows appear only when
+// there is actually content scrolled under the sticky strip.
+let hasScrolledPastHeader = $state(false);
+let hasContentBelowFooter = $state(false);
+// Measured rendered height of the sticky strip at the top of
+// `.datatable` (header row + quick-filter row when active). Drives
+// `scroll-padding-top` via `--sticky-top-height`, so `scrollIntoView`
+// (keyboard nav, focus restore) parks the focused cell below the
+// actual strip — a static `calc(var(--height) + Npx)` left a 1-2px
+// gap from sub-pixel rounding and borders, clipping the body row.
+let stickyTopHeight = $state(0);
+function recomputeScrollShadows() {
+	if (!tableRef) {
+		hasScrolledPastHeader = false;
+		hasContentBelowFooter = false;
+		return;
+	}
+	// `.datatable` has `overflow-x: auto`. Per the CSS spec, when one
+	// overflow axis is non-visible the other axis becomes auto too,
+	// so `.datatable` is itself the vertical scroll container when
+	// the table is constrained inside a fixed-height parent (the
+	// typical app shell). Detect internal scroll directly.
+	const internalScrolledPast = tableRef.scrollTop > 0;
+	const internalContentBelow = tableRef.scrollTop + tableRef.clientHeight < tableRef.scrollHeight - 1;
+	// Fall back to window-relative checks when the table is not
+	// constrained and the page itself is the scroll container.
+	const rect = tableRef.getBoundingClientRect();
+	const windowScrolledPast = rect.top < 0;
+	const windowContentBelow = rect.bottom > window.innerHeight;
+	hasScrolledPastHeader = internalScrolledPast || windowScrolledPast;
+	hasContentBelowFooter = internalContentBelow || windowContentBelow;
+}
+$effect(() => {
+	void tableRef;
+	void unfocusRef;
+	const handler = (e) => {
+		const el = e.currentTarget;
+		if (!el) {
+			return;
 		}
-		return total;
+		tableContext._virtualisation.registerScrollPosition(el.scrollTop, el.clientHeight);
+		// Refresh shadow flags on every internal scroll: when the table
+		// is the scroll container, body scroll never reaches the window
+		// listener and the shadow flags would otherwise never flip.
+		recomputeScrollShadows();
+	};
+	const elements = [];
+	if (tableRef) {
+		elements.push(tableRef);
+	}
+	if (unfocusRef && unfocusRef !== tableRef) {
+		elements.push(unfocusRef);
+	}
+	for (const el of elements) {
+		el.addEventListener("scroll", handler, { passive: true });
+	}
+	const primary = tableRef ?? unfocusRef;
+	if (primary) {
+		tableContext._virtualisation.registerScrollPosition(primary.scrollTop, primary.clientHeight);
+	}
+	// Window scroll + resize cover the unconstrained case where the
+	// page itself scrolls; `recomputeScrollShadows` handles both.
+	const onWindow = () => {
+		recomputeScrollShadows();
+	};
+	window.addEventListener("scroll", onWindow, { passive: true });
+	window.addEventListener("resize", onWindow, { passive: true });
+	// Content-height changes (row add/remove, pagination, expand
+	// toggled) can flip the shadow flags without any user scroll, so
+	// re-evaluate on any intrinsic-height change of the table.
+	const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+		recomputeScrollShadows();
 	});
-
-	// Single scroll listener for the shared scroll container, which is
-	// also the host the row virtualiser registers against. The same
-	// handler updates `hasScrolledPastHeader` / `hasContentBelowFooter`,
-	// which drive the sticky-row drop shadows — shadows appear only when
-	// there is actually content scrolled under the sticky strip.
-	let hasScrolledPastHeader = $state(false);
-	let hasContentBelowFooter = $state(false);
-
-	// Measured rendered height of the sticky strip at the top of
-	// `.datatable` (header row + quick-filter row when active). Drives
-	// `scroll-padding-top` via `--sticky-top-height`, so `scrollIntoView`
-	// (keyboard nav, focus restore) parks the focused cell below the
-	// actual strip — a static `calc(var(--height) + Npx)` left a 1-2px
-	// gap from sub-pixel rounding and borders, clipping the body row.
-	let stickyTopHeight: number = $state(0);
-
-	function recomputeScrollShadows(): void {
+	if (ro && tableRef) {
+		ro.observe(tableRef);
+	}
+	// Measure the actual rendered height of the sticky strip (header +
+	// quick-filter row when active) so `scroll-padding-top` matches
+	// it to the pixel.
+	const measureStickyTop = () => {
 		if (!tableRef) {
-			hasScrolledPastHeader = false;
-			hasContentBelowFooter = false;
 			return;
 		}
-		// `.datatable` has `overflow-x: auto`. Per the CSS spec, when one
-		// overflow axis is non-visible the other axis becomes auto too,
-		// so `.datatable` is itself the vertical scroll container when
-		// the table is constrained inside a fixed-height parent (the
-		// typical app shell). Detect internal scroll directly.
-		const internalScrolledPast = tableRef.scrollTop > 0;
-		const internalContentBelow =
-			tableRef.scrollTop + tableRef.clientHeight < tableRef.scrollHeight - 1;
-		// Fall back to window-relative checks when the table is not
-		// constrained and the page itself is the scroll container.
-		const rect = tableRef.getBoundingClientRect();
-		const windowScrolledPast = rect.top < 0;
-		const windowContentBelow = rect.bottom > window.innerHeight;
-		hasScrolledPastHeader = internalScrolledPast || windowScrolledPast;
-		hasContentBelowFooter = internalContentBelow || windowContentBelow;
+		const headerRow = tableRef.querySelector(".datatable-row.header-row");
+		const filterRow = tableRef.querySelector(".datatable-row.quick-filter-row");
+		stickyTopHeight = (headerRow?.offsetHeight ?? 0) + (filterRow?.offsetHeight ?? 0);
+	};
+	const stickyRo = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measureStickyTop);
+	if (stickyRo && tableRef) {
+		// Observe the scroll host so any change inside (mode
+		// toggle, rows added, etc.) re-measures on the next frame.
+		stickyRo.observe(tableRef);
 	}
-
-	$effect(() => {
-		void tableRef;
-		void unfocusRef;
-		const handler = (e: Event): void => {
-			const el = e.currentTarget as HTMLElement | null;
-			if (!el) {
-				return;
-			}
-			tableContext._virtualisation.registerScrollPosition(el.scrollTop, el.clientHeight);
-			// Refresh shadow flags on every internal scroll: when the table
-			// is the scroll container, body scroll never reaches the window
-			// listener and the shadow flags would otherwise never flip.
-			recomputeScrollShadows();
-		};
-		const elements: Array<HTMLElement> = [];
-		if (tableRef) {
-			elements.push(tableRef);
-		}
-		if (unfocusRef && unfocusRef !== tableRef) {
-			elements.push(unfocusRef);
-		}
+	// Initial measurement so the very first focus / arrow-key
+	// navigation lands below the strip without waiting for the
+	// observer's first frame.
+	measureStickyTop();
+	recomputeScrollShadows();
+	return () => {
 		for (const el of elements) {
-			el.addEventListener('scroll', handler, { passive: true });
-		}
-		const primary = tableRef ?? unfocusRef;
-		if (primary) {
-			tableContext._virtualisation.registerScrollPosition(primary.scrollTop, primary.clientHeight);
-		}
-
-		// Window scroll + resize cover the unconstrained case where the
-		// page itself scrolls; `recomputeScrollShadows` handles both.
-		const onWindow = (): void => {
-			recomputeScrollShadows();
-		};
-		window.addEventListener('scroll', onWindow, { passive: true });
-		window.addEventListener('resize', onWindow, { passive: true });
-
-		// Content-height changes (row add/remove, pagination, expand
-		// toggled) can flip the shadow flags without any user scroll, so
-		// re-evaluate on any intrinsic-height change of the table.
-		const ro =
-			typeof ResizeObserver === 'undefined'
-				? null
-				: new ResizeObserver(() => {
-						recomputeScrollShadows();
-					});
-		if (ro && tableRef) {
-			ro.observe(tableRef);
-		}
-
-		// Measure the actual rendered height of the sticky strip (header +
-		// quick-filter row when active) so `scroll-padding-top` matches
-		// it to the pixel.
-		const measureStickyTop = (): void => {
-			if (!tableRef) {
-				return;
-			}
-			const headerRow = tableRef.querySelector('.datatable-row.header-row') as HTMLElement | null;
-			const filterRow = tableRef.querySelector(
-				'.datatable-row.quick-filter-row'
-			) as HTMLElement | null;
-			stickyTopHeight = (headerRow?.offsetHeight ?? 0) + (filterRow?.offsetHeight ?? 0);
-		};
-		const stickyRo =
-			typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measureStickyTop);
-		if (stickyRo && tableRef) {
-			// Observe the scroll host so any change inside (mode
-			// toggle, rows added, etc.) re-measures on the next frame.
-			stickyRo.observe(tableRef);
+			el.removeEventListener("scroll", handler);
 		}
-		// Initial measurement so the very first focus / arrow-key
-		// navigation lands below the strip without waiting for the
-		// observer's first frame.
-		measureStickyTop();
-
-		recomputeScrollShadows();
-
-		return () => {
-			for (const el of elements) {
-				el.removeEventListener('scroll', handler);
-			}
-			window.removeEventListener('scroll', onWindow);
-			window.removeEventListener('resize', onWindow);
-			ro?.disconnect();
-			stickyRo?.disconnect();
-		};
-	});
-</script>
-
-<svelte:window
-	onmouseup={(e: MouseEvent) => {
-		if (
-			// if it's not a click on an item in the context menu
-			!(e.target as HTMLElement | undefined)?.classList.contains('context-menu-item') &&
-			// if it's outside the table or inside the empty space of the table
-			(e.target === unfocusRef ||
-				((e.target as HTMLElement | undefined)?.closest('.table-wrapper') == null &&
-					mousedDownEmptySpace))
-		) {
-			tableContext.unfocus();
-		}
-		mousedDownEmptySpace = false;
-
-		if (tableContext.isMousingDown) {
-			tableContext.isMousingDown = false;
-		}
-
-		removeOverrideResizeHandler();
-	}}
-	onclick={(e: MouseEvent) => {
-		handleClickOutside(e);
-	}}
-	onmousedown={(e: MouseEvent) => {
-		mousedDownEmptySpace =
-			e.target === unfocusRef || (e.target as HTMLElement).closest('.table-wrapper') == null;
-	}}
-/>
-
-<div
-	class="grid"
-	class:nested
-	style="--show-top-shadow: {hasScrolledPastHeader
-		? 1
-		: 0}; --show-bottom-shadow: {hasContentBelowFooter ? 1 : 0};"
->
-	{#if tableContext.dataRepo.isLoading}
-		<LoadingOverlay
-			absolute
-			borderRadius={cssLength('4px')}
-			message={tableContext.dataRepo.loadingMessage}
-		/>
-	{/if}
-
-	<div
-		class="horizontal-bar"
-		class:border={tableContext.toolbarPosition === ToolbarPosition.Top}
-	>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Top}
-			<TableHorizontalBar />
-		{/if}
-	</div>
-
-	<div
-		class="sidebar-wrapper sidebar-wrapper-left"
-		class:nested
-		style="--nested-height: {nestedHeight}px;"
-	>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Left}
-			<div class="sidebar toolbar-left">
-				<TableSidebar />
-			</div>
-		{/if}
-	</div>
-	<div
-		class="sidebar-wrapper sidebar-wrapper-right"
-		class:nested
-		style="--nested-height: {nestedHeight}px;"
-	>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Right}
-			<div class="sidebar toolbar-right">
-				<TableSidebar />
-			</div>
-		{/if}
-	</div>
-
-	<div class="footer">
-		{#if tableContext.displayFooter}
-			<TableFooter />
-		{/if}
-	</div>
-
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		bind:this={tableRef}
-		class="datatable"
-		class:nested
-		class:compact={tableContext.isCompact}
-		class:quick-filtering={tableContext.showQuickFiltering}
-		onkeydown={tableContext.handleTdKeydown}
-		style="--pinned-left: {totalPinnedLeftWidth}px; --pinned-right: {totalPinnedRightWidth}px; --sticky-top-height: {stickyTopHeight}px;"
-	>
-		<div
-			class="flex_table"
-			bind:this={ref}
-			class:nested
-		>
-			<div
-				bind:this={unfocusRef}
-				class="table-wrapper"
-				oncontextmenu={openContextMenu}
-			>
-				<div
-					role="table"
-					class="datatable-grid"
-					style="--cols: {colsTemplate};"
-				>
-					<TableHead />
-					<TableBody />
-				</div>
-			</div>
-		</div>
-
-		{#if nested}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class:isResizing
-				class="resizer"
-				onmousedown={(e) => {
-					e.preventDefault();
-					addOverrideResizeHandler();
-				}}
-			></div>
-		{/if}
-	</div>
-</div>
-
+		window.removeEventListener("scroll", onWindow);
+		window.removeEventListener("resize", onWindow);
+		ro?.disconnect();
+		stickyRo?.disconnect();
+	};
+});
+</script>
+
+<svelte:window
+	onmouseup={(e: MouseEvent) => {
+		if (
+			// if it's not a click on an item in the context menu
+			!(e.target as HTMLElement | undefined)?.classList.contains('context-menu-item') &&
+			// if it's outside the table or inside the empty space of the table
+			(e.target === unfocusRef ||
+				((e.target as HTMLElement | undefined)?.closest('.table-wrapper') == null &&
+					mousedDownEmptySpace))
+		) {
+			tableContext.unfocus();
+		}
+		mousedDownEmptySpace = false;
+
+		if (tableContext.isMousingDown) {
+			tableContext.isMousingDown = false;
+		}
+
+		removeOverrideResizeHandler();
+	}}
+	onclick={(e: MouseEvent) => {
+		handleClickOutside(e);
+	}}
+	onmousedown={(e: MouseEvent) => {
+		mousedDownEmptySpace =
+			e.target === unfocusRef || (e.target as HTMLElement).closest('.table-wrapper') == null;
+	}}
+/>
+
+<div
+	class="grid"
+	class:nested
+	style="--show-top-shadow: {hasScrolledPastHeader
+		? 1
+		: 0}; --show-bottom-shadow: {hasContentBelowFooter ? 1 : 0};"
+>
+	{#if tableContext.dataRepo.isLoading}
+		<LoadingOverlay
+			absolute
+			borderRadius={cssLength('4px')}
+			message={tableContext.dataRepo.loadingMessage}
+		/>
+	{/if}
+
+	<div
+		class="horizontal-bar"
+		class:border={tableContext.toolbarPosition === ToolbarPosition.Top}
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Top}
+			<TableHorizontalBar />
+		{/if}
+	</div>
+
+	<div
+		class="sidebar-wrapper sidebar-wrapper-left"
+		class:nested
+		style="--nested-height: {nestedHeight}px;"
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Left}
+			<div class="sidebar toolbar-left">
+				<TableSidebar />
+			</div>
+		{/if}
+	</div>
+	<div
+		class="sidebar-wrapper sidebar-wrapper-right"
+		class:nested
+		style="--nested-height: {nestedHeight}px;"
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Right}
+			<div class="sidebar toolbar-right">
+				<TableSidebar />
+			</div>
+		{/if}
+	</div>
+
+	<div class="footer">
+		{#if tableContext.displayFooter}
+			<TableFooter />
+		{/if}
+	</div>
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={tableRef}
+		class="datatable"
+		class:nested
+		class:compact={tableContext.isCompact}
+		class:quick-filtering={tableContext.showQuickFiltering}
+		onkeydown={tableContext.handleTdKeydown}
+		style="--pinned-left: {totalPinnedLeftWidth}px; --pinned-right: {totalPinnedRightWidth}px; --sticky-top-height: {stickyTopHeight}px;"
+	>
+		<div
+			class="flex_table"
+			bind:this={ref}
+			class:nested
+		>
+			<div
+				bind:this={unfocusRef}
+				class="table-wrapper"
+				oncontextmenu={openContextMenu}
+			>
+				<div
+					role="table"
+					class="datatable-grid"
+					style="--cols: {colsTemplate};"
+				>
+					<TableHead />
+					<TableBody />
+				</div>
+			</div>
+		</div>
+
+		{#if nested}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class:isResizing
+				class="resizer"
+				onmousedown={(e) => {
+					e.preventDefault();
+					addOverrideResizeHandler();
+				}}
+			></div>
+		{/if}
+	</div>
+</div>
+
 <style>div.grid {
   border-radius: 4px;
   display: grid;
@@ -840,4 +708,4 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   text-align: left;
   min-width: max-content;
   isolation: isolate;
-}</style>
+}</style>