@lavalogic/scoria 0.0.46 → 0.0.47

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

@@ -62,7 +62,7 @@
 	);
 
 	const isSearchable = $derived(
-		hasFilterFn || hasAcceptableColumnType || (customFilters?.has(def.id) ?? false)
+		hasFilterFn || hasAcceptableColumnType || customFilters?.has(def.id) == true
 	);
 	const isNumeric = $derived(
 		def instanceof NumberInputDef ||
@@ -70,12 +70,7 @@
 			customFilter?.type === CustomFilterType.Number
 	);
 	const options = $derived(
-		isSelect
-			? ((def as SelectDef<T>)?.getOptions?.() ??
-					(def as SelectDef<T>).getSpecificOptions?.() ??
-					customFilter?.options ??
-					[])
-			: []
+		isSelect ? ((def as SelectDef<T>)?.getOptions?.() ?? customFilter?.options ?? []) : []
 	);
 	const isDate = $derived(def instanceof DateInputDef);
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
@@ -232,7 +227,7 @@
 	let showToDateModal = $state(false);
 </script>
 
-<td class="input-cell">
+<td class="input-cell {inputId}">
 	{#if isSearchable}
 		<div class="input-wrapper-parent">
 			{#if isDate}
@@ -243,6 +238,7 @@
 					<div class="spaced-around">
 						<Button
 							size={Size.FillHeight}
+							fullWidth
 							onclick={() => {
 								showFromDateModal = true;
 							}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
@@ -250,6 +246,7 @@
 
 						<Button
 							size={Size.FillHeight}
+							fullWidth
 							onclick={() => {
 								showToDateModal = true;
 							}}>To {toDate?.toLocaleDateString() ?? 'Any Date'}</Button
@@ -501,6 +498,8 @@ td.input-cell {
   padding-left: 4px;
   padding-right: 4px;
   gap: 4px;
+  width: 100%;
+  justify-content: space-around;
 }
 
 td {
@@ -577,4 +576,11 @@ div.input-wrapper-parent div.input-wrapper.right {
   min-width: 100px;
   flex-grow: 2;
   --input-padding-right: 2.6rem;
+}
+
+td {
+  --input-width: 100%;
+}
+td .input-wrapper-parent {
+  width: 100%;
 }</style>

package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte

@@ -68,13 +68,13 @@
 			}
 		}
 	}}
-	onkeyup={(e) => {
+	onkeyup={(e: KeyboardEvent) => {
 		if (e.key === 'Enter') {
 			e.stopPropagation();
 			tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value);
 		}
 	}}
-	onkeydown={(e) => {
+	onkeydown={(e: KeyboardEvent) => {
 		if (e.key == 'Enter' || e.key == 'F2') {
 			e.stopPropagation();
 		}
@@ -88,6 +88,7 @@
 		tableContext.endFocus(focusDetails.coordinates);
 	}}
 >
+	 
 	<label
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}

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

@@ -2,7 +2,7 @@
 
 <script lang="ts" module>
 	import { generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
-	import { getContext, untrack } from 'svelte';
+	import { getContext, onMount, untrack } from 'svelte';
 	import NestedTable from '../../NestedTable.svelte';
 	import type { Row } from '../../Types/Context/Row.js';
 	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
@@ -16,6 +16,8 @@
 		row: Row<T>;
 		side: 'left' | 'right' | 'centre';
 		odd: boolean;
+		customHeight: number | undefined;
+		includeHighlight: boolean;
 		// oncontextmenu?: (e: MouseEvent) => void
 	}
 </script>
@@ -23,7 +25,7 @@
 <script lang="ts" generics="T extends object">
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
-	const { row, side, odd = false }: TableRowProps<T> = $props();
+	const { row, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
 
 	const hoverable = $derived(tableContext.changeColourOnHover);
 
@@ -61,19 +63,7 @@
 			tableContext.highlightedItems.has(tableContext.selectionExtractor(row.original))
 	);
 
-	const isAppropriateTableSide = $derived.by(() => {
-		if (side === 'left') {
-			return (tableContext.columnPinning.left?.size ?? 0) > 0;
-		} else if (side === 'centre') {
-			return (
-				(tableContext.columnPinning.left?.size ?? 0) == 0 &&
-				(tableContext.columnPinning.right?.size ?? 0) != tableContext.columnDefs.length
-			);
-		} else {
-			return (tableContext.columnPinning.right?.size ?? 0) == tableContext.columnDefs.length;
-		}
-	});
-	const showHighlightButton = $derived(rowIndex != null && isAppropriateTableSide);
+	const showHighlightButton = $derived(rowIndex != null && includeHighlight);
 
 	const colspan = $derived(cells.length + (showHighlightButton ? 1 : 0));
 
@@ -111,11 +101,59 @@
 			expandedColumnDef = columnDef;
 		}
 	}
+
+	let trRef: HTMLTableRowElement | undefined = $state();
+	let _trHeight = $state(0);
+	export const trHeight = {
+		get value() {
+			return _trHeight;
+		}
+	};
+	$effect(() => {
+		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);
+		}
+	});
+
+	let innerTrRef: HTMLTableRowElement | undefined = $state();
+	// let _innerTrHeight = $state(0);
+	// export const innerTrHeight = {
+	// 	get value() {
+	// 		return _innerTrHeight;
+	// 	}
+	// };
+	// $effect(() => {
+	// 	if (innerTrRef) {
+	// 		const observer = new ResizeObserver((entries) => {
+	// 			_innerTrHeight = entries[0].borderBoxSize[0].blockSize;
+	// 		});
+	// 		observer.observe(innerTrRef);
+
+	// 		const currentinnerTrRef = innerTrRef;
+	// 		return () => observer.unobserve(currentTrRef);
+	// 	}
+	// });
 </script>
 
 <!-- onMouseEnter={onMouseEnter}
 onMouseLeave={onMouseLeave} -->
-<tr class:hoverable class:alt={tableContext.alternateRowColours && odd} class:highlighted>
+<tr
+	class:hoverable
+	class:alt={tableContext.alternateRowColours && odd}
+	class:highlighted
+	style={customHeight ? `height: ${customHeight}px !important;` : null}
+	bind:this={trRef}
+>
 	{#if showHighlightButton}
 		<ColumnHighlight
 			{rowIndex}
@@ -132,7 +170,7 @@ onMouseLeave={onMouseLeave} -->
 
 {#if expandedColumnDef}
 	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
-	<tr class="inner-table">
+	<tr class="inner-table" bind:this={innerTrRef}>
 		{#await innerDataPromise}
 			<td {colspan}>loading&hellip;</td>
 		{:then data}

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

@@ -3,10 +3,16 @@ export interface TableRowProps<T extends object> {
     row: Row<T>;
     side: 'left' | 'right' | 'centre';
     odd: boolean;
+    customHeight: number | undefined;
+    includeHighlight: boolean;
 }
 declare function $$render<T extends object>(): {
     props: TableRowProps<T>;
-    exports: {};
+    exports: {
+        trHeight: {
+            readonly value: number;
+        };
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -16,7 +22,11 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        trHeight: {
+            readonly value: number;
+        };
+    };
 }
 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,8 +1,16 @@
 <svelte:options runes />
 
 <script lang="ts" module>
-	export interface TableBodyProps {
+	export interface HeightData<T extends object> {
+		index: number;
+		applyTo: Array<TableBodyProps<T>['side']>;
+		maxHeight: number;
+	}
+	export interface TableBodyProps<T extends object> {
 		side: 'left' | 'centre' | 'right';
+		heights: Array<HeightData<T>>;
+		columns: Array<Column<T>>;
+		includeHighlight: boolean;
 	}
 </script>
 
@@ -10,40 +18,45 @@
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import QuickSearchCell from './QuickSearchCell.svelte';
-	import type { Column } from '../Types/Columns/Column.js';
 	import TableRow from './Rows/TableRow.svelte';
+	import type { Column } from '../Types/Columns/Column.js';
 
-	let { side }: TableBodyProps = $props();
+	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
 
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
-	let quickFilterColumns: Column<T>[] = $state([]);
-
-	$effect(() => {
-		if (tableContext.showQuickFiltering && tableContext.table) {
-			const columns =
-				side === 'left'
-					? tableContext.table.getLeftVisibleLeafColumns()
-					: side === 'right'
-						? tableContext.table.getRightVisibleLeafColumns()
-						: tableContext.table.getCenterVisibleLeafColumns();
-
-			quickFilterColumns = columns;
+	const rows: Array<TableRow<T>> = $state([]);
+	const _rowHeights = $derived(rows.map((it) => it?.trHeight.value ?? 0));
+	export const rowHeights = {
+		get value() {
+			return _rowHeights;
 		}
-	});
+	};
 </script>
 
 <tbody>
-	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && quickFilterColumns.length}
+	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && columns.length}
 		<tr class="sticky">
-			<td><!-- accomodating for row marking --></td>
-			{#each quickFilterColumns as column (column)}
+			{#if includeHighlight}
+				<td class="highlight-dud"><!-- accomodating for row marking --></td>
+			{/if}
+			{#each columns as column (column)}
 				<QuickSearchCell {column} customFilters={tableContext.remoteFilters} />
 			{/each}
 		</tr>
 	{/if}
 	{#each tableContext.paginationRowModel.rows ?? [] as row, index (row)}
-		<TableRow {row} {side} odd={index % 2 == 1} />
+		{@const customHeight = heights[index]?.applyTo.includes(side)
+			? heights[index].maxHeight
+			: undefined}
+		<TableRow
+			{includeHighlight}
+			{customHeight}
+			{row}
+			{side}
+			odd={index % 2 == 1}
+			bind:this={rows[index]}
+		/>
 	{/each}
 </tbody>
 

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

@@ -1,9 +1,22 @@
-export interface TableBodyProps {
+export interface HeightData<T extends object> {
+    index: number;
+    applyTo: Array<TableBodyProps<T>['side']>;
+    maxHeight: number;
+}
+export interface TableBodyProps<T extends object> {
     side: 'left' | 'centre' | 'right';
+    heights: Array<HeightData<T>>;
+    columns: Array<Column<T>>;
+    includeHighlight: boolean;
 }
+import type { Column } from '../Types/Columns/Column.js';
 declare function $$render<T extends object>(): {
-    props: TableBodyProps;
-    exports: {};
+    props: TableBodyProps<T>;
+    exports: {
+        rowHeights: {
+            readonly value: number[];
+        };
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -13,7 +26,11 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        rowHeights: {
+            readonly value: number[];
+        };
+    };
 }
 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/Misc/FilterInput.svelte

@@ -119,12 +119,7 @@
 	);
 
 	const options = $derived(
-		isSelect
-			? ((def as SelectDef<T>)?.getOptions?.() ??
-					(def as SelectDef<T>).getSpecificOptions?.() ??
-					customFilter?.options ??
-					[])
-			: []
+		isSelect ? ((def as SelectDef<T>)?.getOptions?.() ?? customFilter?.options ?? []) : []
 	);
 
 	let optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>> = $state(

package/dist/Components/Table/Table.svelte

@@ -15,7 +15,7 @@
 	import TableSidebar from './Misc/TableSidebar.svelte';
 	import TableFooter from './Misc/TableFooter.svelte';
 	import TableHead from './Headers/TableHead.svelte';
-	import TableBody from './Body/TableBody.svelte';
+	import TableBody, { type HeightData } from './Body/TableBody.svelte';
 	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
 
 	declare global {
@@ -264,6 +264,57 @@
 	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 ?? 0) != tableContext.columnDefs.length) {
+			return 'centre';
+		} else {
+			return 'right';
+		}
+	});
+
+	let leftTable: TableBody<T> | undefined = $state();
+	let centreTable: TableBody<T> | undefined = $state();
+	let rightTable: TableBody<T> | 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
@@ -349,7 +400,13 @@
 				<!-- {#if leftTotalSize > 0} -->
 				<table class="datatable__table left" style="min-width: {leftTotalSize}px">
 					<TableHead showHighlight={leftTotalSize > 0} side="left" />
-					<TableBody side="left" />
+					<TableBody
+						includeHighlight={appropriateSide == 'left'}
+						columns={leftColumns}
+						heights={totalRowSizes}
+						side="left"
+						bind:this={leftTable}
+					/>
 				</table>
 				<!-- {/if} -->
 
@@ -357,14 +414,26 @@
 
 				<table class="datatable__table centre" style="min-width: {centreTotalSize}px">
 					<TableHead showHighlight={leftTotalSize == 0} side="centre" />
-					<TableBody 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 side="right" />
+					<TableBody
+						includeHighlight={appropriateSide == 'right'}
+						columns={rightColumns}
+						heights={totalRowSizes}
+						side="right"
+						bind:this={rightTable}
+					/>
 				</table>
 				<!-- {/if} -->
 			</div>
@@ -449,6 +518,10 @@ div.resizer.isResizing {
   opacity: 1;
 }
 
+.left {
+  border-right: solid 2px #3a4952;
+}
+
 .right {
   border-left: solid 2px #3a4952;
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.d.ts

@@ -1,9 +1,9 @@
 import { ColumnDef, type ColumnDefProps } from '../ColumnDef.svelte.js';
 import type { AccessorType } from './AccessorType.js';
-export interface AccessorDefProps<T extends object> extends ColumnDefProps<T> {
+export interface AccessorDefProps<T extends object, FilterFnType> extends ColumnDefProps<T, FilterFnType> {
     readonly id: string & keyof T;
 }
-export declare abstract class AccessorDef<T extends object, filterValueType = unknown> extends ColumnDef<T, filterValueType> {
+export declare abstract class AccessorDef<T extends object, FilterFnType> extends ColumnDef<T, FilterFnType> {
     readonly columnType: "Accessor";
     abstract readonly accessorType: AccessorType;
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.d.ts

@@ -1,8 +1,12 @@
-import type { BoolFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { BoolFilterValueType, FilterFn } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
-export interface CheckboxDefProps<T extends object> extends AccessorDefProps<T> {
+export interface CheckboxDefProps<T extends object> extends AccessorDefProps<T, BoolFilterValueType> {
 }
 export declare class CheckboxDef<T extends object> extends AccessorDef<T, BoolFilterValueType> {
     readonly accessorType: "Checkbox";
     constructor(props: CheckboxDefProps<T>);
+    private _filterFn;
+    get filterFn(): CustomFilterFn | FilterFn<T, BoolFilterValueType> | undefined;
+    set filterFn(v: CustomFilterFn | FilterFn<T, BoolFilterValueType> | undefined);
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js

@@ -4,5 +4,13 @@ export class CheckboxDef extends AccessorDef {
     accessorType = AccessorType.Checkbox;
     constructor(props) {
         super(props);
+        this._filterFn = $state(props.filterFn);
+    }
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
     }
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.d.ts

@@ -1,10 +1,14 @@
-import type { DateFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { DateFilterValueType, FilterFn } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
-export interface DateInputDefProps<T extends object> extends AccessorDefProps<T> {
+export interface DateInputDefProps<T extends object> extends AccessorDefProps<T, DateFilterValueType> {
     showTime?: boolean;
 }
 export declare class DateInputDef<T extends object> extends AccessorDef<T, DateFilterValueType> {
     readonly accessorType: "Date";
     constructor(props: DateInputDefProps<T>);
+    private _filterFn;
+    get filterFn(): FilterFn<T, DateFilterValueType> | CustomFilterFn | undefined;
+    set filterFn(v: FilterFn<T, DateFilterValueType> | CustomFilterFn | undefined);
     readonly showTime: boolean;
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.js

@@ -5,6 +5,14 @@ export class DateInputDef extends AccessorDef {
     constructor(props) {
         super(props);
         this.showTime = $derived(props.showTime ?? false);
+        this._filterFn = $state(props.filterFn);
+    }
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
     }
     showTime;
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.d.ts

@@ -1,7 +1,8 @@
 import { AccessorDef } from './AccessorDef.svelte.js';
 import { type ColumnDefProps } from '../ColumnDef.svelte.js';
-import type { NumberFilterValueType } from '../../../Filtering/FilterFn.js';
-export interface NumberInputDefProps<T extends object> extends ColumnDefProps<T> {
+import type { FilterFn, NumberFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+export interface NumberInputDefProps<T extends object> extends ColumnDefProps<T, NumberFilterValueType> {
     min: number;
     max: number;
 }
@@ -10,4 +11,7 @@ export declare class NumberInputDef<T extends object> extends AccessorDef<T, Num
     constructor(props: NumberInputDefProps<T>);
     readonly min: number;
     readonly max: number;
+    private _filterFn;
+    get filterFn(): CustomFilterFn | FilterFn<T, NumberFilterValueType> | undefined;
+    set filterFn(v: CustomFilterFn | FilterFn<T, NumberFilterValueType> | undefined);
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js

@@ -7,7 +7,15 @@ export class NumberInputDef extends AccessorDef {
         super(props);
         this.min = $derived(props.min);
         this.max = $derived(props.max);
+        this._filterFn = $state(props.filterFn);
     }
     min;
     max;
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
+    }
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.d.ts

@@ -1,16 +1,18 @@
 import type { SelectOption } from '../../../../../../Types/Internal/SelectOption.js';
-import type { StringFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { FilterFn, SelectFilterValueType } from '../../../Filtering/FilterFn.js';
 import type { ColumnDefProps } from '../ColumnDef.svelte.js';
 import { AccessorDef } from './AccessorDef.svelte.js';
-export interface QueryDefProps<T extends object> extends ColumnDefProps<T> {
+export interface QueryDefProps<T extends object> extends ColumnDefProps<T, SelectFilterValueType<T>> {
     valueAsObject: boolean;
     query: (queryString: string, item: T, index: number) => Promise<Array<SelectOption<unknown>>>;
     getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     clearable?: boolean;
 }
-export declare class QueryDef<T extends object> extends AccessorDef<T, StringFilterValueType> {
+export declare class QueryDef<T extends object> extends AccessorDef<T, SelectFilterValueType<T>> {
     readonly accessorType: "Query";
     constructor(props: QueryDefProps<T>);
+    readonly filterFn: CustomFilterFn | FilterFn<T, SelectFilterValueType<T>> | undefined;
     readonly valueAsObject: boolean;
     readonly getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     readonly query: (queryString: string, item: T, index: number) => Promise<Array<SelectOption<unknown>>>;

package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.js

@@ -9,6 +9,7 @@ export class QueryDef extends AccessorDef {
         this.getDisplayValue = $derived(props.getDisplayValue);
         this.clearable = $derived(props.clearable ?? true);
     }
+    filterFn;
     valueAsObject;
     getDisplayValue;
     query;

package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts

@@ -1,7 +1,9 @@
 import type { SelectOption } from '../../../../../../Types/Internal/SelectOption.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { FilterFn, SelectFilterValueType } from '../../../Filtering/FilterFn.js';
 import type { ColumnDefProps } from '../ColumnDef.svelte.js';
 import { AccessorDef } from './AccessorDef.svelte.js';
-export interface SelectDefProps<T extends object> extends ColumnDefProps<T> {
+export interface SelectDefProps<T extends object> extends ColumnDefProps<T, SelectFilterValueType<T>> {
     getOptions: () => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
     getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     sortingFn?: (a: T, b: T) => 1 | -1 | 0;
@@ -9,9 +11,12 @@ export interface SelectDefProps<T extends object> extends ColumnDefProps<T> {
     optional?: boolean;
     clearable?: boolean;
 }
-export declare class SelectDef<T extends object> extends AccessorDef<T, T> {
+export declare class SelectDef<T extends object> extends AccessorDef<T, SelectFilterValueType<T>> {
     constructor(props: SelectDefProps<T>);
     readonly accessorType: "Select";
+    private _filterFn;
+    get filterFn(): FilterFn<T, SelectFilterValueType<T>> | CustomFilterFn | undefined;
+    set filterFn(v: FilterFn<T, SelectFilterValueType<T>> | CustomFilterFn | undefined);
     readonly sortingFn?: (a: T, b: T) => 1 | -1 | 0;
     readonly getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     readonly optional: boolean;

package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.js

@@ -9,8 +9,16 @@ export class SelectDef extends AccessorDef {
         this.optional = $derived(props.optional ?? false);
         this.clearable = $derived(props.clearable ?? true);
         this.getDisplayValue = $derived(props.getDisplayValue);
+        this._filterFn = $state(props.filterFn);
     }
     accessorType = AccessorType.Select;
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
+    }
     sortingFn;
     getDisplayValue;
     optional;

package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.d.ts

@@ -1,9 +1,13 @@
-import type { StringFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { FilterFn, StringFilterValueType } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
-export interface TextInputDefProps<T extends object> extends AccessorDefProps<T> {
+export interface TextInputDefProps<T extends object> extends AccessorDefProps<T, StringFilterValueType> {
     filterValueType?: 'String';
 }
 export declare class TextInputDef<T extends object> extends AccessorDef<T, StringFilterValueType> {
     readonly accessorType: "Text";
     constructor(props: TextInputDefProps<T>);
+    private _filterFn;
+    get filterFn(): CustomFilterFn | FilterFn<T, StringFilterValueType> | undefined;
+    set filterFn(v: CustomFilterFn | FilterFn<T, StringFilterValueType> | undefined);
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.js

@@ -4,5 +4,13 @@ export class TextInputDef extends AccessorDef {
     accessorType = AccessorType.Text;
     constructor(props) {
         super(props);
+        this._filterFn = $state(props.filterFn);
+    }
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
     }
 }

package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.d.ts

@@ -12,4 +12,5 @@ export declare class ActionsDef<T extends object> extends ColumnDef<T> {
     readonly actions: TableActionButton<T>[];
     readonly isEnabled?: (item: T, index: number, button: TableActionButton<T>) => boolean | Promise<boolean>;
     readonly getColourSet?: (item: T, index: number, button: TableActionButton<T>) => ColourSet;
+    readonly filterFn: undefined;
 }

package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js

@@ -6,7 +6,8 @@ export class ActionsDef extends ColumnDef {
         super({
             id: `actions-${generateUUID()}`,
             header: 'Actions',
-            allowSorting: false
+            allowSorting: false,
+            allowFiltering: false
         });
         this.actions = $derived(props.actions);
         this.isEnabled = $derived(props.isEnabled);
@@ -16,4 +17,5 @@ export class ActionsDef extends ColumnDef {
     actions;
     isEnabled; // assumed true if missing
     getColourSet;
+    filterFn = undefined;
 }

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

@@ -6,7 +6,7 @@ import { ColumnType } from '../ColumnType.js';
 import type { AccessorFn } from './AccessorFn.js';
 import type { ValidationFn } from './ValidationFn.js';
 import type { FilterValueType } from '../../Filtering/FilterValueType.js';
-export interface ColumnDefProps<T extends object> {
+export interface ColumnDefProps<T extends object, FilterFnType = undefined> {
     id: string;
     header: string | Snippet;
     index?: number;
@@ -18,12 +18,12 @@ export interface ColumnDefProps<T extends object> {
     editable?: boolean;
     resizable?: boolean;
     isValid?: ValidationFn<T>;
-    filterFn?: FilterFn<T, unknown> | CustomFilterFn;
+    filterFn?: FilterFn<T, FilterFnType> | CustomFilterFn;
     filterValueType?: FilterValueType;
     accessorFn?: AccessorFn<T>;
 }
-export declare abstract class ColumnDef<T extends object, __filterValueType = unknown> {
-    protected constructor(props: ColumnDefProps<T>);
+export declare abstract class ColumnDef<T extends object, FilterFnType = undefined> {
+    protected constructor(props: ColumnDefProps<T, FilterFnType>);
     readonly id: string;
     private _index;
     get index(): number;
@@ -34,9 +34,7 @@ export declare abstract class ColumnDef<T extends object, __filterValueType = un
     readonly allowFiltering: boolean;
     readonly isValid: ValidationFn<T> | undefined;
     readonly accessorFn: AccessorFn<T> | undefined;
-    private _filterFn;
-    get filterFn(): FilterFn<T, __filterValueType> | CustomFilterFn | undefined;
-    set filterFn(v: FilterFn<T, __filterValueType> | CustomFilterFn | undefined);
+    abstract filterFn: FilterFn<T, FilterFnType> | CustomFilterFn | undefined;
     private _minSize;
     get minSize(): Pixels;
     set minSize(v: Pixels);

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -7,7 +7,6 @@ export class ColumnDef {
         this.allowFiltering = $derived(props.allowFiltering ?? true);
         this.allowSorting = $derived(props.allowSorting ?? true);
         this.isValid = $derived(props.isValid);
-        this._filterFn = $state(props.filterFn);
         this.accessorFn = $derived(props.accessorFn);
         this._minSize = $state(props.minSize ?? 48);
         this._width = $state(props.width ?? props.minSize ?? 48);
@@ -29,13 +28,6 @@ export class ColumnDef {
     allowFiltering;
     isValid;
     accessorFn;
-    _filterFn;
-    get filterFn() {
-        return this._filterFn;
-    }
-    set filterFn(v) {
-        this._filterFn = v;
-    }
     _minSize;
     get minSize() {
         return this._minSize;

package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.d.ts

@@ -7,12 +7,12 @@ export interface DisplayDefModalProps<T extends object> {
     onclose: () => void;
     onsubmit: () => void;
 }
-export interface AbstractDisplayDefProps<T extends object> extends ColumnDefProps<T> {
+export interface AbstractDisplayDefProps<T extends object, FilterFnType = undefined> extends ColumnDefProps<T, FilterFnType> {
     modal?: Component<any, any, any>;
 }
-export declare abstract class AbstractDisplayDef<T extends object> extends ColumnDef<T> {
+export declare abstract class AbstractDisplayDef<T extends object, FilterFnType = undefined> extends ColumnDef<T, FilterFnType> {
     abstract readonly displayType: DisplayType;
-    constructor(props: AbstractDisplayDefProps<T>);
+    constructor(props: AbstractDisplayDefProps<T, FilterFnType>);
     readonly columnType: "Display";
     readonly modal: Component<DisplayDefModalProps<T>, any, any> | undefined;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { BubbleColour } from '../../../../../Bubble.svelte';
 import { AbstractDisplayDef, type AbstractDisplayDefProps } from './AbstractDisplayDef.svelte.js';
-export interface BubbleDefProps<T extends object> extends AbstractDisplayDefProps<T> {
+import type { FilterFn, StringFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+export interface BubbleDefProps<T extends object> extends AbstractDisplayDefProps<T, StringFilterValueType> {
     getColour?: (item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>;
 }
-export declare class BubbleDef<T extends object> extends AbstractDisplayDef<T> {
+export declare class BubbleDef<T extends object> extends AbstractDisplayDef<T, StringFilterValueType> {
     readonly displayType: "Bubbles";
     constructor(props: BubbleDefProps<T>);
+    private _filterFn;
+    get filterFn(): FilterFn<T, StringFilterValueType> | CustomFilterFn | undefined;
+    set filterFn(v: FilterFn<T, StringFilterValueType> | CustomFilterFn | undefined);
     getColour: ((item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>) | undefined;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.js

@@ -5,6 +5,14 @@ export class BubbleDef extends AbstractDisplayDef {
     constructor(props) {
         super(props);
         this.getColour = $derived(props.getColour);
+        this._filterFn = $state(props.filterFn);
+    }
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
     }
     getColour;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.d.ts

@@ -1,8 +1,13 @@
 import { AbstractDisplayDef, type AbstractDisplayDefProps } from './AbstractDisplayDef.svelte.js';
 import { DisplayType } from '../../DisplayType.js';
-export interface DisplayDefProps<T extends object> extends AbstractDisplayDefProps<T> {
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { FilterFn } from '../../../Filtering/FilterFn.js';
+export interface DisplayDefProps<T extends object> extends AbstractDisplayDefProps<T, any> {
 }
-export declare class DisplayDef<T extends object> extends AbstractDisplayDef<T> {
+export declare class DisplayDef<T extends object> extends AbstractDisplayDef<T, any> {
     readonly displayType: DisplayType;
     constructor(props: DisplayDefProps<T>);
+    private _filterFn;
+    get filterFn(): CustomFilterFn | FilterFn<T, any> | undefined;
+    set filterFn(v: CustomFilterFn | FilterFn<T, any> | undefined);
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.js

@@ -4,5 +4,13 @@ export class DisplayDef extends AbstractDisplayDef {
     displayType = DisplayType.Normal;
     constructor(props) {
         super(props);
+        this._filterFn = $state(props.filterFn);
+    }
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
     }
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { BubbleColour } from '../../../../../Bubble.svelte';
 import { AbstractDisplayDef, type AbstractDisplayDefProps } from './AbstractDisplayDef.svelte.js';
-export interface ProgressBarDefProps<T extends object> extends AbstractDisplayDefProps<T> {
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { FilterFn, NumberFilterValueType } from '../../../Filtering/FilterFn.js';
+export interface ProgressBarDefProps<T extends object> extends AbstractDisplayDefProps<T, NumberFilterValueType> {
     getColour: (item: T, index: number, value: [number, number]) => BubbleColour | Promise<BubbleColour> | undefined;
 }
-export declare class ProgressBarDef<T extends object> extends AbstractDisplayDef<T> {
+export declare class ProgressBarDef<T extends object> extends AbstractDisplayDef<T, NumberFilterValueType> {
     readonly displayType: "Progress";
     constructor(props: ProgressBarDefProps<T>);
     readonly getColour: (item: T, index: number, value: [number, number]) => BubbleColour | Promise<BubbleColour> | undefined;
+    private _filterFn;
+    get filterFn(): FilterFn<T, NumberFilterValueType> | CustomFilterFn | undefined;
+    set filterFn(v: FilterFn<T, NumberFilterValueType> | CustomFilterFn | undefined);
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.js

@@ -5,6 +5,14 @@ export class ProgressBarDef extends AbstractDisplayDef {
     constructor(props) {
         super(props);
         this.getColour = $derived(props.getColour);
+        this._filterFn = $state(props.filterFn);
     }
     getColour;
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
+    }
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.d.ts

@@ -3,8 +3,9 @@ import type { ValidationFn } from '../ValidationFn.js';
 export interface ValidityDefProps<T extends object> extends AbstractDisplayDefProps<T> {
     isValid: ValidationFn<T>;
 }
-export declare class ValidityDef<T extends object> extends AbstractDisplayDef<T> {
+export declare class ValidityDef<T extends object> extends AbstractDisplayDef<T, undefined> {
     readonly displayType: "Validity";
     constructor(props: ValidityDefProps<T>);
+    readonly filterFn: undefined;
     readonly isValid: ValidationFn<T>;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.js

@@ -4,8 +4,10 @@ export class ValidityDef extends AbstractDisplayDef {
     displayType = DisplayType.Validity;
     constructor(props) {
         props.allowSorting = false;
+        props.allowFiltering = false;
         super(props);
         this.isValid = $derived(props.isValid);
     }
+    filterFn = undefined;
     isValid;
 }

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

@@ -10,9 +10,10 @@ export interface ExpandDefProps<T extends object, R extends object> extends Colu
     innerTableOptions: TableInitOptions<R>;
     accessorFn: (item: T, index: number) => R[] | Promise<R[]>;
 }
-export declare class ExpandDef<T extends object, R extends object = object> extends ColumnDef<T> {
+export declare class ExpandDef<T extends object, R extends object = object> extends ColumnDef<T, undefined> {
     readonly columnType: "Expand";
     constructor(props: ExpandDefProps<T, R>);
+    readonly filterFn: undefined;
     readonly innerTableName: string;
     readonly getInnerColumnDefs: (item: T, index: number) => DefsWrapper<R>;
     readonly headerIcon: IconProps['name'];

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

@@ -3,6 +3,8 @@ import { ColumnDef } from '../ColumnDef.svelte.js';
 export class ExpandDef extends ColumnDef {
     columnType = ColumnType.Expand;
     constructor(props) {
+        props.allowFiltering = false;
+        props.allowSorting = false;
         super(props);
         this.isEnabled = $derived(props.isEnabled);
         this.headerIcon = $derived(props.headerIcon);
@@ -10,6 +12,7 @@ export class ExpandDef extends ColumnDef {
         this.innerTableName = $derived(props.innerTableName);
         this.innerTableOptions = $derived(props.innerTableOptions);
     }
+    filterFn = undefined;
     innerTableName;
     getInnerColumnDefs;
     headerIcon;

package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.d.ts

@@ -1,9 +1,11 @@
-import type { StringFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { FilterFn } from '../../../Filtering/FilterFn.js';
 import { ColumnType } from '../../ColumnType.js';
 import { ColumnDef, type ColumnDefProps } from '../ColumnDef.svelte.js';
-export interface FilterOnlyDefProps<T extends object> extends ColumnDefProps<T> {
+export interface FilterOnlyDefProps<T extends object, FilterFnType> extends ColumnDefProps<T, FilterFnType> {
 }
-export declare class FilterOnlyDef<T extends object> extends ColumnDef<T, StringFilterValueType> {
+export declare class FilterOnlyDef<T extends object, FilterFnType> extends ColumnDef<T, FilterFnType> {
     readonly columnType: ColumnType;
-    constructor(props: FilterOnlyDefProps<T>);
+    constructor(props: FilterOnlyDefProps<T, FilterFnType>);
+    readonly filterFn: CustomFilterFn | FilterFn<T, FilterFnType> | undefined;
 }

package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.js

@@ -5,4 +5,5 @@ export class FilterOnlyDef extends ColumnDef {
     constructor(props) {
         super(props);
     }
+    filterFn;
 }

package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.d.ts

@@ -4,4 +4,5 @@ export declare class RowSelectionDef<T extends object> extends ColumnDef<T> {
     readonly isSelectable: (item: T, index: number) => boolean | Promise<boolean>;
     readonly columnType: ColumnType;
     constructor(isSelectable: (item: T, index: number) => boolean | Promise<boolean>);
+    readonly filterFn: undefined;
 }

package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js

@@ -8,8 +8,10 @@ export class RowSelectionDef extends ColumnDef {
         super({
             id: `is-selectable-${generateUUID()}`,
             header: 'Row Selected',
-            allowSorting: false
+            allowSorting: false,
+            allowFiltering: false
         });
         this.isSelectable = isSelectable;
     }
+    filterFn;
 }

package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts

@@ -174,7 +174,7 @@ export declare class TableContext<T extends object> {
     readonly lastPage: number;
     readonly measureHeaderWidth: (columnDef: ColumnDef<T>) => number;
     readonly autoResize: (columnDef: ColumnDef<T>) => Promise<void>;
-    reorderColumn: (dropTarget: HTMLLIElement | HTMLTableCellElement | null) => ColumnDef<T, unknown>[] | undefined;
+    reorderColumn: (dropTarget: HTMLLIElement | HTMLTableCellElement | null) => ColumnDef<T, undefined>[] | undefined;
     copyHighlightedRowsToClipboard: () => Promise<void>;
     copyDataToClipboard: () => Promise<void>;
     private _performRowCopy;

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

@@ -14,6 +14,8 @@ import { DateInputDef } from '../Columns/Definitions/Accessors/DateInputDef.svel
 import { ProgressBarDef } from '../Columns/Definitions/Display/ProgressBarDef.svelte.js';
 import { DisplayDef } from '../Columns/Definitions/Display/DisplayDef.svelte.js';
 import { browser } from '$app/environment';
+import { ActionsDef } from '../Columns/Definitions/Actions/ActionsDef.svelte.js';
+import { BubbleDef } from '../Columns/Definitions/Display/BubbleDef.svelte.js';
 const SORTING_ICON_WIDTH = 24;
 const InternalSymbol = Symbol();
 export class TableContext {
@@ -1551,7 +1553,16 @@ export class TableContext {
             newPresets.push(newPreset);
         }
         this.columnPresets = newPresets;
-        const stringified = JSON.stringify(newPresets);
+        const jsonFriendly = newPresets.map((preset) => {
+            return {
+                ...preset,
+                columnPinningState: {
+                    left: [...(preset.columnPinningState.left?.entries() ?? [])],
+                    right: [...(preset.columnPinningState.right?.entries() ?? [])]
+                }
+            };
+        });
+        const stringified = JSON.stringify(jsonFriendly);
         localStorage.setItem(`${this.userId}-${this.tableName}-presets`, stringified);
         this.setSelectedPreset(newPreset);
     };
@@ -1899,30 +1910,40 @@ export class TableContext {
                     def.filterFn = this.dateFilter;
                 }
             }
-            else if (this.paginationRepo?.paginationType == PaginationType.Local && !def.filterFn) {
-                switch (def.filterValueType) {
-                    case undefined:
-                    case 'String': {
-                        def.filterFn = this.stringFilter;
-                        break;
-                    }
-                    case 'Bool': {
-                        def.filterFn = this.boolFilter;
-                        break;
-                    }
-                    case 'Date': {
-                        def.filterFn = this.dateFilter;
-                        break;
-                    }
-                    case 'Number': {
-                        def.filterFn = this.numberFilter;
-                        break;
-                    }
-                    case 'Select': {
-                        def.filterFn = this.selectFilter;
-                        break;
+            else if (this.paginationRepo?.paginationType == PaginationType.Local &&
+                !def.filterFn &&
+                def.allowFiltering != false) {
+                if (def instanceof DisplayDef) {
+                    switch (def.filterValueType) {
+                        case undefined:
+                        case 'String': {
+                            def.filterFn = this.stringFilter;
+                            break;
+                        }
+                        case 'Bool': {
+                            def.filterFn = this.boolFilter;
+                            break;
+                        }
+                        case 'Date': {
+                            def.filterFn = this.dateFilter;
+                            break;
+                        }
+                        case 'Number': {
+                            def.filterFn = this.numberFilter;
+                            break;
+                        }
+                        case 'Select': {
+                            def.filterFn = this.selectFilter;
+                            break;
+                        }
                     }
                 }
+                else if (def instanceof BubbleDef) {
+                    def.filterFn = this.stringFilter;
+                }
+                else if (def instanceof ProgressBarDef) {
+                    def.filterFn = this.numberFilter;
+                }
             }
             return def;
         });
@@ -2331,9 +2352,10 @@ function progressSortingFn(id, desc) {
         };
 }
 function adaptJSONPinningState(state) {
+    //HACK ignore previously broken pinning states
     return {
-        left: new Map(state.left),
-        right: new Map(state.right)
+        left: new Map(Array.isArray(state.left) ? state.left : []),
+        right: new Map(Array.isArray(state.right) ? state.right : [])
     };
 }
 // #endregion

package/dist/scss/_mixins.scss

@@ -1782,6 +1782,8 @@
 		padding-left: 4px;
 		padding-right: 4px;
 		gap: 4px;
+		width: 100%;
+		justify-content: space-around;
 	}
 	td {
 		background-color: colours.$ui-blue-1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "publishConfig": {
     "access": "restricted"
   },
@@ -29,42 +29,42 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.38.0",
+    "@chromatic-com/storybook": "^4.1.2",
+    "@eslint/compat": "^1.4.1",
+    "@eslint/js": "^9.39.1",
     "@playwright/test": "^1.56.1",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-a11y": "^9.1.16",
+    "@storybook/addon-docs": "^9.1.16",
     "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/addon-vitest": "^9.1.13",
-    "@storybook/sveltekit": "^9.1.13",
+    "@storybook/addon-vitest": "^9.1.16",
+    "@storybook/sveltekit": "^9.1.16",
     "@sveltejs/adapter-node": "^5.4.0",
-    "@sveltejs/kit": "^2.47.3",
+    "@sveltejs/kit": "^2.48.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^20.19.23",
-    "@typescript-eslint/eslint-plugin": "^8.46.2",
-    "@typescript-eslint/parser": "^8.46.2",
+    "@types/node": "^20.19.25",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
     "@vitest/browser": "^3.2.4",
-    "eslint": "^9.38.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^9.1.13",
-    "eslint-plugin-svelte": "^3.12.5",
-    "globals": "^16.4.0",
+    "eslint-plugin-storybook": "^9.1.16",
+    "eslint-plugin-svelte": "^3.13.0",
+    "globals": "^16.5.0",
     "mdsvex": "^0.12.6",
     "playwright": "^1.56.1",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.15",
-    "sass-embedded": "^1.93.2",
-    "storybook": "^9.1.13",
-    "svelte": "^5.41.3",
-    "svelte-check": "^4.3.3",
+    "sass-embedded": "^1.93.3",
+    "storybook": "^9.1.16",
+    "svelte": "~5.40.2",
+    "svelte-check": "^4.3.4",
     "svelte-render-scan": "^1.1.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2",
-    "vite": "^7.1.12",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.2",
     "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^3.2.4",
     "vitest-browser-svelte": "^1.1.0"