@lavalogic/scoria 0.37.44 → 0.37.45

package/dist/Components/Table/Table.svelte

@@ -1,747 +1,694 @@
-<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;
-				// `columnDefs[index]` can be undefined when the focus
-				// coordinate references a memory slot that no longer
-				// exists (e.g. inner expand tables remount with a
-				// different column count, or a preset hydration races
-				// the column-layout init). Guard before destructuring
-				// so an out-of-range index degrades to "no focus
-				// restored" instead of a hard crash.
-				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 });
-				// Same pinned-cell horizontal-scroll skip as the focusEnd
-				// effect below. Sticky-pinned cells are always visually
-				// in view, but their underlying layout position is at
-				// their real column track, so an unconditional
-				// `inline: 'nearest'` here scrolls the table sideways
-				// every time focus lands inside a pinned column (e.g.
-				// every click on a right-pinned Actions button).
-				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',
-				});
-			}
-		});
-	});
-
-	// 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;
-				// Same out-of-range guard as the focusStart effect above.
-				const def = tableContext.columnDefs[index];
-				if (!def) {
-					return;
-				}
-				const cell = ref.querySelector(
-					`#${tableContext.tableName}-cell-${row}-${def.id}`
-				) as HTMLElement | undefined;
-
-				// Skip horizontal scroll-into-view for pinned (sticky)
-				// cells. Sticky positioning makes the cell visually
-				// "always on screen", but its true layout position is at
-				// its real column track - which for a right-pinned column
-				// in a wider-than-viewport table is offscreen. Asking the
-				// browser to `scrollIntoView({inline: 'nearest'})` then
-				// scrolls the table horizontally to bring the cell's
-				// underlying position into view, which is the user-facing
-				// "table jumps right when I click the Actions button"
-				// bug. The vertical block axis still scrolls because the
-				// row's vertical position is the user's actual 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;
-		}
-
-		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());
-
-	// 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`: track depends on whether the consumer
-	//     supplied an explicit `width` and / or `maxWidth`:
-	//       - `widthIsFixed` (consumer-supplied `width`, no `maxWidth`):
-	//         fixed `${width}px` track. Stays at exactly that pixel value
-	//         regardless of leftover container width.
-	//       - `maxWidth` set (with or without explicit width): the track
-	//         becomes `minmax(${width}px, ${maxWidth}px)`, a bounded flex
-	//         that grows up to `maxWidth` and is then capped.
-	//       - Neither (the column is on its per-kind default width):
-	//         `minmax(${width}px, 1fr)`, the column flexes to absorb any
-	//         horizontal space the fixed-width tracks leave behind.
-	//     This produces the "specify widths for the columns you care
-	//     about; let the rest fill the gap" behaviour that mirrors the
-	//     legacy `<table>` element when only some columns set a width.
-	//   - `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.
-	// - 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;
-				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`;
-			}
-			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));
-		}
-		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>
-
+<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 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',
+				});
+			}
+		});
+	});
+
+	// 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}`
+				) 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;
+		}
+
+		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,
+					});
+				}
+			}
+		}
+
+		// `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',
+				});
+			}
+
+			_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;
+			}
+		}
+	}
+
+	// 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());
+
+	// 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`;
+			}
+			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));
+		}
+		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: 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 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: 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);
+		}
+		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);
+		}
+		// 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;
@@ -893,4 +840,4 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   text-align: left;
   min-width: max-content;
   isolation: isolate;
-}</style>
+}</style>