@lavalogic/scoria 0.16.2 → 0.16.4

package/dist/Components/Table/Body/Rows/TableRow.svelte

@@ -94,35 +94,36 @@
 		}
 	}
 
-	let trRef: HTMLTableRowElement | undefined = $state();
-	let _trHeight = $state(0);
-	export const trHeight = {
-		get value() {
-			return _trHeight;
-		},
-	};
-
-	$effect(() => {
-		void trRef;
-		return untrack(() => {
-			if (trRef) {
-				const observer = new ResizeObserver((entries) => {
-					if (customHeight) {
-						_trHeight = 0;
-					} else {
-						_trHeight = entries[0].borderBoxSize[0].blockSize;
-					}
-				});
-				observer.observe(trRef);
+	//FIXME the below threw errors before. Please investigate
+	// let trRef: HTMLTableRowElement | undefined = $state();
+	// let _trHeight = $state(0);
+	// export const trHeight = {
+	// 	get value() {
+	// 		return _trHeight;
+	// 	},
+	// };
 
-				const currentTrRef = trRef;
-				return () => {
-					observer.unobserve(currentTrRef);
-				};
-			}
-			return () => {};
-		});
-	});
+	// $effect(() => {
+	// 	void trRef;
+	// 	return untrack(() => {
+	// 		if (trRef) {
+	// 			const observer = new ResizeObserver((entries) => {
+	// 				if (customHeight) {
+	// 					_trHeight = 0;
+	// 				} else {
+	// 					_trHeight = entries[0].borderBoxSize[0].blockSize;
+	// 				}
+	// 			});
+	// 			observer.observe(trRef);
+
+	// 			const currentTrRef = trRef;
+	// 			return () => {
+	// 				observer.unobserve(currentTrRef);
+	// 			};
+	// 		}
+	// 		return () => {};
+	// 	});
+	// });
 
 	// let innerTrRef: HTMLTableRowElement | undefined = $state();
 	// let _innerTrHeight = $state(0);
@@ -151,8 +152,8 @@ onMouseLeave={onMouseLeave} -->
 	class:alt={tableContext.alternateRowColours && odd}
 	class:highlighted
 	style={customHeight ? `height: ${customHeight}px !important;` : null}
-	bind:this={trRef}
 >
+	<!-- bind:this={trRef} -->
 	{#if showHighlightButton}
 		<ColumnHighlight
 			rowIndex={rowIndex ??

package/dist/Components/Table/Body/Rows/TableRow.svelte.d.ts

@@ -1,11 +1,7 @@
 import type { TableRowProps } from './TableRowProps.js';
 declare function $$render<T extends object>(): {
     props: TableRowProps<T>;
-    exports: {
-        trHeight: {
-            readonly value: number;
-        };
-    };
+    exports: {};
     bindings: "";
     slots: {};
     events: {};
@@ -15,11 +11,7 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {
-        trHeight: {
-            readonly value: number;
-        };
-    };
+    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']>> & {

package/dist/Components/Table/Body/TableBody.svelte

@@ -1,30 +1,37 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
-	import type { RefWrapper } from '../../../Types/Internal/RefWrapper.js';
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import QuickSearchCell from './QuickSearchCell.svelte';
 	import TableRow from './Rows/TableRow.svelte';
 	import type { TableBodyProps } from './TableBodyProps.js';
 
-	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
+	let {
+		side,
+		// heights,
+		columns,
+		includeHighlight,
+	}: TableBodyProps<T> = $props();
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
-	type HasHeight = {
-		trHeight: RefWrapper<number>;
-	};
-	const rows: Array<TableRow<T>> = $state([]);
-	const _rowHeights = $derived(
-		// HACK terrible type casting due to svelte type gen not being liked by eslint
-		rows.map((it) => (it as HasHeight | undefined)?.trHeight.value ?? 0)
-	);
-	export const rowHeights = {
-		get value() {
-			return _rowHeights;
-		}
-	};
+	// type HasHeight = {
+	// 	trHeight: RefWrapper<number>;
+	// };
+	// const rows: Array<TableRow<T>> = $state([]);
+	// const _rowHeights = $derived(
+	// 	// HACK terrible type casting due to svelte type gen not being liked by eslint
+	// 	rows.map((it) => (it as HasHeight | undefined)?.trHeight.value ?? 0)
+	// );
+	// export const rowHeights = {
+	// 	get value() {
+	// 		return _rowHeights;
+	// 	}
+	// };
 </script>
 
 <tbody>
@@ -34,24 +41,28 @@
 				<td class="highlight-dud"><!-- accomodating for row marking --></td>
 			{/if}
 			{#each columns as column (column.id)}
-				<QuickSearchCell {column} customFilters={tableContext.remoteFilters} />
+				<QuickSearchCell
+					{column}
+					customFilters={tableContext.remoteFilters}
+				/>
 			{/each}
 		</tr>
 	{/if}
 	<svelte:boundary>
 		{#await tableContext.paginationRowModel then prm}
 			{#each prm.rows as row, index (row)}
-				{@const customHeight = heights[index]?.applyTo.includes(side)
+				<!-- {@const customHeight = heights[index]?.applyTo.includes(side)
 					? heights[index].maxHeight
-					: undefined}
+					: undefined} -->
+				<!-- {customHeight} -->
 				<TableRow
+					customHeight={undefined}
 					{includeHighlight}
-					{customHeight}
 					{row}
 					{side}
 					odd={index % 2 == 1}
-					bind:this={rows[index]}
 				/>
+				<!-- bind:this={rows[index]} -->
 			{/each}
 		{/await}
 	</svelte:boundary>

package/dist/Components/Table/Body/TableBody.svelte.d.ts

@@ -1,11 +1,7 @@
 import type { TableBodyProps } from './TableBodyProps.js';
 declare function $$render<T extends object>(): {
     props: TableBodyProps<T>;
-    exports: {
-        rowHeights: {
-            readonly value: number[];
-        };
-    };
+    exports: {};
     bindings: "";
     slots: {};
     events: {};
@@ -15,11 +11,7 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {
-        rowHeights: {
-            readonly value: number[];
-        };
-    };
+    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']>> & {

package/dist/Components/Table/Body/TableBodyProps.d.ts

@@ -1,8 +1,6 @@
 import type { Column } from '../Types/Columns/Column.js';
-import type { HeightData } from './HeightData.js';
 export interface TableBodyProps<T extends object> {
     side: 'left' | 'centre' | 'right';
-    heights: Array<HeightData<T>>;
     columns: Array<Column<T>>;
     includeHighlight: boolean;
 }

package/dist/Components/Table/Table.svelte

@@ -1,15 +1,17 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import {
 		ContextMenuContext,
-		type IContextMenuOption
+		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';
@@ -39,7 +41,10 @@
 	const openedQuickFilterSelect = refWrapper(null);
 </script>
 
-<script lang="ts" generics="T extends object,IdType extends Primitive">
+<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
@@ -78,7 +83,7 @@
 				element?.scrollIntoView({
 					behavior: 'instant',
 					block: 'nearest',
-					inline: 'nearest'
+					inline: 'nearest',
 				});
 			}
 		});
@@ -94,7 +99,7 @@
 			cell?.scrollIntoView({
 				behavior: 'instant',
 				block: 'nearest',
-				inline: 'nearest'
+				inline: 'nearest',
 			});
 		}
 	});
@@ -137,7 +142,7 @@
 					tableContext.moveFocus({
 						column: columnIndex,
 						row,
-						id: columnId
+						id: columnId,
 					});
 				}
 			}
@@ -153,8 +158,8 @@
 					callback: () => {
 						tableContext.copyDataToClipboard().catch(devCatch);
 					},
-					text: 'Copy Selection'
-				}
+					text: 'Copy Selection',
+				},
 			];
 
 			if (tableContext.hasHighlightedItems) {
@@ -162,7 +167,7 @@
 					callback: () => {
 						tableContext.copyHighlightedRowsToClipboard().catch(devCatch);
 					},
-					text: 'Copy Highlighted Rows'
+					text: 'Copy Highlighted Rows',
 				});
 			}
 
@@ -284,46 +289,46 @@
 		}
 	});
 
-	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 [];
-		}
-		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) {
-				applyTo.push('left');
-			}
-			if (centreHeight < maxHeight) {
-				applyTo.push('centre');
-			}
-			if (rightHeight < maxHeight) {
-				applyTo.push('right');
-			}
-
-			return {
-				index,
-				applyTo,
-				maxHeight
-			};
-		});
-	});
+	// 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 [];
+	// 	}
+	// 	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) {
+	// 			applyTo.push('left');
+	// 		}
+	// 		if (centreHeight < maxHeight) {
+	// 			applyTo.push('centre');
+	// 		}
+	// 		if (rightHeight < maxHeight) {
+	// 			applyTo.push('right');
+	// 		}
+
+	// 		return {
+	// 			index,
+	// 			applyTo,
+	// 			maxHeight
+	// 		};
+	// 	});
+	// });
 </script>
 
 <svelte:window
@@ -356,12 +361,21 @@
 />
 
 <svelte:boundary>
-	<div class="grid" class:nested>
+	<div
+		class="grid"
+		class:nested
+	>
 		{#if tableContext.dataRepo.isLoading}
-			<LoadingOverlay absolute borderRadius="4px" />
+			<LoadingOverlay
+				absolute
+				borderRadius="4px"
+			/>
 		{/if}
 
-		<div class="horizontal-bar" class:border={tableContext.toolbarPosition === ToolbarPosition.Top}>
+		<div
+			class="horizontal-bar"
+			class:border={tableContext.toolbarPosition === ToolbarPosition.Top}
+		>
 			{#if tableContext.toolbarPosition === ToolbarPosition.Top}
 				<TableHorizontalBar />
 			{/if}
@@ -405,45 +419,71 @@
 			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}>
+			<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" />
+					<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}
 						/>
+						<!-- 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" />
+					<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}
 						/>
+						<!-- 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" />
+					<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}
 						/>
+						<!-- heights={totalRowSizes}
+							bind:this={rightTable} -->
 					</table>
 					<!-- {/if} -->
 				</div>

package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts

@@ -8,12 +8,12 @@ export interface ExpandDefProps<T extends object, R extends object, InnterIdType
     headerIcon: IconProps['name'];
     innerTableName: string;
     innerTableOptions: TableInitOptions<R, InnterIdType>;
-    accessorFn: (item: T, index: number) => Array<R> | Promise<Array<R>>;
+    accessorFn: (item: T, index: number) => ReadonlyArray<R> | Promise<ReadonlyArray<R>>;
 }
 export declare class ExpandDef<T extends object, R extends object, InnterIdType extends Primitive = Primitive, in FilterValueType = unknown, out OptionsValueType = unknown> extends ColumnDef<T, FilterValueType, OptionsValueType> {
     readonly columnType: "Expand";
     constructor(props: ExpandDefProps<T, R, InnterIdType, FilterValueType, OptionsValueType>);
-    readonly accessorFn: (item: T, index: number) => Array<R> | Promise<Array<R>>;
+    readonly accessorFn: (item: T, index: number) => ReadonlyArray<R> | Promise<ReadonlyArray<R>>;
     readonly filterFn: undefined;
     readonly innerTableName: string;
     readonly getInnerColumnDefs: (item: T, index: number) => DefsWrapper<R>;

package/dist/Components/Table/Types/Columns/DefsWrapper.d.ts

@@ -1,6 +1,6 @@
 import type { CustomRemoteFilters } from '../Filtering/CustomRemoteFilters.js';
 import type { ColumnDef } from './Definitions/ColumnDef.svelte.js';
-export interface DefsWrapper<T extends object> {
-    defs: Array<ColumnDef<T, never>>;
+export interface DefsWrapper<T extends object, in FilterValueType = unknown> {
+    defs: Array<ColumnDef<T, FilterValueType>>;
     remoteFilters?: CustomRemoteFilters<unknown>;
 }

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -1,5 +1,5 @@
 import { browser, dev } from '$app/environment';
-import { asyncAll, asyncFilterIndices, asyncForEach, asyncMap, asyncSleep, devCatch, getCanvasContext, getErrorMessage } from '../../../../Helpers/Helpers.svelte.js';
+import { asyncAll, asyncFilterIndices, asyncForEach, asyncMap, asyncSleep, devCatch, getCanvasContext, getErrorMessage, } from '../../../../Helpers/Helpers.svelte.js';
 import { tick, untrack } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { ColumnType } from '../Columns/ColumnType.js';
@@ -23,7 +23,7 @@ const uncopyableColumns = new Set([
     ColumnType.Expand,
     ColumnType.Actions,
     ColumnType.FilterOnly,
-    ColumnType.Custom
+    ColumnType.Custom,
 ]);
 export class TableContext {
     defaultColumnDefs;
@@ -106,7 +106,7 @@ export class TableContext {
                     columnDefs: this.columnDefs,
                     sortingState: [],
                     visibilityState,
-                    columnPinningState: {}
+                    columnPinningState: {},
                 };
                 this.selectedPreset = defaultPreset;
                 this.columnVisibility = visibilityState;
@@ -665,7 +665,7 @@ export class TableContext {
         return {
             rows,
             // eslint-disable-next-line svelte/prefer-svelte-reactivity
-            rowsById: new Map(rows.map((it, index) => [index.toString(), it])) //FIXME should this be by sorted id or by original id?
+            rowsById: new Map(rows.map((it, index) => [index.toString(), it])), //FIXME should this be by sorted id or by original id?
         };
     });
     currentPageData = $derived.by(async () => {
@@ -709,7 +709,7 @@ export class TableContext {
                 id: index.toString(),
                 getLeftVisibleCells: () => leftVisibleCells,
                 getRightVisibleCells: () => rightVisibleCells,
-                getCenterVisibleCells: () => centerVisibleCells
+                getCenterVisibleCells: () => centerVisibleCells,
             };
             const makeRow = (def) => {
                 const isSorted = $derived.by(() => {
@@ -731,7 +731,7 @@ export class TableContext {
                         getIsSorted: () => isSorted,
                         getIsVisible: () => isVisible,
                         getToggleSortingHandler: () => def.allowSorting ? this.getToggleSortingHandler(def) : undefined,
-                        id: def.id
+                        id: def.id,
                     },
                     id: `${index}_${def.id}`,
                     row: row,
@@ -741,7 +741,7 @@ export class TableContext {
                             return gotValue;
                         }
                         return item[def.id];
-                    }
+                    },
                 };
             };
             const makeCellFromId = (columnId) => {
@@ -763,7 +763,7 @@ export class TableContext {
         return {
             rows,
             // eslint-disable-next-line svelte/prefer-svelte-reactivity
-            rowsById: new Map(rows.map((it, index) => [index.toString(), it])) //FIXME should this be by sorted id or by original id?
+            rowsById: new Map(rows.map((it, index) => [index.toString(), it])), //FIXME should this be by sorted id or by original id?
         };
     });
     // #endregion
@@ -1272,7 +1272,7 @@ export class TableContext {
         }
         return this._performRowCopy(await this.getFocusElementData());
     };
-    _performRowCopy = async ({ items, indicesByItem, focusedElementData, affectedColumns }) => {
+    _performRowCopy = async ({ items, indicesByItem, focusedElementData, affectedColumns, }) => {
         const focusedColumnIds = affectedColumns.map((it) => encapsulate(typeof it.header === 'string' ? it.header : it.id));
         const value = await (async () => {
             // eslint-disable-next-line svelte/prefer-svelte-reactivity
@@ -1674,8 +1674,8 @@ export class TableContext {
                 ...preset,
                 columnPinningState: {
                     left: [...(preset.columnPinningState.left?.entries() ?? [])],
-                    right: [...(preset.columnPinningState.right?.entries() ?? [])]
-                }
+                    right: [...(preset.columnPinningState.right?.entries() ?? [])],
+                },
             };
         });
         const stringified = JSON.stringify(jsonFriendly);
@@ -1707,7 +1707,7 @@ export class TableContext {
             id: index.toString(),
             getLeftVisibleCells: () => leftVisibleCells,
             getRightVisibleCells: () => rightVisibleCells,
-            getCenterVisibleCells: () => centerVisibleCells
+            getCenterVisibleCells: () => centerVisibleCells,
         };
         const makeRow = (def) => {
             const isVisible = $derived(this.columnVisibility[def.id] != false);
@@ -1729,7 +1729,7 @@ export class TableContext {
                     getIsSorted: () => isSorted,
                     getIsVisible: () => isVisible,
                     getToggleSortingHandler: () => def.allowSorting ? this.getToggleSortingHandler(def) : undefined,
-                    id: def.id
+                    id: def.id,
                 },
                 id: `${index}_${def.id}`,
                 row: row,
@@ -1739,7 +1739,7 @@ export class TableContext {
                         return gotValue;
                     }
                     return item[def.id];
-                }
+                },
             };
         };
         const makeCellFromId = (columnId) => {
@@ -1776,7 +1776,7 @@ export class TableContext {
             alternateRowColours,
             changeColourOnHover,
             copyWithHeaders,
-            commaSeparatedCopy
+            commaSeparatedCopy,
         };
         localStorage.setItem(`${this.userId}-${this.tableName}-settings`, JSON.stringify(settingsObject));
     }
@@ -1793,7 +1793,7 @@ export class TableContext {
         const endRowIndex = rows.findIndex((row) => row.visibleIndex === focusEnd.row);
         this.focusEnd = {
             ...this.focusEnd,
-            row: rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].visibleIndex
+            row: rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].visibleIndex,
         };
     }
     async _moveFocusRow(offset) {
@@ -1900,7 +1900,7 @@ export class TableContext {
             items: selectedRows,
             indicesByItem: indices,
             focusedElementData: selectedCells,
-            affectedColumns
+            affectedColumns,
         };
     }
     async getFocusElementData() {
@@ -1974,7 +1974,7 @@ export class TableContext {
                 items: selectedRows,
                 indicesByItem: indices,
                 focusedElementData: selectedCells,
-                affectedColumns
+                affectedColumns,
             };
         }
         // eslint-disable-next-line svelte/prefer-svelte-reactivity
@@ -2191,7 +2191,7 @@ export class TableContext {
             right: new Map(this.columnPinning.right &&
                 this.columnDefs
                     .filter((col) => this.columnPinning.right?.has(col.id))
-                    .map((col, index) => [col.id, index]))
+                    .map((col, index) => [col.id, index])),
         }; // TODO
     }
     getToggleSortingHandler = (def) => () => {
@@ -2210,7 +2210,7 @@ export class TableContext {
             else {
                 newState.push({
                     desc: false,
-                    id: def.id
+                    id: def.id,
                 });
             }
             return newState;
@@ -2234,7 +2234,7 @@ export class TableContext {
                         throw new Error('Could not find equivalent column def:', { cause: def });
                     }
                     return (preset.columnDefs[index] = realDef);
-                })
+                }),
             };
         });
     }
@@ -2347,7 +2347,7 @@ function generateTableOptions(contextObj) {
                 getCanSort: () => def.allowSorting,
                 getToggleSortingHandler: () => def.allowSorting ? contextObj.getToggleSortingHandler(def) : undefined,
                 getIsSorted: () => isSorted,
-                getIsVisible: () => isVisible
+                getIsVisible: () => isVisible,
             },
             getResizeHandler: () => {
                 return (e) => {
@@ -2355,7 +2355,7 @@ function generateTableOptions(contextObj) {
                 };
             },
             isPlaceholder: false,
-            getSize: () => def.width
+            getSize: () => def.width,
         };
     };
     const leftHeaderGroups = $derived.by(() => {
@@ -2372,8 +2372,8 @@ function generateTableOptions(contextObj) {
             {
                 depth: 0,
                 id: 'left_0',
-                headers
-            }
+                headers,
+            },
         ];
     });
     const rightHeaderGroups = $derived.by(() => {
@@ -2384,8 +2384,8 @@ function generateTableOptions(contextObj) {
             {
                 depth: 0,
                 id: 'right_0',
-                headers
-            }
+                headers,
+            },
         ];
     });
     const centerHeaderGroups = $derived.by(() => {
@@ -2399,8 +2399,8 @@ function generateTableOptions(contextObj) {
             {
                 depth: 0,
                 id: 'center_0',
-                headers
-            }
+                headers,
+            },
         ];
     });
     const leftSizePx = $derived(leftHeaderGroups.reduce((total, grp) => total + grp.headers.reduce((total, header) => total + header.getSize(), 0), 0));
@@ -2455,7 +2455,7 @@ function generateTableOptions(contextObj) {
         },
         get onColumnFiltersChange() {
             return contextObj.updateFilters;
-        }
+        },
         // get pageCount() {
         // 	return _pageCount;
         // }
@@ -2570,7 +2570,7 @@ function adaptJSONPinningState(state) {
     //HACK ignore previously broken pinning states
     return {
         left: new Map(Array.isArray(state.left) ? state.left : []),
-        right: new Map(Array.isArray(state.right) ? state.right : [])
+        right: new Map(Array.isArray(state.right) ? state.right : []),
     };
 }
 // #endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.16.2",
+  "version": "0.16.4",
   "publishConfig": {
     "access": "restricted"
   },