@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Table/Table.svelte

@@ -1,494 +1,686 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import {
-		ContextMenuContext,
-		type IContextMenuOption,
-	} from '../../Contexts/ContextMenuContext.svelte';
-	import { devCatch, refWrapper } from '../../Helpers/Helpers.svelte';
-	import type { RefWrapper } from '../../Types/Internal/RefWrapper.js';
-	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
-	import LoadingOverlay from '../LoadingOverlay.svelte';
-	import type { HeightData } from './Body/HeightData.js';
-	import { shownPopup } from './Body/Rows/Columns/ActionsCell.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;
-			}>;
-		}
-	}
-
-	export interface TableProps<T extends object, IdType extends Primitive> {
-		readonly tableContext: TableContext<T, IdType>;
-		nested?: boolean;
-	}
-
-	export const quickFilterContextIdentifier: symbol = Symbol();
-
-	const openedQuickFilterSelect = refWrapper(null);
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,IdType extends Primitive"
->
-	const { nested = false, tableContext }: TableProps<T, IdType> = $props();
-
-	// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
-	// svelte-ignore state_referenced_locally
-	setContext(TableContext.identifier, tableContext);
-
-	const { openContextMenu: _openContextMenu } = getContext<ContextMenuContext>(
-		ContextMenuContext.identifier
-	);
-
-	let ref: HTMLDivElement | undefined = $state();
-	let unfocusRef: HTMLDivElement | undefined = $state();
-
-	setContext(quickFilterContextIdentifier, openedQuickFilterSelect);
-
-	$effect(() => {
-		void tableContext.focusStart;
-		void ref;
-		untrack(() => {
-			if (tableContext.focusStart && ref) {
-				const { row, column: index } = tableContext.focusStart;
-				let element = ref.querySelector(
-					`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].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 });
-				element?.scrollIntoView({
-					behavior: 'instant',
-					block: 'nearest',
-					inline: 'nearest',
-				});
-			}
-		});
-	});
-
-	$effect(() => {
-		if (tableContext.focusEnd && ref) {
-			const { row, column: index } = tableContext.focusEnd;
-			const cell = ref.querySelector(
-				`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].id}`
-			) as HTMLElement | undefined;
-
-			cell?.scrollIntoView({
-				behavior: 'instant',
-				block: 'nearest',
-				inline: 'nearest',
-			});
-		}
-	});
-
-	function openContextMenu(e: MouseEvent) {
-		e.stopPropagation();
-
-		if (
-			(e.target as HTMLElement).tagName === 'INPUT' ||
-			(e.target as HTMLElement).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;
-
-				if (columnIndex) {
-					tableContext.moveFocus({
-						column: columnIndex,
-						row,
-						id: columnId,
-					});
-				}
-			}
-		}
-
-		// this may not exist in http 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',
-				});
-			}
-
-			_openContextMenu(e, options).catch(devCatch);
-		}
-	}
-
-	function handleClickOutside(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (target.isConnected) {
-			if (target.closest('div.floating') == null && target.closest('div.stick-right') == null) {
-				openedQuickFilterSelect.value = null;
-			}
-
-			if (target.closest('div.slot-wrapper') == null) {
-				// svelte type gen/eslint miscommunication
-				(shownPopup as RefWrapper<symbol | undefined>).value = undefined;
-			}
-		}
-	}
-
-	// nested table resizing
-	let isResizing = $state(false);
-	let remPxRatio = $state(0);
-	const minNestedHeight = $derived(20 * remPxRatio);
-
-	// HACK please figure this one out
-	let nestedHeight = $derived(minNestedHeight);
-
-	let tableRef: HTMLDivElement | undefined = undefined;
-	let mousedDownEmptySpace = $state(false);
-
-	onMount(() => {
-		remPxRatio = parseFloat(getComputedStyle(document.documentElement).fontSize);
-	});
-
-	function addOverrideResizeHandler() {
-		isResizing = true;
-		window.addEventListener('mousemove', onResize);
-	}
-
-	function onResize(e: MouseEvent) {
-		const sliderHeight = tableRef ? e.clientY - tableRef.getBoundingClientRect().top : 0;
-		nestedHeight = Math.max(sliderHeight, minNestedHeight);
-	}
-
-	function removeOverrideResizeHandler() {
-		isResizing = false;
-		window.removeEventListener('mousemove', onResize);
-	}
-
-	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) {
-			untrack(() => {
-				tableContext.unfocus();
-			});
-			unfocusRef.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(() => {
-						if (idToFocusTo) {
-							(document.querySelector(idToFocusTo) as HTMLTableCellElement | undefined)?.focus();
-						}
-					})
-					.catch(devCatch);
-			});
-		}
-	});
-
-	const leftTotalSize = $derived(tableContext.table.getLeftTotalSize());
-	const centreTotalSize = $derived(tableContext.table.getCenterTotalSize());
-	const rightTotalSize = $derived(tableContext.table.getRightTotalSize());
-
-	const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
-	const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
-	const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
-
-	const appropriateSide = $derived.by(() => {
-		if (leftColumns.length > 0) {
-			return 'left';
-		} else if (rightColumns.length != tableContext.columnDefs.length) {
-			return 'centre';
-		} else {
-			return 'right';
-		}
-	});
-
-	type SvelteTableElement = {
-		rowHeights: RefWrapper<Array<number>>;
-	};
-
-	let leftTable: SvelteTableElement | undefined = $state();
-	let centreTable: SvelteTableElement | undefined = $state();
-	let rightTable: SvelteTableElement | undefined = $state();
-
-	const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
-		if (!leftTable || !centreTable || !rightTable) {
-			return [];
-		}
-
-		// console.debug(`got refs for all tables`);
-		const centre = centreTable.rowHeights.value;
-		const right = rightTable.rowHeights.value;
-
-		return leftTable.rowHeights.value.map((_leftHeight, index) => {
-			const leftHeight = _leftHeight || 0;
-			const centreHeight = centre[index] || 0;
-			const rightHeight = right[index] || 0;
-
-			const maxHeight = Math.max(leftHeight, centreHeight, rightHeight);
-			const applyTo: HeightData<T>['applyTo'] = [];
-
-			if (leftHeight < maxHeight) {
-				// console.debug(`left (${leftHeight}) was lower than max (${maxHeight})`);
-				applyTo.push('left');
-			}
-			if (centreHeight < maxHeight) {
-				// console.debug(`centre (${centreHeight}) was lower than max (${maxHeight})`);
-				applyTo.push('centre');
-			}
-			if (rightHeight < maxHeight) {
-				// console.debug(`right (${rightHeight}) was lower than max (${maxHeight})`);
-				applyTo.push('right');
-			}
-
-			return {
-				index,
-				applyTo,
-				maxHeight,
-			};
-		});
-	});
-</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
->
-	{#if tableContext.dataRepo.isLoading}
-		<LoadingOverlay
-			absolute
-			borderRadius="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}
-	>
-		<div
-			class="flex_table"
-			bind:this={ref}
-			class:nested
-		>
-			<div
-				bind:this={unfocusRef}
-				class="table-wrapper"
-				oncontextmenu={openContextMenu}
-			>
-				<!-- {#if leftTotalSize > 0} -->
-				<table
-					class="datatable__table left"
-					style="min-width: {leftTotalSize}px"
-				>
-					<TableHead
-						showHighlight={leftTotalSize > 0}
-						side="left"
-					/>
-					<TableBody
-						includeHighlight={appropriateSide == 'left'}
-						columns={leftColumns}
-						side="left"
-						heights={totalRowSizes}
-						bind:this={leftTable}
-					/>
-				</table>
-				<!-- {/if} -->
-
-				<!-- {#if centreTotalSize > 0} -->
-
-				<table
-					class="datatable__table centre"
-					style="min-width: {centreTotalSize}px"
-				>
-					<TableHead
-						showHighlight={leftTotalSize == 0}
-						side="centre"
-					/>
-					<TableBody
-						includeHighlight={appropriateSide == 'centre'}
-						columns={centreColumns}
-						side="centre"
-						heights={totalRowSizes}
-						bind:this={centreTable}
-					/>
-				</table>
-				<!-- {/if} -->
-
-				<!-- {#if rightTotalSize > 0} -->
-				<table
-					class="datatable__table right"
-					style="min-width: {rightTotalSize}px"
-				>
-					<TableHead
-						showHighlight={false}
-						side="right"
-					/>
-					<TableBody
-						includeHighlight={appropriateSide == 'right'}
-						columns={rightColumns}
-						side="right"
-						heights={totalRowSizes}
-						bind:this={rightTable}
-					/>
-				</table>
-				<!-- {/if} -->
-			</div>
-
-			<!-- TODO add filter callbacks -->
-		</div>
-
-		{#if nested}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class:isResizing
-				class="resizer"
-				onmousedown={(e) => {
-					e.preventDefault();
-					addOverrideResizeHandler();
-				}}
-			></div>
-		{/if}
-	</div>
-</div>
-
+<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;
+	}
+
+	/**
+	 * 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 the caller
+	// passed. Consumers pass `table` (the structured instance); the
+	// internal `NestedTable` passes `tableContext` directly. Exactly one
+	// must be present; throw cleanly otherwise so the failure mode is
+	// obvious rather than a downstream null-deref. Result is bound to a
+	// `tableContext` const so the existing 30+ references in this file
+	// keep resolving without per-site renames.
+	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 query/focus DOM work runs
+	// inside `untrack` so a future selector tweak that reads reactive
+	// state (e.g. document.activeElement) does not retrigger this
+	// effect on every focus change.
+	$effect(() => {
+		void tableContext.focusStart;
+		void ref;
+		untrack(() => {
+			if (tableContext.focusStart && ref) {
+				const { row, column: index } = tableContext.focusStart;
+				let element = ref.querySelector(
+					`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].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 });
+				element?.scrollIntoView({
+					behavior: 'instant',
+					block: 'nearest',
+					inline: 'nearest',
+				});
+			}
+		});
+	});
+
+	// Scroll-into-view on focusEnd change. The DOM work is wrapped in
+	// untrack so reading layout properties from the queried cell never
+	// silently re-establishes a reactive dependency.
+	$effect(() => {
+		void tableContext.focusEnd;
+		void ref;
+		untrack(() => {
+			if (tableContext.focusEnd && ref) {
+				const { row, column: index } = tableContext.focusEnd;
+				const cell = ref.querySelector(
+					`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].id}`
+				) as HTMLElement | undefined;
+
+				cell?.scrollIntoView({
+					behavior: 'instant',
+					block: 'nearest',
+					inline: '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;
+		}
+
+		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.
+				if (columnIndex != null) {
+					tableContext.moveFocus({
+						column: columnIndex,
+						row,
+						id: columnId,
+					});
+				}
+			}
+		}
+
+		// this may not exist in http 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',
+				});
+			}
+
+			_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 in a teleported Svelecte dropdown (see
+			// `Helpers/dropdownPortal.ts`) is a logical extension of
+			// the trigger inside the quick-filter popup, so it must
+			// not close either floating popover. The portal helper
+			// sets `data-scoria-portal-dropdown` on the dropdown
+			// while it is teleported to `document.body`.
+			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;
+			}
+		}
+	}
+
+	// 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;
+		}
+	});
+
+	let tableRef: HTMLDivElement | undefined = $state();
+	let mousedDownEmptySpace = $state(false);
+
+	onMount(() => {
+		remPxRatio = parseFloat(getComputedStyle(document.documentElement).fontSize);
+	});
+
+	$effect(() => {
+		if (!isResizing) {
+			return;
+		}
+		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;
+	}
+
+	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());
+
+	const visibleColumns = $derived([...leftColumns, ...centreColumns, ...rightColumns]);
+
+	// CSS Grid template for the table.
+	//
+	// - First track is the highlight column (always present, fixed at
+	//   20px to match the existing visual).
+	// - Each other track uses one of two strategies based on the
+	//   column's `userResized` flag:
+	//   - `userResized = false` (default): `minmax(width, 1fr)`. The
+	//     column flexes to share the row's remaining horizontal space
+	//     so the grid fills the container, and it automatically takes
+	//     back any space a sibling column gives up when shrunk - this
+	//     means the table never ends up narrower than its container
+	//     while any column is still in the flexible set.
+	//   - `userResized = true`: `${width}px` (fixed). The column sits
+	//     at exactly the size the user dragged it to, and dragging the
+	//     handle again only changes this column - other user-resized
+	//     columns keep their explicit widths and non-resized columns
+	//     just adjust their flex share.
+	// - Pinned and centre columns use the same per-column rule so
+	//   toggling a column's pin state does not change its width.
+	// - Sticky-cell offsets are read from `_columnRenderedWidths`
+	//   (populated by TableHead's ResizeObserver), which gives
+	//   accurate sticky positions in both states.
+	const colsTemplate = $derived.by(() => {
+		void tableContext.columnSizing;
+		const track = (col: { columnDef: { width: number; userResized: boolean } }) =>
+			col.columnDef.userResized
+				? `${col.columnDef.width}px`
+				: `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));
+		}
+		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` (populated by
+	// TableHead's ResizeObserver) so the values track actual layout,
+	// not the declared `columnDef.width`. Exposed to CSS via
+	// `--pinned-left` / `--pinned-right` on `.datatable`; the SCSS
+	// then uses them in `scroll-padding-left` / `scroll-padding-right`
+	// so that `scrollIntoView` (called by keyboard arrow navigation
+	// and tab focus restore) keeps the focused cell out from behind
+	// the pinned columns. The highlight column is always 20px and
+	// always pinned-left when present, so it is added to the left
+	// total unconditionally.
+	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;
+	});
+
+	// Phase 7.4 row virtualisation - wire the single scroll listener
+	// for the shared scroll container. The single grid container is
+	// the scroll host now (the previous three-table siblings have
+	// collapsed into one).
+	//
+	// The same handler also drives `hasScrolledPastHeader` /
+	// `hasContentBelowFooter`, which feed the CSS variables that
+	// gate the sticky-row drop shadows. The shadows only appear when
+	// there is actually content scrolled under the relevant sticky
+	// row, so a freshly mounted (or fully-in-viewport) table shows no
+	// shadows.
+	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` on
+	// `.datatable`, so `scrollIntoView` (keyboard arrow navigation,
+	// focus restore) parks the focused cell below the actual strip
+	// even at sub-pixel rounding and any borders. Using `calc(var(--height) + 61px)`
+	// statically left a 1-2px gap that hid the top edge of the
+	// first visible body row when navigating to it.
+	let stickyTopHeight: number = $state(0);
+
+	function recomputeScrollShadows(): void {
+		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 for the sticky header / footer when the table
+		// is constrained inside a fixed-height parent (the typical
+		// app shell). Detect that internal scroll directly.
+		const internalScrolledPast = tableRef.scrollTop > 0;
+		const internalContentBelow =
+			tableRef.scrollTop + tableRef.clientHeight < tableRef.scrollHeight - 1;
+		// Fall back to window-relative checks for the case where the
+		// table is not constrained and the page itself is the scroll
+		// container (e.g. a story with no wrapper height).
+		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: Event): void => {
+			const el = e.currentTarget as HTMLElement | null;
+			if (!el) {
+				return;
+			}
+			tableContext._virtualisation.registerScrollPosition(el.scrollTop, el.clientHeight);
+			// Internal scroll inside `.datatable` is the sticky-context
+			// for the header / footer in the constrained-height case,
+			// so the shadow flags need to refresh on every internal
+			// scroll, not just window scroll. Without this, scrolling
+			// the table body never flips `hasScrolledPastHeader` /
+			// `hasContentBelowFooter` and the shadows never appear.
+			recomputeScrollShadows();
+		};
+		const elements: Array<HTMLElement> = [];
+		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-level scroll + resize cover the case where the table
+		// is not constrained and the page itself scrolls instead.
+		// `recomputeScrollShadows` checks both internal and window-level
+		// scroll position so either path flips the shadow flags.
+		const onWindow = (): void => {
+			recomputeScrollShadows();
+		};
+		window.addEventListener('scroll', onWindow, { passive: true });
+		window.addEventListener('resize', onWindow, { passive: true });
+
+		// Content-height changes (rows added / removed, pagination
+		// turning the page, expand toggled) flip whether there is
+		// anything below the footer or above the header, so shadow
+		// flags need to re-evaluate any time the table's intrinsic
+		// height changes - not just on actual user scroll.
+		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 row + quick-filter row when active) so
+		// `scroll-padding-top` matches it to the pixel. Static
+		// `calc(var(--height) + 61px)` ignored the header's
+		// border-bottom plus any sub-pixel rounding, leaving the
+		// first visible body row 1-2px behind the strip when
+		// `scrollIntoView` parked it at the top edge.
+		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);
+		}
+		// 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>
+
 <style>div.grid {
   border-radius: 4px;
   display: grid;
@@ -552,14 +744,6 @@ div.resizer.isResizing {
   opacity: 1;
 }
 
-.left {
-  border-right: solid 2px #3a4952;
-}
-
-.right {
-  border-left: solid 2px #3a4952;
-}
-
 div.sidebar-wrapper {
   display: flex;
   flex-flow: row nowrap;
@@ -604,7 +788,6 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   position: relative;
   flex-grow: 2;
   max-height: 100%;
-  scroll-padding-top: calc(3rem + 0px);
 }
 
 .datatable {
@@ -621,6 +804,9 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   height: 100%;
   flex-grow: 1;
   --progress-bar-radius: 18px;
+  scroll-padding-top: var(--sticky-top-height, 0px);
+  scroll-padding-left: var(--pinned-left, 0px);
+  scroll-padding-right: var(--pinned-right, 0px);
 }
 .datatable.quick-filtering {
   --quick-filter-height: 3rem;
@@ -638,23 +824,12 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   max-height: var(--nested-height, 20rem);
 }
 
-.datatable__table {
-  table-layout: fixed;
-  border-collapse: collapse;
-  border-spacing: 0;
+.datatable-grid {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 2;
+  width: 100%;
   text-align: left;
-}
-.datatable__table.left {
-  position: sticky;
-  z-index: 2;
-  left: 0;
-}
-.datatable__table.centre {
-  z-index: 1;
-  flex-grow: 10;
-}
-.datatable__table.right {
-  position: sticky;
-  z-index: 2;
-  right: 0;
-}</style>
+  min-width: max-content;
+  isolation: isolate;
+}</style>