@lavalogic/scoria 0.0.45 → 0.0.47

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/JSONColumnDefSet.d.ts

@@ -0,0 +1,11 @@
+import type { SortingState } from '../../DataRepository/SortingState.js';
+import type { JSONColumnPinningState } from '../JSONColumnPinningState.js';
+import type { VisibilityState } from '../VisibilityState.js';
+import type { ColumnDef } from './ColumnDef.svelte.js';
+export interface JSONColumnDefSet<T extends object> {
+    name: string;
+    sortingState: SortingState;
+    visibilityState: VisibilityState;
+    columnPinningState: JSONColumnPinningState;
+    columnDefs: Array<ColumnDef<T>>;
+}

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/Columns/JSONColumnPinningState.d.ts

@@ -0,0 +1,4 @@
+export interface JSONColumnPinningState {
+    left?: Array<[string, number]>;
+    right?: Array<[string, number]>;
+}

package/dist/Components/Table/Types/Columns/JSONColumnPinningState.js

@@ -0,0 +1 @@
+export {};

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,8 +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 { NumberDateFilterMode } from '../Filtering/NumberDateFilterMode.js';
-import { FilterValueType } from '../Filtering/FilterValueType.js';
+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 {
@@ -100,7 +100,7 @@ export class TableContext {
                     if (savedPresets) {
                         const presets = JSON.parse(savedPresets);
                         if (presets[0] && areDefsEquivalent(defs, presets[0].columnDefs)) {
-                            return this.reassignDefsToPresets(presets).then(() => presets);
+                            return this.reassignDefsToPresets(presets).then((p) => p);
                         }
                     }
                 }
@@ -638,10 +638,6 @@ export class TableContext {
             const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId) ?? []);
             const centerVisibleCells = $derived(this.columnDefs
                 .filter((it) => {
-                if (this.columnPinning.left && typeof this.columnPinning.left.has != 'function') {
-                    // eslint-disable-next-line no-debugger
-                    debugger;
-                }
                 return !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id));
             })
                 .map(makeRow));
@@ -1557,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);
     };
@@ -1617,10 +1622,6 @@ export class TableContext {
         const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId) ?? []);
         const centerVisibleCells = $derived(this.columnDefs
             .filter((it) => {
-            if (this.columnPinning.left && typeof this.columnPinning.left.has != 'function') {
-                // eslint-disable-next-line no-debugger
-                debugger;
-            }
             return !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id));
         })
             .map(makeRow));
@@ -1846,10 +1847,6 @@ export class TableContext {
         const midDefs = [];
         const rightDefs = [];
         this.columnDefs.forEach((def) => {
-            if (this.columnPinning.left && typeof this.columnPinning.left.has != 'function') {
-                // eslint-disable-next-line no-debugger
-                debugger;
-            }
             if (this.columnPinning.left?.has(def.id)) {
                 leftDefs.push(def);
             }
@@ -1913,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;
         });
@@ -1981,10 +1988,6 @@ export class TableContext {
             left: new Map(this.columnPinning.left &&
                 this.columnDefs
                     .filter((col) => {
-                    if (this.columnPinning.left && typeof this.columnPinning.left.has != 'function') {
-                        // eslint-disable-next-line no-debugger
-                        debugger;
-                    }
                     this.columnPinning.left?.has(col.id);
                 })
                     .map((col, index) => [col.id, index])),
@@ -2021,16 +2024,20 @@ export class TableContext {
         const adjustedDefs = this.columnDefs;
         const asMap = columnDefsToMap(adjustedDefs);
         console.log('reassigning presets');
-        presets.forEach((preset) => {
-            preset.columnDefs.forEach((def, index) => {
-                const realDef = def.columnType == ColumnType.RowSelect || def.columnType == ColumnType.Actions
-                    ? adjustedDefs.find((it) => it.columnType === def.columnType)
-                    : asMap.get(def.id);
-                if (!realDef) {
-                    throw new Error('Could not find equivalent column def:', { cause: def });
-                }
-                preset.columnDefs[index] = realDef;
-            });
+        return presets.map((preset) => {
+            return {
+                ...preset,
+                columnPinningState: adaptJSONPinningState(preset.columnPinningState),
+                columnDefs: preset.columnDefs.map((def, index) => {
+                    const realDef = def.columnType == ColumnType.RowSelect || def.columnType == ColumnType.Actions
+                        ? adjustedDefs.find((it) => it.columnType === def.columnType)
+                        : asMap.get(def.id);
+                    if (!realDef) {
+                        throw new Error('Could not find equivalent column def:', { cause: def });
+                    }
+                    return (preset.columnDefs[index] = realDef);
+                })
+            };
         });
     }
 }
@@ -2143,11 +2150,6 @@ function generateTableOptions(contextObj) {
             if (!isVisible) {
                 return false;
             }
-            if (contextObj.columnPinning.left &&
-                typeof contextObj.columnPinning.left.has != 'function') {
-                // eslint-disable-next-line no-debugger
-                debugger;
-            }
             return contextObj.columnPinning.left?.has(it.id);
         })
             .map(makeHeader);
@@ -2174,11 +2176,6 @@ function generateTableOptions(contextObj) {
     const centerHeaderGroups = $derived.by(() => {
         const headers = contextObj.columnDefs
             .filter((it) => {
-            if (contextObj.columnPinning.left &&
-                typeof contextObj.columnPinning.left.has != 'function') {
-                // eslint-disable-next-line no-debugger
-                debugger;
-            }
             return (contextObj.columnVisibility[it.id] != false &&
                 !(contextObj.columnPinning.left?.has(it.id) || contextObj.columnPinning.right?.has(it.id)));
         })
@@ -2354,4 +2351,11 @@ function progressSortingFn(id, desc) {
             return 0;
         };
 }
+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 : [])
+    };
+}
 // #endregion

package/dist/index.d.ts

@@ -21,7 +21,6 @@ export { type AccessorFn } from './Components/Table/Types/Columns/Definitions/Ac
 export { type ColumnDefProps, ColumnDef } from './Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js';
 export { type ColumnDefSet } from './Components/Table/Types/Columns/Definitions/ColumnDefSet.js';
 export { type ValidationFn } from './Components/Table/Types/Columns/Definitions/ValidationFn.js';
-export { type ColumnDefPreset } from './Components/Table/Types/Columns/ColumnDefPreset.js';
 export { type ColumnPinningState } from './Components/Table/Types/Columns/ColumnPinningState.js';
 export { type ColumnSizingState } from './Components/Table/Types/Columns/ColumnSizingState.js';
 export { ColumnType } from './Components/Table/Types/Columns/ColumnType.js';

package/dist/index.js

@@ -26,7 +26,6 @@ export { ColumnDef } from './Components/Table/Types/Columns/Definitions/ColumnDe
 export {} from './Components/Table/Types/Columns/Definitions/ColumnDefSet.js';
 export {} from './Components/Table/Types/Columns/Definitions/ValidationFn.js';
 // Column is not exported
-export {} from './Components/Table/Types/Columns/ColumnDefPreset.js';
 export {} from './Components/Table/Types/Columns/ColumnPinningState.js';
 export {} from './Components/Table/Types/Columns/ColumnSizingState.js';
 export { ColumnType } from './Components/Table/Types/Columns/ColumnType.js';

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;