@lavalogic/scoria 0.34.0 → 0.35.0

package/dist/Components/Table/Table.svelte

@@ -1,494 +1,494 @@
-<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 { 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>
+
 <style>div.grid {
   border-radius: 4px;
   display: grid;
@@ -657,4 +657,4 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   position: sticky;
   z-index: 2;
   right: 0;
-}</style>
+}</style>