@lavalogic/scoria 0.12.3 → 0.13.1

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js

@@ -24,7 +24,7 @@ export function generateExampleItemColumnDefs(modal) {
             headerIcon: 'access-token',
             innerTableName: 'expand-inner',
             innerTableOptions: {
-                selectionExtractor: (item) => item.id,
+                selectionExtractor: (item) => Promise.resolve(item.id),
                 getUserId: () => '1'
             },
             isEnabled: () => true
@@ -56,9 +56,10 @@ export function generateExampleItemColumnDefs(modal) {
             // TODO make filtering work with the below:
             accessorFn: async (item) => {
                 void item.id;
-                await asyncSleep(500);
+                await asyncSleep(10);
                 return item.id;
-            }
+            },
+            debug: true
         }),
         new QueryDef({
             header: 'simulated query def',

package/dist/Components/Table/Headers/HighlightAllHeader.svelte

@@ -8,7 +8,7 @@
 	import Action from '../../Action.svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	let allHighlighted = $state(false);
 
@@ -20,26 +20,39 @@
 			.catch(devCatch);
 	});
 
-	const backgroundColour = $derived(
-		tableContext.sortedData.length > 0 && allHighlighted
+	const backgroundColour = $derived.by(async () => {
+		return (await tableContext.sortedData).length > 0 && allHighlighted
 			? Colour['$brand-primary']
-			: Colour['$ui-white']
-	);
+			: Colour['$ui-white'];
+	});
 </script>
 
 <div class="checkbox-cell">
 	<div class="wrapper">
-		<Action
-			{backgroundColour}
-			hoverBackgroundColour={Colour['$brand-dark']}
-			size={Size.FillWidth}
-			icon={{
-				name: 'nothing'
-			}}
-			onclick={() => {
-				tableContext.onHighlightAll();
-			}}
-		/>
+		{#await backgroundColour}
+			<Action
+				hoverBackgroundColour={Colour['$brand-dark']}
+				size={Size.FillWidth}
+				icon={{
+					name: 'nothing'
+				}}
+				onclick={() => {
+					tableContext.onHighlightAll();
+				}}
+			/>
+		{:then backgroundColour}
+			<Action
+				{backgroundColour}
+				hoverBackgroundColour={Colour['$brand-dark']}
+				size={Size.FillWidth}
+				icon={{
+					name: 'nothing'
+				}}
+				onclick={() => {
+					tableContext.onHighlightAll();
+				}}
+			/>
+		{/await}
 	</div>
 </div>
 

package/dist/Components/Table/Headers/SelectAllHeader.svelte

@@ -4,7 +4,7 @@
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const allSelected: Promise<boolean> = $derived(tableContext.allSelectedInCurrentPage);
 	const checked: Promise<boolean> = $derived.by(() => {

package/dist/Components/Table/Headers/TableHead.svelte

@@ -28,7 +28,7 @@
 <script lang="ts" generics="T extends object">
 	const { showHighlight, side = 'centre', oncontextmenu }: TableHeadProps = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
 
 	const groups: Array<HeaderGroup<T>> = $derived.by(() => {

package/dist/Components/Table/Misc/ColumnPanel.svelte

@@ -11,7 +11,7 @@
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const labelledPresets: Array<SelectOption<string>> = $derived(
 		tableContext.columnPresets.map((pr) => ({ label: pr.name, value: pr.name }))

package/dist/Components/Table/Misc/ColumnPanelModal.svelte

@@ -13,7 +13,7 @@
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import type { ColumnPanelModalProps } from './ColumnPanelModalProps.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { onclose }: ColumnPanelModalProps = $props();
 	const labelledPresets: Array<SelectOption<string>> = $derived(

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -24,7 +24,7 @@
 	import { numberDateFilterTypes } from './numberDateFilterTypes.js';
 	import { stringFilterTypes } from './stringFilterTypes.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { def, customFilters }: FilterInputProps<T> = $props();
 
@@ -447,7 +447,6 @@
 
 						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
 						tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
-						tableContext.paginationRepo?.filterModes.set(def.id, newFilterType);
 
 						if (selectedNumberFilterType?.value !== oldFilterType?.value) {
 							if (oldFilterType?.value === NumberDateFilterMode.Between) {
@@ -521,7 +520,6 @@
 					onchange={(newValue: SelectOption<StringFilterMode> | null) => {
 						const filterType = newValue?.value ?? StringFilterMode.Contains;
 						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-						tableContext.paginationRepo?.filterModes.set(def.id, filterType);
 					}}
 					onkeydown={(e: KeyboardEvent) => {
 						e.stopPropagation();

package/dist/Components/Table/Misc/FilterPanel.svelte

@@ -4,11 +4,11 @@
 	import Button from '../../Button.svelte';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import FilterInput from './FilterInput.svelte';
-	import { getContext } from 'svelte';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	function reset() {
 		tableContext.paginationRepo?.resetFilters();

package/dist/Components/Table/Misc/FilterPanelModal.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <script lang="ts" generics="T extends object">
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { onclose }: FilterPanelModalProps = $props();
 	const refs: Array<FilterInput<T>> = $state([]);

package/dist/Components/Table/Misc/TableFooter.svelte

@@ -25,7 +25,7 @@
 <script lang="ts" generics="T extends object">
 	let { onkeydown }: TableFooterProps = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const alertContext = getContext<AlertContext>(AlertContext.identifier);
 
 	const pageSizes: Array<SelectOption<number>> = $state([

package/dist/Components/Table/Misc/TableHorizontalBar.svelte

@@ -14,7 +14,7 @@
 		default as ToolboxPanelModal
 	} from './FilterPanelModal.svelte';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const panels = {
 		[ExpandedPanel.None]: null,

package/dist/Components/Table/Misc/TableSidebar.svelte

@@ -13,7 +13,8 @@
 	import FilterPanel from './FilterPanel.svelte';
 	import SidePanel from './SidePanel.svelte';
 	import ToolboxPanel from './ToolboxPanel.svelte';
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const panels = {
 		[ExpandedPanel.None]: null,

package/dist/Components/Table/Misc/ToolboxPanel.svelte

@@ -1,11 +1,11 @@
 <svelte:options runes />
 
 <script lang="ts" generics="T extends object">
+	import Checkbox from '../../Checkbox.svelte';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import Checkbox from '../../Checkbox.svelte';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const onCompactChange = (e: Event) => {
 		tableContext.setIsCompact((e.target as HTMLInputElement).checked);

package/dist/Components/Table/Misc/ToolboxPanelModal.svelte

@@ -9,7 +9,7 @@
 
 	let { onclose }: ToolboxPanelModalProps = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const onCompactChange = (e: Event) => {
 		tableContext.setIsCompact((e.target as HTMLInputElement).checked);

package/dist/Components/Table/NestedTable.svelte

@@ -4,11 +4,14 @@
 	import Table from './Table.svelte';
 	import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
 	import { TableContext } from './Types/Context/TableContext.svelte.js';
-	import type { TableInitOptions } from './Types/Context/TableInitOptions.js';
+	import type { Primitive, TableInitOptions } from './Types/Context/TableInitOptions.js';
 	import { LocalTableDataRepository } from './Types/DataRepository/LocalTableDataRepository.svelte.js';
 	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
 
-	const defaultOptions: Omit<TableInitOptions<object>, 'selectionExtractor' | 'getUserId'> = {
+	const defaultOptions: Omit<
+		TableInitOptions<object, never>,
+		'selectionExtractor' | 'getUserId'
+	> = {
 		allowCopy: false,
 		enableResize: false,
 		allowColumnReordering: false,
@@ -18,17 +21,18 @@
 		displayFooter: false
 	};
 
-	export interface NestedTableProps<T extends object> {
+	export interface NestedTableProps<T extends object, IdType extends Primitive> {
 		tableName: string;
 		data: Array<T>;
 		columnDefWrapper: DefsWrapper<T>;
-		options: Pick<TableInitOptions<T>, 'selectionExtractor'> & Partial<TableInitOptions<T>>;
+		options: Pick<TableInitOptions<T, IdType>, 'selectionExtractor'> &
+			Partial<TableInitOptions<T, IdType>>;
 		oncontextmenu?: (e: MouseEvent) => void;
 		getUserId: () => string | undefined;
 	}
 </script>
 
-<script lang="ts" generics="T extends object">
+<script lang="ts" generics="T extends object,IdType extends Primitive">
 	const {
 		tableName,
 		data,
@@ -36,7 +40,7 @@
 		options,
 		oncontextmenu,
 		getUserId
-	}: NestedTableProps<T> = $props();
+	}: NestedTableProps<T, IdType> = $props();
 
 	const wrapper = {
 		get value() {
@@ -53,8 +57,8 @@
 	const dataRepo = $state(new LocalTableDataRepository(tableName, wrapper, () => getUserId()));
 
 	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
-	const tableContext: TableContext<T> | undefined = $state(
-		TableContext.init<T>(columnDefWrapper, tableName, dataRepo, {
+	const tableContext: TableContext<T, IdType> | undefined = $state(
+		TableContext.init<T, IdType>(columnDefWrapper, tableName, dataRepo, {
 			...defaultOptions,
 			...options,
 			getUserId: () => getUserId()

package/dist/Components/Table/NestedTable.svelte.d.ts

@@ -1,34 +1,34 @@
 import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
-import type { TableInitOptions } from './Types/Context/TableInitOptions.js';
-export interface NestedTableProps<T extends object> {
+import type { Primitive, TableInitOptions } from './Types/Context/TableInitOptions.js';
+export interface NestedTableProps<T extends object, IdType extends Primitive> {
     tableName: string;
     data: Array<T>;
     columnDefWrapper: DefsWrapper<T>;
-    options: Pick<TableInitOptions<T>, 'selectionExtractor'> & Partial<TableInitOptions<T>>;
+    options: Pick<TableInitOptions<T, IdType>, 'selectionExtractor'> & Partial<TableInitOptions<T, IdType>>;
     oncontextmenu?: (e: MouseEvent) => void;
     getUserId: () => string | undefined;
 }
-declare function $$render<T extends object>(): {
-    props: NestedTableProps<T>;
+declare function $$render<T extends object, IdType extends Primitive>(): {
+    props: NestedTableProps<T, IdType>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const NestedTable: $$IsomorphicComponent;
-type NestedTable<T extends object> = InstanceType<typeof NestedTable<T>>;
+type NestedTable<T extends object, IdType extends Primitive> = InstanceType<typeof NestedTable<T, IdType>>;
 export default NestedTable;

package/dist/Components/Table/Table.svelte

@@ -4,8 +4,8 @@
 	import {
 		ContextMenuContext,
 		type IContextMenuOption
-	} from '../../Contexts/ContextMenuContext.svelte.js';
-	import { devCatch, refWrapper } from '../../Helpers/Helpers.svelte.js';
+	} 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';
@@ -16,7 +16,8 @@
 	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.js';
+	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';
 
@@ -28,8 +29,8 @@
 		}
 	}
 
-	export interface TableProps<T extends object> {
-		readonly tableContext: TableContext<T>;
+	export interface TableProps<T extends object, IdType extends Primitive> {
+		readonly tableContext: TableContext<T, IdType>;
 		nested?: boolean;
 	}
 
@@ -38,13 +39,13 @@
 	const openedQuickFilterSelect = refWrapper(null);
 </script>
 
-<script lang="ts" generics="T extends object">
-	const { nested = false, tableContext }: TableProps<T> = $props();
+<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
 	setContext(TableContext.identifier, tableContext);
 
-	// const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	// $inspect(tableContext.showQuickFiltering);
 
 	const { openContextMenu: _openContextMenu } = getContext<ContextMenuContext>(
 		ContextMenuContext.identifier
@@ -265,16 +266,6 @@
 		}
 	});
 
-	$effect(() => {
-		void tableContext.dataRepo.data;
-		untrack(() => {
-			if (tableContext.paginationRepo?.paginationState.pageIndex != undefined) {
-				tableContext.updateSelectedItems().catch(devCatch);
-				tableContext.resetHighlightedRows();
-			}
-		});
-	});
-
 	const leftTotalSize = $derived(tableContext.table.getLeftTotalSize());
 	const centreTotalSize = $derived(tableContext.table.getCenterTotalSize());
 	const rightTotalSize = $derived(tableContext.table.getRightTotalSize());
@@ -364,114 +355,116 @@
 	}}
 />
 
-<div class="grid" class:nested>
-	{#if tableContext.dataRepo.isLoading}
-		<LoadingOverlay absolute borderRadius="4px" />
-	{/if}
-
-	<div class="horizontal-bar" class:border={tableContext.toolbarPosition === ToolbarPosition.Top}>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Top}
-			<TableHorizontalBar />
+<svelte:boundary>
+	<div class="grid" class:nested>
+		{#if tableContext.dataRepo.isLoading}
+			<LoadingOverlay absolute borderRadius="4px" />
 		{/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="horizontal-bar" class:border={tableContext.toolbarPosition === ToolbarPosition.Top}>
+			{#if tableContext.toolbarPosition === ToolbarPosition.Top}
+				<TableHorizontalBar />
+			{/if}
+		</div>
 
-	<div class="footer">
-		{#if tableContext.displayFooter}
-			<TableFooter />
-		{/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}
-						heights={totalRowSizes}
-						side="left"
-						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}
-						heights={totalRowSizes}
-						side="centre"
-						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}
-						heights={totalRowSizes}
-						side="right"
-						bind:this={rightTable}
-					/>
-				</table>
-				<!-- {/if} -->
+		<!-- 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}
+							heights={totalRowSizes}
+							side="left"
+							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}
+							heights={totalRowSizes}
+							side="centre"
+							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}
+							heights={totalRowSizes}
+							side="right"
+							bind:this={rightTable}
+						/>
+					</table>
+					<!-- {/if} -->
+				</div>
+
+				<!-- TODO add filter callbacks -->
 			</div>
 
-			<!-- TODO add filter callbacks -->
+			{#if nested}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class:isResizing
+					class="resizer"
+					onmousedown={(e) => {
+						e.preventDefault();
+						addOverrideResizeHandler();
+					}}
+				></div>
+			{/if}
 		</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:boundary>
 
 <style>div.grid {
   border-radius: 4px;