@lavalogic/scoria 0.0.29 → 0.0.30

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

@@ -35,7 +35,8 @@ export class ExampleItemColumnDef {
             }),
             new DisplayDef({
                 header: 'ID',
-                id: 'id'
+                id: 'id',
+                filterValueType: 'Number'
             }),
             new TextInputDef({
                 header: 'Name',

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

@@ -26,6 +26,7 @@
 	import QuerySelect from '../../QuerySelect.svelte';
 	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
 	import { AbstractDisplayDef } from '../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
+	import { dev } from '$app/environment';
 
 	export const stringFilterTypes = [
 		{ value: StringFilterMode.Equals, label: 'Equals' },
@@ -175,6 +176,11 @@
 		} else if (def instanceof SelectDef) {
 			untrack(async () => {
 				try {
+					if (dev) {
+						// eslint-disable-next-line no-debugger
+						debugger;
+					}
+					// TODO see if we can change the below not to use array.includes
 					const x = (await options).filter((it) => {
 						return (filteringStateValue as unknown as Array<string | number> | undefined)?.includes(
 							it.value

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

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

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

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

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

@@ -1,6 +1,7 @@
 import type { StringFilterValueType } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
 export interface TextInputDefProps<T extends object> extends AccessorDefProps<T> {
+    filterValueType?: 'String';
 }
 export declare class TextInputDef<T extends object> extends AccessorDef<T, StringFilterValueType> {
     readonly accessorType: "Text";

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

@@ -5,6 +5,7 @@ import type { FilterFn } from '../../Filtering/FilterFn.js';
 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> {
     id: string;
     header: string | Snippet;
@@ -17,9 +18,10 @@ export interface ColumnDefProps<T extends object> {
     resizable?: boolean;
     isValid?: ValidationFn<T>;
     filterFn?: FilterFn<T, unknown> | CustomFilterFn;
+    filterValueType?: FilterValueType;
     accessorFn?: AccessorFn<T>;
 }
-export declare abstract class ColumnDef<T extends object, FilterValueType = unknown> {
+export declare abstract class ColumnDef<T extends object, __filterValueType = unknown> {
     protected constructor(props: ColumnDefProps<T>);
     readonly id: string;
     private _index;
@@ -31,8 +33,8 @@ export declare abstract class ColumnDef<T extends object, FilterValueType = unkn
     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);
+    get filterFn(): FilterFn<T, __filterValueType> | CustomFilterFn | undefined;
+    set filterFn(v: FilterFn<T, __filterValueType> | CustomFilterFn | undefined);
     private _minSize;
     get minSize(): Pixels;
     set minSize(v: Pixels);
@@ -45,6 +47,9 @@ export declare abstract class ColumnDef<T extends object, FilterValueType = unkn
     private _visible;
     get visible(): boolean;
     set visible(v: boolean);
+    private _filterValueType;
+    get filterValueType(): FilterValueType | undefined;
+    set filterValueType(v: FilterValueType | undefined);
     toJSON(): object;
     readonly editable: boolean;
     readonly resizable: boolean;

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

@@ -13,6 +13,7 @@ export class ColumnDef {
         this.editable = $derived(props.editable ?? false);
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
+        this._filterValueType = $derived(props.filterValueType);
     }
     id;
     _index;
@@ -69,6 +70,13 @@ export class ColumnDef {
         }
         this._isResizing = v;
     }
+    _filterValueType;
+    get filterValueType() {
+        return this._filterValueType;
+    }
+    set filterValueType(v) {
+        this._filterValueType = v;
+    }
     toJSON() {
         return { columnType: this.columnType, id: this.id, header: this.header };
     }

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

@@ -33,7 +33,7 @@ export declare class TableContext<T extends object> {
     private _onEditCell;
     static readonly identifier: unique symbol;
     static init<T extends object>(defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, options: TableInitOptions<T>): TableContext<T>;
-    constructor(INTERNAL_ONLY: symbol, defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, allowCopy: boolean, enableResize: boolean, allowColumnReordering: boolean, allowQuickFiltering: boolean, allowAdvancedFiltering: boolean, toolbarPosition: ToolbarPosition, displayFooter: boolean, selectionExtractor: TableInitOptions<T>['selectionExtractor'], getUserId: () => string | undefined, _onEditCell?: TableInitOptions<T>['onEditCell']);
+    protected constructor(INTERNAL_ONLY: symbol, defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, allowCopy: boolean, enableResize: boolean, allowColumnReordering: boolean, allowQuickFiltering: boolean, allowAdvancedFiltering: boolean, toolbarPosition: ToolbarPosition, displayFooter: boolean, selectionExtractor: TableInitOptions<T>['selectionExtractor'], getUserId: () => string | undefined, _onEditCell?: TableInitOptions<T>['onEditCell']);
     private readonly userId;
     private isSelectable;
     __queryValues: SvelteMap<string, unknown>;
@@ -52,16 +52,11 @@ export declare class TableContext<T extends object> {
     private _showSelectedOnly;
     get showSelectedOnly(): boolean;
     set showSelectedOnly(v: boolean);
-    private readonly _dateFilter;
-    get dateFilter(): FilterFn<T, DateFilterValueType> | undefined;
-    private readonly _numberFilter;
-    get numberFilter(): FilterFn<T, NumberFilterValueType> | undefined;
-    private readonly _selectFilter;
-    get selectFilter(): FilterFn<T, SelectFilterValueType<T>> | undefined;
-    private readonly _boolFilter;
-    get boolFilter(): FilterFn<T, BoolFilterValueType> | undefined;
-    private readonly _stringFilter;
-    get stringFilter(): FilterFn<T, StringFilterValueType> | undefined;
+    readonly dateFilter: FilterFn<T, DateFilterValueType> | undefined;
+    readonly numberFilter: FilterFn<T, NumberFilterValueType> | undefined;
+    readonly selectFilter: FilterFn<T, SelectFilterValueType<T>> | undefined;
+    readonly boolFilter: FilterFn<T, BoolFilterValueType> | undefined;
+    readonly stringFilter: FilterFn<T, StringFilterValueType> | undefined;
     private _limitFooter;
     get limitFooter(): boolean;
     set limitFooter(v: boolean);
@@ -147,6 +142,8 @@ export declare class TableContext<T extends object> {
     private columnDefsById;
     private readonly getSortingFn;
     readonly originalRowIndices: Map<T, number>;
+    readonly filteredIndeces: number[];
+    readonly filteredData: T[];
     readonly sortedData: T[];
     readonly sortedRowModel: RowModel<T>;
     _currentPageData: T[];
@@ -214,6 +211,7 @@ export declare class TableContext<T extends object> {
      * This listener should be added and removed based on isMousingDown
      */
     readonly setFocusEnd: (coords: CellCoordinates) => void;
+    private createRow;
     private columnDefReturnsTextValue;
     private _updateLocalStorageSettings;
     private _moveFocusEndRow;

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 { NumberDateFilterMode } from '../Filtering/NumberDateFilterMode.js';
+import { FilterValueType } from '../Filtering/FilterValueType.js';
 const SORTING_ICON_WIDTH = 24;
 const InternalSymbol = Symbol();
 export class TableContext {
@@ -88,12 +90,13 @@ export class TableContext {
                 this.columnPresets = [...this.columnPresets, defaultPreset];
             };
             this.setupDefaultColumnDefs()
-                .then(() => {
+                .then((defs) => {
+                this.isSelectable = defs.some((it) => it.id.startsWith('is-selectable-'));
                 if (this.allowColumnReordering) {
                     const savedPresets = localStorage.getItem(`${this.userId}-${tableName}-presets`);
                     if (savedPresets) {
                         const presets = JSON.parse(savedPresets);
-                        if (presets[0] && areDefsEquivalent(this.columnDefs, presets[0].columnDefs)) {
+                        if (presets[0] && areDefsEquivalent(defs, presets[0].columnDefs)) {
                             return this.reassignDefsToPresets(presets).then(() => presets);
                         }
                     }
@@ -133,7 +136,7 @@ export class TableContext {
     // #endregion
     // #region stores
     userId;
-    isSelectable = $derived(this.columnDefs.some((it) => it.id.includes('is-selectable-')));
+    isSelectable = $state(false);
     __queryValues = new SvelteMap();
     _paginationRepo = $state();
     get paginationRepo() {
@@ -170,26 +173,11 @@ export class TableContext {
     set showSelectedOnly(v) {
         this._showSelectedOnly = v;
     }
-    _dateFilter = $derived(this.paginationRepo?.dateFilter);
-    get dateFilter() {
-        return this._dateFilter;
-    }
-    _numberFilter = $derived(this.paginationRepo?.numberFilter);
-    get numberFilter() {
-        return this._numberFilter;
-    }
-    _selectFilter = $derived(this.paginationRepo?.selectFilter);
-    get selectFilter() {
-        return this._selectFilter;
-    }
-    _boolFilter = $derived(this.paginationRepo?.boolFilter);
-    get boolFilter() {
-        return this._boolFilter;
-    }
-    _stringFilter = $derived(this.paginationRepo?.stringFilter);
-    get stringFilter() {
-        return this._stringFilter;
-    }
+    dateFilter = $derived(this.paginationRepo?.dateFilter);
+    numberFilter = $derived(this.paginationRepo?.numberFilter);
+    selectFilter = $derived(this.paginationRepo?.selectFilter);
+    boolFilter = $derived(this.paginationRepo?.boolFilter);
+    stringFilter = $derived(this.paginationRepo?.stringFilter);
     _limitFooter = $state(false);
     get limitFooter() {
         return this._limitFooter;
@@ -507,13 +495,62 @@ export class TableContext {
     };
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     originalRowIndices = $derived(new Map((this.dataRepo?.data ?? []).map((item, index) => [item, index])));
+    filteredIndeces = $derived.by(() => {
+        if (this.paginationRepo?.paginationType == PaginationType.Local) {
+            const filterState = this.dataRepo?.filtering ?? [];
+            const data = this.dataRepo?.data ?? [];
+            if (!filterState.length) {
+                return data.map((_, index) => index) ?? [];
+            }
+            const filtered = data
+                .map((item, index) => {
+                const row = this.createRow(item, index, index);
+                const x = filterState.every((filter) => {
+                    const def = this.columnDefsById.get(filter.id);
+                    if (!def) {
+                        console.warn(`Could not find column def for filter with id ${filter.id}`);
+                        return true;
+                    }
+                    if (def.filterFn) {
+                        const x = def.filterFn(row, filter.id, filter.value);
+                        // debugger;
+                        return x;
+                    }
+                    console.warn(`row ${row.id} did not have a filter function`);
+                    return false;
+                });
+                // debugger;
+                if (x) {
+                    return index;
+                }
+                else {
+                    return null;
+                }
+            })
+                .filter((it) => it != null);
+            return filtered;
+        }
+        return this.dataRepo?.data.map((_, index) => index) ?? [];
+    });
+    filteredData = $derived.by(() => {
+        if (this.paginationRepo?.paginationType == PaginationType.Local) {
+            const data = this.showSelectedOnly
+                ? // FIXME this will show the selected items by order of insertion to the selectedItems map.
+                    [...this.selectedItems.values()]
+                : (this.filteredIndeces.map((index) => {
+                    return this.dataRepo.data[index];
+                }) ?? []);
+            return data;
+        }
+        return this.dataRepo?.data ?? [];
+    });
     sortedData = $derived.by(() => {
         if (this.paginationRepo?.paginationType == PaginationType.Local) {
             const state = this.dataRepo?.sorting ?? [];
             const sortedData = this.showSelectedOnly
                 ? // FIXME this will show the selected items by order of insertion to the selectedItems map.
                     [...this.selectedItems.values()]
-                : (this.dataRepo?.data.concat() ?? []);
+                : this.filteredData.concat();
             sortedData.sort((a, b) => {
                 const end = state.length;
                 for (let i = 0; i < end; i++) {
@@ -533,59 +570,12 @@ export class TableContext {
             });
             return sortedData;
         }
-        return this.dataRepo?.data ?? [];
+        return this.filteredData ?? [];
     });
     sortedRowModel = $derived.by(() => {
         const rows = this.sortedData.map((item, index) => {
             const unsortedIndex = this.originalRowIndices.get(item) ?? index;
-            const row = {
-                getValue: (key) => this.columnDefsById.get(key).accessorFn?.(item, unsortedIndex) ?? item[key],
-                original: item,
-                visibleIndex: index,
-                originalIndex: unsortedIndex,
-                id: index.toString(),
-                getLeftVisibleCells: () => leftVisibleCells,
-                getRightVisibleCells: () => rightVisibleCells,
-                getCenterVisibleCells: () => centerVisibleCells
-            };
-            const makeRow = (def) => {
-                const isVisible = $derived(this.columnVisibility[def.id] != false);
-                const isSorted = $derived.by(() => {
-                    const sortState = this.paginationRepo?.sorting.find((it) => it.id == def.id);
-                    if (!sortState) {
-                        return 'none';
-                    }
-                    if (sortState.desc) {
-                        return 'desc';
-                    }
-                    return 'asc';
-                });
-                return {
-                    column: {
-                        columnDef: def,
-                        getCanSort: () => def.enableSorting,
-                        getIsResizing: () => def.isResizing,
-                        getIsSorted: () => isSorted,
-                        getIsVisible: () => isVisible,
-                        getToggleSortingHandler: () => def.enableSorting ? this.getToggleSortingHandler(def) : undefined,
-                        id: def.id
-                    },
-                    id: `${index}_${def.id}`,
-                    row: row,
-                    getValue: () => def.accessorFn?.(item, index) ?? item[def.id] // TODO
-                };
-            };
-            const makeCellFromId = (columnId) => {
-                const def = this.columnDefsById.get(columnId);
-                return makeRow(def);
-            };
-            const leftVisibleCells = $derived(this.columnPinning.left?.map(makeCellFromId) ?? []);
-            const rightVisibleCells = $derived(this.columnPinning.right?.map(makeCellFromId) ?? []);
-            const centerVisibleCells = $derived(this.columnDefs
-                .filter((it) => !(this.columnPinning.left?.includes(it.id) ||
-                this.columnPinning.right?.includes(it.id)))
-                .map(makeRow));
-            return row;
+            return this.createRow(item, index, unsortedIndex);
         });
         return {
             rows,
@@ -641,11 +631,10 @@ export class TableContext {
                 const def = this.columnDefsById.get(columnId);
                 return makeRow(def);
             };
-            const leftVisibleCells = $derived(this.columnPinning.left?.map(makeCellFromId) ?? []);
-            const rightVisibleCells = $derived(this.columnPinning.right?.map(makeCellFromId) ?? []);
+            const leftVisibleCells = $derived([...(this.columnPinning.left?.keys() ?? [])].map(makeCellFromId) ?? []);
+            const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId) ?? []);
             const centerVisibleCells = $derived(this.columnDefs
-                .filter((it) => !(this.columnPinning.left?.includes(it.id) ||
-                this.columnPinning.right?.includes(it.id)))
+                .filter((it) => !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id)))
                 .map(makeRow));
             return row;
         });
@@ -1573,6 +1562,55 @@ export class TableContext {
         this.focusEnd = coords;
     };
     // #region private methods
+    createRow(item, index, unsortedIndex) {
+        const row = {
+            getValue: (key) => this.columnDefsById.get(key).accessorFn?.(item, unsortedIndex) ?? item[key],
+            original: item,
+            visibleIndex: index,
+            originalIndex: unsortedIndex,
+            id: index.toString(),
+            getLeftVisibleCells: () => leftVisibleCells,
+            getRightVisibleCells: () => rightVisibleCells,
+            getCenterVisibleCells: () => centerVisibleCells
+        };
+        const makeRow = (def) => {
+            const isVisible = $derived(this.columnVisibility[def.id] != false);
+            const isSorted = $derived.by(() => {
+                const sortState = this.paginationRepo?.sorting.find((it) => it.id == def.id);
+                if (!sortState) {
+                    return 'none';
+                }
+                if (sortState.desc) {
+                    return 'desc';
+                }
+                return 'asc';
+            });
+            return {
+                column: {
+                    columnDef: def,
+                    getCanSort: () => def.enableSorting,
+                    getIsResizing: () => def.isResizing,
+                    getIsSorted: () => isSorted,
+                    getIsVisible: () => isVisible,
+                    getToggleSortingHandler: () => def.enableSorting ? this.getToggleSortingHandler(def) : undefined,
+                    id: def.id
+                },
+                id: `${index}_${def.id}`,
+                row: row,
+                getValue: () => def.accessorFn?.(item, index) ?? item[def.id] // TODO
+            };
+        };
+        const makeCellFromId = (columnId) => {
+            const def = this.columnDefsById.get(columnId);
+            return makeRow(def);
+        };
+        const leftVisibleCells = $derived([...(this.columnPinning.left?.keys() ?? [])].map(makeCellFromId) ?? []);
+        const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId) ?? []);
+        const centerVisibleCells = $derived(this.columnDefs
+            .filter((it) => !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id)))
+            .map(makeRow));
+        return row;
+    }
     columnDefReturnsTextValue = (it) => {
         if (!this.dataRepo) {
             return false;
@@ -1793,10 +1831,10 @@ export class TableContext {
         const midDefs = [];
         const rightDefs = [];
         this.columnDefs.forEach((def) => {
-            if (this.columnPinning.left?.includes(def.id)) {
+            if (this.columnPinning.left?.has(def.id)) {
                 leftDefs.push(def);
             }
-            else if (this.columnPinning.right?.includes(def.id)) {
+            else if (this.columnPinning.right?.has(def.id)) {
                 rightDefs.push(def);
             }
             else {
@@ -1825,10 +1863,6 @@ export class TableContext {
         // const helper = createColumnHelper<T>();
         this.assertNoDuplicateIds();
         const adjustedDefsPromises = this.defaultColumnDefs.defs.map(async (def) => {
-            // extra width for when filtering between values
-            const needsExtraWidth = this.allowQuickFiltering && 'type' in def && def.type === 'Number';
-            const hasNoText = !needsExtraWidth &&
-                (def.columnType === ColumnType.Expand || def.columnType === ColumnType.RowSelect);
             if (def instanceof AccessorDef) {
                 // if (hasNoDefaultAccessor(temporary)) {
                 // 	temporary.accessorKey = def.id as string & keyof T;
@@ -1860,6 +1894,31 @@ 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;
+                    }
+                }
+            }
             return def;
         });
         const adjustedDefs = (await Promise.all(adjustedDefsPromises))
@@ -1899,14 +1958,16 @@ export class TableContext {
     }
     _setNewPinningState() {
         this.columnPinning = {
-            left: this.columnPinning.left &&
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            left: new Map(this.columnPinning.left &&
                 this.columnDefs
-                    .filter((col) => this.columnPinning.left?.includes(col.id))
-                    .map((col) => col.id),
-            right: this.columnPinning.right &&
+                    .filter((col) => this.columnPinning.left?.has(col.id))
+                    .map((col, index) => [col.id, index])),
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            right: new Map(this.columnPinning.right &&
                 this.columnDefs
-                    .filter((col) => this.columnPinning.right?.includes(col.id))
-                    .map((col) => col.id)
+                    .filter((col) => this.columnPinning.right?.has(col.id))
+                    .map((col, index) => [col.id, index]))
         }; // TODO
     }
     getToggleSortingHandler = (def) => (e) => {
@@ -1994,59 +2055,11 @@ function encapsulate(value) {
     return `"${value.replace(/[\n]/gm, ' ').replace(/["]/g, '""')}"`;
 }
 function generateTableOptions(contextObj) {
-    const _pageCount = $derived(contextObj.paginationRepo?.lastPage ?? 1);
-    const _prm = $derived.by(() => {
-        return contextObj.dataRepo?.paginationType === PaginationType.Local
-            ? contextObj.paginationRowModel // TODO getPaginationRowModel()
-            : undefined;
-    });
     const _pagination = $derived.by(() => {
         void contextObj.paginationRepo?.paginationState?.pageSize;
         void contextObj.paginationRepo?.paginationState?.pageIndex;
         return contextObj.paginationRepo?.paginationState;
     });
-    // TODO
-    function todo(fnName) {
-        return () => {
-            throw new Error('TODO ' + fnName);
-        };
-    }
-    // const leftSizePx = $derived.by(() => {
-    // 	if (contextObj.columnPinning.left?.length) {
-    // 		return contextObj.columnDefs.reduce((total, current) => {
-    // 			if (contextObj.columnPinning.left!.includes(current.id)) {
-    // 				return total + contextObj.measureHeaderWidth(current);
-    // 			}
-    // 			return total;
-    // 		}, 0);
-    // 	}
-    // 	return 0;
-    // });
-    // const rightSizePx = $derived.by(() => {
-    // 	if (contextObj.columnPinning.right?.length) {
-    // 		return contextObj.columnDefs.reduce((total, current) => {
-    // 			if (contextObj.columnPinning.right!.includes(current.id)) {
-    // 				return total + contextObj.measureHeaderWidth(current);
-    // 			}
-    // 			return total;
-    // 		}, 0);
-    // 	}
-    // 	return 0;
-    // });
-    // const centerSizePx = $derived.by(() => {
-    // 	if (contextObj.columnPinning.right?.length) {
-    // 		return contextObj.columnDefs.reduce((total, current) => {
-    // 			if (
-    // 				contextObj.columnPinning.left?.includes(current.id) ||
-    // 				contextObj.columnPinning.right?.includes(current.id)
-    // 			) {
-    // 				return total;
-    // 			}
-    // 			return total + contextObj.measureHeaderWidth(current);
-    // 		}, 0);
-    // 	}
-    // 	return 0;
-    // });
     const makeHeader = (def) => {
         // const size = $derived(contextObj.measureHeaderWidth(def));
         const isVisible = $derived(contextObj.columnVisibility[def.id] != false);
@@ -2100,8 +2113,7 @@ function generateTableOptions(contextObj) {
     };
     const leftHeaderGroups = $derived.by(() => {
         const headers = contextObj.columnDefs
-            .filter((it) => contextObj.columnVisibility[it.id] != false &&
-            contextObj.columnPinning.left?.includes(it.id))
+            .filter((it) => contextObj.columnVisibility[it.id] != false && contextObj.columnPinning.left?.has(it.id))
             .map(makeHeader);
         return [
             {
@@ -2113,8 +2125,7 @@ function generateTableOptions(contextObj) {
     });
     const rightHeaderGroups = $derived.by(() => {
         const headers = contextObj.columnDefs
-            .filter((it) => contextObj.columnVisibility[it.id] != false &&
-            contextObj.columnPinning.right?.includes(it.id))
+            .filter((it) => contextObj.columnVisibility[it.id] != false && contextObj.columnPinning.right?.has(it.id))
             .map(makeHeader);
         return [
             {
@@ -2127,8 +2138,7 @@ function generateTableOptions(contextObj) {
     const centerHeaderGroups = $derived.by(() => {
         const headers = contextObj.columnDefs
             .filter((it) => contextObj.columnVisibility[it.id] != false &&
-            !(contextObj.columnPinning.left?.includes(it.id) ||
-                contextObj.columnPinning.right?.includes(it.id)))
+            !(contextObj.columnPinning.left?.has(it.id) || contextObj.columnPinning.right?.has(it.id)))
             .map(makeHeader);
         return [
             {

package/dist/Components/Table/Types/DataRepository/LocalTableDataRepository.svelte.js

@@ -1,3 +1,4 @@
+import { Delay } from '../../../../Delay/Delay.js';
 import { FilterType } from '../Filtering/FilterType.js';
 import { NumberDateFilterMode } from '../Filtering/NumberDateFilterMode.js';
 import { StringFilterMode } from '../Filtering/StringFilterMode.js';
@@ -40,9 +41,6 @@ export class LocalTableDataRepository extends TableDataRepository {
     get totalRows() {
         return this._totalRows;
     }
-    // public set totalRows(v : number) {
-    // 	this._totalRows = v;
-    // }
     _filtering = $state([]);
     get filtering() {
         return this._filtering;
@@ -72,18 +70,19 @@ export class LocalTableDataRepository extends TableDataRepository {
             value = value.trim();
         }
         const oldIndex = this.filtering.findIndex((it) => it.id === id);
-        if (oldIndex === -1 || this.filtering[oldIndex].value != value) {
+        const newFiltering = this.filtering.concat();
+        if (oldIndex === -1 || newFiltering[oldIndex].value != value) {
             if (oldIndex > -1) {
-                this.filtering.splice(oldIndex, 1);
+                newFiltering.splice(oldIndex, 1);
             }
             const hasNoValue = value == null ||
                 (typeof value === 'object' && Array.isArray(value) && value.length === 0) ||
                 (typeof value === 'string' && value.length === 0);
             if (!hasNoValue) {
-                this.filtering.push({ id, value });
+                newFiltering.push({ id, value });
             }
         }
-        this.filtering = this.filtering.concat();
+        this.filtering = newFiltering;
     };
     _pageStartIndex = $derived(this.paginationState.pageIndex * this.paginationState.pageSize);
     get pageStartIndex() {

package/dist/Components/Table/Types/Filtering/FilterValueType.d.ts

@@ -0,0 +1,8 @@
+export declare const FilterValueType: {
+    readonly String: "String";
+    readonly Number: "Number";
+    readonly Date: "Date";
+    readonly Bool: "Bool";
+    readonly Select: "Select";
+};
+export type FilterValueType = (typeof FilterValueType)[keyof typeof FilterValueType];

package/dist/Components/Table/Types/Filtering/FilterValueType.js

@@ -0,0 +1,8 @@
+export const FilterValueType = {
+    String: 'String',
+    Number: 'Number',
+    Date: 'Date',
+    Bool: 'Bool',
+    Select: 'Select'
+};
+Object.freeze(FilterValueType);

package/dist/Components/Table/Types/Filtering/NumberDateFilterMode.d.ts

@@ -1,6 +1,5 @@
 export declare enum NumberDateFilterMode {
     Equals = "=",
-    Only = "__only=",
     NotEquals = "__notequals=",
     LessThan = "__lt=",
     LessThanOrEqual = "__lte=",