@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,2317 @@
+import { browser, dev } from '$app/environment';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { ColumnType } from '../Columns/ColumnType.js';
+import { ToolbarPosition } from '../Toolbar/ToolbarPosition.js';
+import { RowSelectionDef } from '../Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+import { tick } from 'svelte';
+import { PaginationType } from '../Pagination/PaginationType.js';
+import { getCanvasContext } from '../../../../Helpers/Helpers.svelte.js';
+import { AccessorDef } from '../Columns/Definitions/Accessors/AccessorDef.svelte.js';
+import { NumberInputDef } from '../Columns/Definitions/Accessors/NumberInputDef.svelte.js';
+import { SelectDef } from '../Columns/Definitions/Accessors/SelectDef.svelte.js';
+import { TextInputDef } from '../Columns/Definitions/Accessors/TextInputDef.js';
+import { CheckboxDef } from '../Columns/Definitions/Accessors/CheckboxDef.js';
+import { DateInputDef } from '../Columns/Definitions/Accessors/DateInputDef.svelte.js';
+import { ProgressBarDef } from '../Columns/Definitions/Display/ProgressBarDef.svelte.js';
+import { DisplayDef } from '../Columns/Definitions/Display/DisplayDef.js';
+const SORTING_ICON_WIDTH = 24;
+const InternalSymbol = Symbol();
+export class TableContext {
+    defaultColumnDefs;
+    tableName;
+    allowCopy;
+    enableResize;
+    allowColumnReordering;
+    allowQuickFiltering;
+    allowAdvancedFiltering;
+    toolbarPosition;
+    displayFooter;
+    selectionExtractor;
+    getUserId;
+    _onEditCell;
+    static identifier = Symbol();
+    static init(defaultColumnDefs, tableName, dataRepo, options) {
+        const context = new this(InternalSymbol, defaultColumnDefs, tableName, dataRepo, options.allowCopy ?? true, options.enableResize ?? true, options.allowColumnReordering ?? true, options.allowQuickFiltering ?? true, options.allowAdvancedFiltering ?? true, options.toolbar ?? ToolbarPosition.Right, options.displayFooter ?? true, options.selectionExtractor, options.getUserId, options.onEditCell);
+        return context;
+    }
+    // #region constructor
+    constructor(INTERNAL_ONLY, defaultColumnDefs, tableName, dataRepo, allowCopy, enableResize, allowColumnReordering, allowQuickFiltering, allowAdvancedFiltering, toolbarPosition, displayFooter, selectionExtractor, getUserId, _onEditCell = async () => {
+        if (dev) {
+            throw new Error('Cannot edit immutable table');
+        }
+    }) {
+        this.defaultColumnDefs = defaultColumnDefs;
+        this.tableName = tableName;
+        this.allowCopy = allowCopy;
+        this.enableResize = enableResize;
+        this.allowColumnReordering = allowColumnReordering;
+        this.allowQuickFiltering = allowQuickFiltering;
+        this.allowAdvancedFiltering = allowAdvancedFiltering;
+        this.toolbarPosition = toolbarPosition;
+        this.displayFooter = displayFooter;
+        this.selectionExtractor = selectionExtractor;
+        this.getUserId = getUserId;
+        this._onEditCell = _onEditCell;
+        if (INTERNAL_ONLY != InternalSymbol) {
+            throw new Error('This class may only be instantiated through the static init() method');
+        }
+        this.dataRepo = dataRepo;
+        // this.dataRepo.forceRefresh = this.forceVisibilityUpdate;
+        if (defaultColumnDefs.remoteFilters) {
+            this.remoteFilters = defaultColumnDefs.remoteFilters;
+        }
+        if (hasPagination(dataRepo)) {
+            this.paginationRepo = dataRepo;
+            // this.tableOptions.onSortingChange = dataRepo.updateSorting;
+            // this.tableOptions.manualSorting = dataRepo.manualSorting;
+        }
+        this.userId = $derived(getUserId());
+        if (browser) {
+            this._getUserDefaults();
+            const removeInvalidPresets = () => {
+                if (dev) {
+                    console.warn('invalid presets');
+                }
+                localStorage.removeItem(`${this.userId}-${tableName}-presets`);
+                localStorage.removeItem(`${this.userId}-${tableName}-selected-preset-name`);
+                const visibilityState = {};
+                this.columnDefs.forEach((def) => {
+                    if (def.defaultHidden || def.columnType === ColumnType.FilterOnly) {
+                        visibilityState[def.id] = false;
+                    }
+                });
+                const defaultPreset = {
+                    name: 'default',
+                    columnDefs: this.columnDefs,
+                    sortingState: [],
+                    visibilityState,
+                    columnPinningState: {}
+                };
+                this.selectedPreset = defaultPreset;
+                this.columnVisibility = visibilityState;
+                this.columnPresets = [...this.columnPresets, defaultPreset];
+            };
+            this.setupDefaultColumnDefs()
+                .then(() => {
+                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)) {
+                            return this.reassignDefsToPresets(presets).then(() => presets);
+                        }
+                    }
+                }
+                throw new Error('Invalid Presets');
+            })
+                .then((presets) => {
+                const savedPresetName = localStorage.getItem(`${this.userId}-${tableName}-selected-preset-name`);
+                if (savedPresetName) {
+                    const preset = presets.find((it) => it.name === savedPresetName);
+                    if (preset && areDefsEquivalent(this.columnDefs, preset.columnDefs)) {
+                        this.columnDefs = preset.columnDefs;
+                        if (preset.visibilityState) {
+                            this.columnVisibility = preset.visibilityState;
+                        }
+                        if (preset.columnPinningState) {
+                            this.columnPinning = preset.columnPinningState;
+                        }
+                        this.selectedPreset = preset;
+                    }
+                    else {
+                        localStorage.removeItem(`${this.userId}-${tableName}-selected-preset-name`);
+                        this.selectedPreset = presets[0];
+                        if (presets[0].visibilityState) {
+                            this.columnVisibility = presets[0].visibilityState;
+                        }
+                    }
+                    this.columnPresets = presets;
+                    return;
+                }
+            })
+                .catch(() => {
+                removeInvalidPresets();
+            });
+        }
+    }
+    // #endregion
+    // #region stores
+    userId;
+    isSelectable = $derived(this.columnDefs.some((it) => it.id.includes('is-selectable-')));
+    __queryValues = new SvelteMap();
+    _paginationRepo = $state();
+    get paginationRepo() {
+        return this._paginationRepo;
+    }
+    set paginationRepo(v) {
+        this._paginationRepo = v;
+    }
+    _showQuickFiltering = $state(false);
+    get showQuickFiltering() {
+        return this._showQuickFiltering;
+    }
+    set showQuickFiltering(v) {
+        this._showQuickFiltering = this.allowQuickFiltering && v;
+    }
+    _dataRepo = $state();
+    get dataRepo() {
+        return this._dataRepo;
+    }
+    set dataRepo(v) {
+        this._dataRepo = v;
+    }
+    _remoteFilters = $state();
+    get remoteFilters() {
+        return this._remoteFilters;
+    }
+    set remoteFilters(v) {
+        this._remoteFilters = v;
+    }
+    _showSelectedOnly = $state(false);
+    get showSelectedOnly() {
+        return this._showSelectedOnly;
+    }
+    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;
+    }
+    _limitFooter = $state(false);
+    get limitFooter() {
+        return this._limitFooter;
+    }
+    set limitFooter(v) {
+        this._limitFooter = v;
+    }
+    _dragTarget = $state(null);
+    get dragTarget() {
+        return this._dragTarget;
+    }
+    set dragTarget(v) {
+        this._dragTarget = v;
+    }
+    _columnDefs = $state([]);
+    get columnDefs() {
+        return this._columnDefs;
+    }
+    set columnDefs(v) {
+        // if (this._columnDefs.length > 0 && v != this._columnDefs) {
+        // 	debugger;
+        // }
+        this._columnDefs = v;
+        // this causes an error...?
+        // this.table = createTable(this.tableOptions);
+    }
+    _columnPresets = $state([]);
+    get columnPresets() {
+        return this._columnPresets;
+    }
+    set columnPresets(v) {
+        this._columnPresets = v;
+    }
+    //FIXME why was this allowed to be undefined?
+    _selectedPreset = $state();
+    get selectedPreset() {
+        return this._selectedPreset;
+    }
+    set selectedPreset(v) {
+        this._selectedPreset = v;
+    }
+    _focusedRowIndexIds = $state(new SvelteSet());
+    get focusedRowIndexIds() {
+        return this._focusedRowIndexIds;
+    }
+    set focusedRowIndexIds(v) {
+        this._focusedRowIndexIds = v;
+    }
+    _highlightedItems = $state(new SvelteMap());
+    get highlightedItems() {
+        return this._highlightedItems;
+    }
+    _focusedColumnIds = $state(new SvelteSet());
+    get focusedColumnIds() {
+        return this._focusedColumnIds;
+    }
+    set focusedColumnIds(v) {
+        this._focusedColumnIds = v;
+    }
+    _isMousingDown = $state(false);
+    get isMousingDown() {
+        return this._isMousingDown;
+    }
+    set isMousingDown(v) {
+        this._isMousingDown = v;
+    }
+    _focusStart = $state(null);
+    get focusStart() {
+        return this._focusStart;
+    }
+    set focusStart(v) {
+        this._focusStart = v;
+        this._recalculateFocusedElements();
+    }
+    _focusStartIsBeingEdited = $state(false);
+    get focusStartIsBeingEdited() {
+        return this._focusStartIsBeingEdited;
+    }
+    set focusStartIsBeingEdited(v) {
+        this._focusStartIsBeingEdited = v;
+    }
+    _focusEnd = $state(null);
+    get focusEnd() {
+        return this._focusEnd;
+    }
+    set focusEnd(v) {
+        this._focusEnd = v;
+        this._recalculateFocusedElements();
+    }
+    _singleClickEditing = $state(false);
+    get singleClickEditing() {
+        return this._singleClickEditing;
+    }
+    set singleClickEditing(v) {
+        this._singleClickEditing = v;
+    }
+    _changeColourOnHover = $state(true);
+    get changeColourOnHover() {
+        return this._changeColourOnHover;
+    }
+    set changeColourOnHover(v) {
+        this._changeColourOnHover = v;
+    }
+    _isCompact = $state(true);
+    get isCompact() {
+        return this._isCompact;
+    }
+    set isCompact(v) {
+        this._isCompact = v;
+    }
+    _alternateRowColours = $state(false);
+    get alternateRowColours() {
+        return this._alternateRowColours;
+    }
+    set alternateRowColours(v) {
+        this._alternateRowColours = v;
+    }
+    _copyWithHeaders = $state(true);
+    get copyWithHeaders() {
+        return this._copyWithHeaders;
+    }
+    set copyWithHeaders(v) {
+        this._copyWithHeaders = v;
+    }
+    _commaSeparatedCopy = $state(false);
+    get commaSeparatedCopy() {
+        return this._commaSeparatedCopy;
+    }
+    set commaSeparatedCopy(v) {
+        this._commaSeparatedCopy = v;
+    }
+    _columnSizing = $state({});
+    get columnSizing() {
+        return this._columnSizing;
+    }
+    set columnSizing(v) {
+        this._columnSizing = v;
+    }
+    _columnPinning = $state({});
+    get columnPinning() {
+        return this._columnPinning;
+    }
+    set columnPinning(v) {
+        this._columnPinning = v;
+    }
+    _columnVisibility = $state({});
+    get columnVisibility() {
+        return this._columnVisibility;
+    }
+    set columnVisibility(v) {
+        this._columnVisibility = v;
+    }
+    _openModalCoordinates = $state(null);
+    get openModalCoordinates() {
+        return this._openModalCoordinates;
+    }
+    set openModalCoordinates(v) {
+        this._openModalCoordinates = v;
+    }
+    _allSelectedInCurrentPage = $derived.by(() => {
+        if (!this.dataRepo || this.selectedItems.size === 0) {
+            return Promise.resolve(false);
+        }
+        const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
+        const pageEndIndexExclusive = this.paginationRepo
+            ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
+            : this.sortedData.length;
+        if (pageStartIndex == undefined || pageEndIndexExclusive == undefined) {
+            return Promise.resolve(false);
+        }
+        const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
+        return this.allSelectedBySelectableMethod(pageStartIndex, pageEndIndexExclusive, selectableMethod);
+    });
+    get allSelectedInCurrentPage() {
+        return this._allSelectedInCurrentPage;
+    }
+    async allSelectedBySelectableMethod(pageStartIndex, pageEndIndexExclusive, selectableMethod) {
+        if (!this.dataRepo) {
+            return Promise.resolve(false);
+        }
+        if (selectableMethod) {
+            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
+                const item = this.sortedData[index];
+                if ((await selectableMethod(item, index)) &&
+                    !this.selectedItems.has(this.selectionExtractor(item))) {
+                    return Promise.resolve(false);
+                }
+            }
+        }
+        else {
+            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
+                const item = this.sortedData[index];
+                if (!this.selectedItems.has(this.selectionExtractor(item))) {
+                    return Promise.resolve(false);
+                }
+            }
+        }
+        return Promise.resolve(true);
+    }
+    async _areAllHighlighted(pageStartIndex, pageEndIndexExclusive) {
+        if (!this.dataRepo) {
+            return Promise.resolve(false);
+        }
+        for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
+            const item = this.sortedData[index];
+            if (!this.highlightedItems.has(this.selectionExtractor(item))) {
+                return Promise.resolve(false);
+            }
+        }
+        return Promise.resolve(true);
+    }
+    _allHighlighted = $derived.by(() => {
+        if (!this.dataRepo || this.highlightedItems.size === 0) {
+            return Promise.resolve(false);
+        }
+        const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
+        const pageEndIndexExclusive = this.paginationRepo
+            ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
+            : this.sortedData.length;
+        if (pageStartIndex == undefined || pageEndIndexExclusive == undefined) {
+            return Promise.resolve(false);
+        }
+        return this._areAllHighlighted(pageStartIndex, pageEndIndexExclusive);
+    });
+    get allHighlighted() {
+        return this._allHighlighted;
+    }
+    // private _allHighlighted: boolean = $derived.by(() => {
+    // 	if (!this.dataRepo || this.highlightedItems.size === 0) {
+    // 		return false;
+    // 	}
+    // 	const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
+    // 	const pageEndIndexExclusive = this.paginationRepo
+    // 		? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
+    // 		: this.sortedData.length;
+    // 	if (pageStartIndex == undefined || pageEndIndexExclusive == undefined) {
+    // 		return false;
+    // 	}
+    // 	for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
+    // 		if (!this.highlightedItems.has(index)) {
+    // 			return false;
+    // 		}
+    // 	}
+    // 	return true;
+    // });
+    // public get allHighlighted(): boolean {
+    // 	return this._allHighlighted;
+    // }
+    _hasHighlightedItems = $derived(this.highlightedItems.size > 0);
+    get hasHighlightedItems() {
+        return this._hasHighlightedItems;
+    }
+    //type of entries depends on the value extractor in the column def
+    _selectedItems = $state(new SvelteMap());
+    get selectedItems() {
+        return this._selectedItems;
+    }
+    set selectedItems(v) {
+        this._selectedItems = v;
+    }
+    // HACK this is lazily loaded. it will not be used before initialisation.
+    // public getSelectedItemsAsObjects = (): T[] => {
+    // 	if (!this.selectionExtractor) {
+    // 		throw new Error("No selection extractor was supplied.")
+    // 	};
+    // 	return this.sortedData.filter((item) => {
+    // 		return this._selectedIdentifiers.has(this.selectionExtractor(item));
+    // 	}) ?? []
+    // }
+    // public get selectedItemsAsObjects(): T[] {
+    // 	return this._selectedItemsAsObjects;
+    // }
+    _invalidValues = $state(new SvelteMap());
+    get invalidValues() {
+        return this._invalidValues;
+    }
+    set invalidValues(v) {
+        this._invalidValues = v;
+    }
+    _hasInvalidSelectedItems = $state(false);
+    get hasInvalidSelectedItems() {
+        return this._hasInvalidSelectedItems;
+    }
+    set hasInvalidSelectedItems(v) {
+        this._hasInvalidSelectedItems = v;
+    }
+    columnDefsById = $derived(new Map(this.columnDefs.map((it) => [it.id, it])));
+    getSortingFn = (id, desc) => {
+        if (this.dataRepo?.data.length == 0) {
+            return undefined;
+        }
+        const def = this.columnDefsById?.get(id);
+        if (!def) {
+            return undefined;
+        }
+        if (def instanceof DisplayDef ||
+            def instanceof TextInputDef ||
+            def instanceof NumberInputDef ||
+            def instanceof DateInputDef) {
+            return comparableSortingFn(id, desc);
+        }
+        if (def instanceof CheckboxDef) {
+            return checkboxSortingFn(id, desc);
+        }
+        if (def instanceof SelectDef) {
+            return def.sortingFn ?? comparableSortingFn(id, desc);
+        }
+        if (def instanceof ProgressBarDef) {
+            return progressSortingFn(id, desc);
+        }
+        // if (dev) {
+        // 	console.warn('Unhandled def type ' + id, def);
+        // }
+        return comparableSortingFn(id, desc);
+    };
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    originalRowIndices = $derived(new Map((this.dataRepo?.data ?? []).map((item, index) => [item, index])));
+    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() ?? []);
+            sortedData.sort((a, b) => {
+                const end = state.length;
+                for (let i = 0; i < end; i++) {
+                    const { id, desc } = state[i];
+                    const sortingFn = this.getSortingFn(id, desc);
+                    if (sortingFn) {
+                        const result = sortingFn(a, b);
+                        if (result != 0) {
+                            return result;
+                        }
+                    }
+                    else {
+                        console.warn('no sorting fn found for ' + id);
+                    }
+                }
+                return 0;
+            });
+            return sortedData;
+        }
+        return this.dataRepo?.data ?? [];
+    });
+    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,
+                index,
+                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 {
+            rows,
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            rowsById: new Map(rows.map((it, index) => [index.toString(), it])) //FIXME should this be by sorted id or by original id?
+        };
+    });
+    _currentPageData = $derived(this.dataRepo?.paginationType == PaginationType.Local
+        ? this.sortedData.slice(this.dataRepo.pageStartIndex, this.dataRepo.pageEndIndexExclusive)
+        : (this.sortedData ?? []));
+    paginationRowModel = $derived.by(() => {
+        const sortedData = this._currentPageData;
+        const rows = sortedData.map((item, index) => {
+            const row = {
+                getValue: (key) => this.columnDefsById.get(key).accessorFn?.(item, index) ?? item[key],
+                original: item,
+                index,
+                id: index.toString(),
+                getLeftVisibleCells: () => leftVisibleCells,
+                getRightVisibleCells: () => rightVisibleCells,
+                getCenterVisibleCells: () => centerVisibleCells
+            };
+            const makeRow = (def) => {
+                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';
+                });
+                const isVisible = $derived(this.columnVisibility[def.id] != false);
+                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 {
+            rows,
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            rowsById: new Map(rows.map((it, index) => [index.toString(), it])) //FIXME should this be by sorted id or by original id?
+        };
+    });
+    get currentPageData() {
+        return this._currentPageData;
+    }
+    // #endregion
+    // #region public methods
+    selectionContains = (item) => {
+        if (!this.selectionExtractor) {
+            throw new Error('No selection extractor was supplied');
+        }
+        if (!this.isSelectable) {
+            return true;
+        }
+        return this.selectedItems.has(this.selectionExtractor(item));
+    };
+    // public readonly HACK__reselectItem = (item: T) => {
+    // 	if (!this.selectionExtractor) {
+    // 		throw new Error('No selection extractor was supplied');
+    // 	}
+    // 	if (!this.isSelectable) {
+    // 		return true;
+    // 	}
+    // 	const key = this.selectionExtractor(item);
+    // 	if (this.selectedItems.has(key)) {
+    // 		this.selectedItems.delete(key);
+    // 		this.selectedItems.set(key, item);
+    // 	} else {
+    // 		this.selectedItems.set(key, item);
+    // 		this.selectedItems.delete(key);
+    // 	}
+    // };
+    addInvalidValue = (item) => {
+        this.invalidValues.set(this.selectionExtractor(item), item);
+    };
+    removeInvalidValue = (item) => {
+        this.invalidValues.delete(this.selectionExtractor(item));
+    };
+    setOpenModalCoordinates = (coordinates) => {
+        this.openModalCoordinates = coordinates ? { ...coordinates } : null;
+    };
+    toggleHighlightedRow = (item) => {
+        const key = this.selectionExtractor(item);
+        if (this.highlightedItems.has(key)) {
+            this.highlightedItems.delete(key);
+        }
+        else {
+            this.highlightedItems.set(key, item);
+        }
+    };
+    // public readonly toggleHighlightedRow = (rowIndex: number) => {
+    // 	if (this.highlightedRowIndexIds.has(rowIndex)) {
+    // 		this.highlightedRowIndexIds.delete(rowIndex);
+    // 	} else {
+    // 		this.highlightedRowIndexIds.add(rowIndex);
+    // 	}
+    // };
+    resetHighlightedRows = () => {
+        this.highlightedItems.clear();
+    };
+    toggleSelected = (item, selected) => {
+        const key = this.selectionExtractor(item);
+        if (selected) {
+            this.selectedItems.set(key, item);
+        }
+        else {
+            this.selectedItems.delete(key);
+        }
+        this.recalculateAllSelectedInCurrentPage();
+    };
+    setSelectionMap = (set) => {
+        this.selectedItems = set;
+    };
+    updateSelectedItems = async () => {
+        if (!this.dataRepo) {
+            return;
+        }
+        const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
+        const pageEndIndexExclusive = this.paginationRepo
+            ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
+            : this.sortedData.length;
+        const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
+        if (selectableMethod) {
+            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
+                const item = this.sortedData[index];
+                if (await selectableMethod(item, index)) {
+                    const key = this.selectionExtractor(item);
+                    if (this.selectedItems.has(key)) {
+                        //replace selected item with newer version of the same identity
+                        this.selectedItems.set(key, item);
+                    }
+                }
+            }
+        }
+        else {
+            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
+                const item = this.sortedData[index];
+                const key = this.selectionExtractor(item);
+                if (this.selectedItems.has(key)) {
+                    //replace selected item with newer version of the same identity
+                    this.selectedItems.set(key, item);
+                }
+            }
+        }
+        this.recalculateAllSelectedInCurrentPage();
+    };
+    resetSelectedItems = () => {
+        for (const key of this.selectedItems.keys()) {
+            this.selectedItems.delete(key);
+        }
+        this.recalculateAllSelectedInCurrentPage();
+    };
+    recalculateAllSelectedInCurrentPage = () => {
+        tick().then(() => {
+            this.allSelectedInCurrentPage?.then(() => {
+                this.hasInvalidSelectedItems = [...this.selectedItems.keys()].some((key) => this._invalidValues.has(key));
+            });
+        });
+    };
+    onSelectAllInCurrentPage = async () => {
+        if (!this.dataRepo) {
+            return;
+        }
+        if (await this.allSelectedInCurrentPage) {
+            // this.resetSelectedItems();
+            const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
+            const pageEndIndexExclusive = this.paginationRepo
+                ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
+                : this.sortedData.length;
+            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
+                const item = this.sortedData[index];
+                this.selectedItems.delete(this.selectionExtractor(item));
+            }
+        }
+        else {
+            // this.resetSelectedItems();
+            // const selectedItems = new SvelteSet<number>();
+            const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
+            const pageEndIndexExclusive = this.paginationRepo
+                ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
+                : this.sortedData.length;
+            const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
+            if (selectableMethod) {
+                for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
+                    const item = this.sortedData[index];
+                    if (await selectableMethod(item, index)) {
+                        this.selectedItems.set(this.selectionExtractor(item), item);
+                    }
+                }
+            }
+            else {
+                for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
+                    const item = this.sortedData[index];
+                    this.selectedItems.set(this.selectionExtractor(item), item);
+                }
+            }
+        }
+        this.recalculateAllSelectedInCurrentPage();
+    };
+    onHighlightAll = () => {
+        if (!this.dataRepo) {
+            return;
+        }
+        this.allHighlighted.then((areAllHighlighted) => {
+            if (areAllHighlighted) {
+                this.highlightedItems.clear();
+            }
+            else {
+                this._currentPageData.forEach((item) => {
+                    this.highlightedItems.set(this.selectionExtractor(item), item);
+                });
+            }
+        });
+    };
+    onEditCell = async (item, coords, value) => {
+        const oldKey = this.selectionExtractor?.(item);
+        const wasSelected = oldKey != null && this.selectedItems.has(oldKey);
+        // debugger;
+        if (wasSelected) {
+            this.selectedItems.delete(oldKey);
+        }
+        await this._onEditCell(item, coords, value);
+        if (wasSelected && this.isSelectable) {
+            const newKey = this.selectionExtractor?.(item);
+            if (newKey) {
+                this.selectedItems.set(newKey, item);
+            }
+            this.recalculateAllSelectedInCurrentPage();
+        }
+    };
+    handleTdKeydown = (e) => {
+        e.stopPropagation();
+        if (e.key.toLocaleUpperCase() === 'F' && e.ctrlKey && this.allowQuickFiltering) {
+            e.preventDefault();
+            this.toggleQuickFiltering();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.focusStartIsBeingEdited = false;
+        }
+        else if (e.key === 'Tab') {
+            //allow regular operation in side panels
+            const target = e.target;
+            if (target?.closest('.side-panel') != null ||
+                target?.attributes.getNamedItem('data-type')?.value === 'quicksearch') {
+                return;
+            }
+            e.preventDefault();
+            if (e.getModifierState('Shift')) {
+                this.tabBackward();
+            }
+            else {
+                this.tabForward();
+            }
+        }
+        if (e.target.tagName === 'INPUT' &&
+            e.target.attributes.getNamedItem('type')?.value !== 'checkbox') {
+            return;
+        }
+        switch (e.key) {
+            case 'Enter':
+            case 'F2':
+                if (!e.target?.classList?.contains('editable')) {
+                    if (dev) {
+                        console.log('not editable. cancelling...');
+                    }
+                    break;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                e.target?.dispatchEvent(new CustomEvent('edit', { detail: { selectAll: e.key === 'Enter' } }));
+                // focusStartIsBeingEdited.set(true);
+                break;
+            case 'ArrowUp': {
+                e.preventDefault();
+                if (e.getModifierState('Control')) {
+                    if (e.getModifierState('Shift')) {
+                        if (!this.allowCopy) {
+                            return;
+                        }
+                        this.focusToTop();
+                    }
+                    else {
+                        this.moveToTop();
+                    }
+                }
+                else if (e.getModifierState('Shift')) {
+                    if (!this.allowCopy) {
+                        return;
+                    }
+                    this.moveFocusUp();
+                }
+                else {
+                    this.setFocusUp();
+                }
+                return;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                if (e.getModifierState('Control')) {
+                    if (e.getModifierState('Shift')) {
+                        if (!this.allowCopy) {
+                            return;
+                        }
+                        this.focusToBottom();
+                    }
+                    else {
+                        this.moveToBottom();
+                    }
+                }
+                else if (e.getModifierState('Shift')) {
+                    if (!this.allowCopy) {
+                        return;
+                    }
+                    this.moveFocusDown();
+                }
+                else {
+                    this.setFocusDown();
+                }
+                return;
+            }
+            // TODO add ctrl-home and ctrl-end as ways to get to top-left/bottom-right
+            case 'ArrowLeft':
+            case 'Home': {
+                e.preventDefault();
+                if (e.getModifierState('Control') || e.key === 'Home') {
+                    if (e.getModifierState('Shift')) {
+                        if (!this.allowCopy) {
+                            return;
+                        }
+                        this.focusToStart();
+                    }
+                    else {
+                        this.moveToStart();
+                    }
+                    //these two at the bottom shouldn't happen on a home press
+                }
+                else if (e.getModifierState('Shift') && this.allowCopy && e.key === 'ArrowLeft') {
+                    this.moveFocusLeft();
+                }
+                else if (e.key === 'ArrowLeft') {
+                    this.setFocusLeft();
+                }
+                return;
+            }
+            case 'ArrowRight':
+            case 'End': {
+                e.preventDefault();
+                if (e.getModifierState('Control') || e.key === 'End') {
+                    if (e.getModifierState('Shift')) {
+                        if (!this.allowCopy) {
+                            return;
+                        }
+                        this.focusToEnd();
+                    }
+                    else {
+                        this.moveToEnd();
+                    }
+                }
+                else if (e.getModifierState('Shift') && this.allowCopy && e.key === 'ArrowRight') {
+                    this.moveFocusRight();
+                }
+                else if (e.key === 'ArrowRight') {
+                    this.setFocusRight();
+                }
+            }
+        }
+        if (this.allowCopy) {
+            switch (e.key) {
+                case 'a': {
+                    if (e.ctrlKey) {
+                        e.preventDefault();
+                        this.moveToTop();
+                        this.moveToStart();
+                        this.focusToBottom();
+                        this.focusToEnd();
+                    }
+                    break;
+                }
+                case 'c':
+                case 'C':
+                    if (e.getModifierState('Control')) {
+                        e.preventDefault();
+                        if (this.allowCopy) {
+                            this.copyDataToClipboard();
+                        }
+                    }
+                    break;
+            }
+        }
+    };
+    toggleQuickFiltering = () => {
+        if (this.allowQuickFiltering) {
+            const fs = this.focusStart;
+            const idToFocusTo = fs &&
+                (this.showQuickFiltering
+                    ? `#${this.tableName}-cell-${fs.row}-${fs.id}`
+                    : `#${this.tableName}-cell-quicksearch-${fs.id}`);
+            this.showQuickFiltering = !this.showQuickFiltering;
+            tick().then(() => {
+                if (idToFocusTo && browser) {
+                    document.querySelector(idToFocusTo)?.focus();
+                }
+            });
+        }
+    };
+    setColumnPinning = (updater) => {
+        if (!this.allowColumnReordering) {
+            return;
+        }
+        this.columnPinning = updater(this.columnPinning);
+    };
+    updateFilters = $state();
+    updateVisibility = (stateOrCallback) => {
+        if (typeof stateOrCallback == 'function') {
+            this.columnVisibility = stateOrCallback(this.columnVisibility);
+        }
+        else {
+            this.columnVisibility = stateOrCallback;
+        }
+        // this.forceVisibilityUpdate();
+    };
+    updateColumnSizing = (stateOrCallback) => {
+        if (typeof stateOrCallback == 'function') {
+            this.columnSizing = stateOrCallback(this.columnSizing);
+        }
+        else {
+            this.columnSizing = stateOrCallback;
+        }
+    };
+    table = $derived(generateTableOptions(this));
+    // private _rowModel = $derived<RowModel<T> | undefined>(this.dataRepo?.data && this.table.rowModel);
+    // public get rowModel() {
+    // 	return this._rowModel;
+    // }
+    lastPage = $derived(this.dataRepo?.lastPage ?? 0);
+    measureHeaderWidth = (columnDef) => {
+        const label = columnDef.header;
+        if (typeof label === 'string' && browser) {
+            const extraWidth = columnDef.enableSorting ? SORTING_ICON_WIDTH : 0;
+            const canvasContext = getCanvasContext();
+            if (canvasContext) {
+                const headerWidth = Math.ceil(extraWidth + canvasContext.measureText(`pad${label}pad`).width);
+                if (this.allowQuickFiltering && columnDef instanceof AccessorDef) {
+                    if (columnDef instanceof NumberInputDef) {
+                        return Math.max(headerWidth, Math.ceil(extraWidth + canvasContext.measureText(`Lorem Ipsum Dolor`).width)
+                        // HACK this is correct for quick filtering between min and max but it may be too large for a minimum.
+                        // Math.ceil(extraWidth + ctx.measureText(`Lorem Ipsum Dolor Sit Amet`).width)
+                        );
+                    }
+                    return Math.max(headerWidth, Math.ceil(extraWidth + canvasContext.measureText(`Lorem Ipsum Dolor`).width));
+                }
+                return headerWidth;
+            }
+        }
+        return 0;
+    };
+    autoResize = async (columnDef) => {
+        if (!browser) {
+            return;
+        }
+        const ctx = getCanvasContext();
+        const currentPageContents = this.currentPageData;
+        const colId = columnDef.id;
+        if (!colId) {
+            return;
+        }
+        let maxWidth = 0;
+        if (columnDef.accessorFn) {
+            for (let i = currentPageContents.length - 1; i > -1; i--) {
+                const row = currentPageContents[i];
+                const label = ((await columnDef.accessorFn?.(row, i)) ?? Promise.resolve())?.toString() ?? '';
+                const currentWidth = ctx.measureText(label).width;
+                maxWidth = Math.max(maxWidth, currentWidth);
+            }
+        }
+        else {
+            const currentWidth = columnDef.width ??
+                ctx.measureText(
+                // TODO
+                (typeof columnDef.header == 'string' ? columnDef.header : 'TODO') ?? '-').width;
+            maxWidth = Math.max(maxWidth, currentWidth);
+        }
+        this.columnSizing[colId] = maxWidth + 32; //standard extra cell padding
+    };
+    reorderColumn = (dropTarget) => {
+        if (!this.allowColumnReordering) {
+            return;
+        }
+        if (!this.dragTarget || !dropTarget) {
+            return;
+        }
+        const newDefs = this.columnDefs.concat();
+        newDefs
+            .sort((a, b) => a.index - b.index)
+            .forEach((element, index) => {
+            element.index = index;
+        });
+        const originalIndex = newDefs.findIndex((it) => it.id === this.dragTarget?.id);
+        if (originalIndex === -1) {
+            if (dev) {
+                alert("couldn't find target's original index");
+            }
+            return newDefs;
+        }
+        newDefs.splice(originalIndex, 1);
+        const isDraggedToFirst = dropTarget.id === `${this.tableName}-column-settings-top-anchor` ||
+            dropTarget.id === `${this.tableName}-header-anchor`;
+        if (isDraggedToFirst) {
+            this.dragTarget.index = -9999;
+            newDefs.push(this.dragTarget);
+        }
+        else {
+            const dropTargetIndex = targetIsLI(dropTarget)
+                ? newDefs.findIndex((col) => `${this.tableName}-column-settings-${col.id}` === dropTarget.id)
+                : newDefs.findIndex((col) => `${this.tableName}-header-${col.id}` === dropTarget.id);
+            if (dropTargetIndex === -1) {
+                newDefs.push(this.dragTarget);
+                newDefs.sort((a, b) => a.index - b.index);
+                return;
+            }
+            // this will require changes if you want to swap two
+            // for (let i = newColumns.length - 1; i > dropTargetIndex; i--) {
+            // 	newColumns[i].index += 1;
+            // }
+            if (originalIndex > dropTargetIndex && !targetIsLI(dropTarget)) {
+                newDefs[dropTargetIndex].index += 1;
+                this.dragTarget.index = newDefs[dropTargetIndex].index - 1;
+                newDefs.push(this.dragTarget);
+            }
+            else {
+                this.dragTarget.index = newDefs[dropTargetIndex].index; // + 1
+                newDefs.push(this.dragTarget);
+            }
+        }
+        newDefs
+            .sort((a, b) => a.index - b.index)
+            .forEach((element, index) => {
+            element.index = index;
+        });
+        this.dragTarget = null;
+        this._setNewPinningState();
+        this.updateDefsBasedOnPinning();
+        this.unfocus();
+        this.columnDefs = newDefs;
+        // this.forceVisibilityUpdate();
+    };
+    copyHighlightedRowsToClipboard = async () => {
+        if (!navigator.clipboard) {
+            alert('cannot copy in an insecure connection');
+            return;
+        }
+        return this._performRowCopy(await this.getHighlightedRowData());
+    };
+    copyDataToClipboard = async () => {
+        if (!navigator.clipboard) {
+            alert('cannot copy in an insecure connection');
+            return;
+        }
+        return this._performRowCopy(await this.getFocusElementData());
+    };
+    _performRowCopy = async ({ items, indicesByItem, focusedElementData, affectedColumns }) => {
+        const focusedColumnIds = affectedColumns.map((it) => encapsulate(typeof it.header === 'string' ? it.header : it.id));
+        const value = await (async () => {
+            const selectColumns = new Map();
+            for (let i = affectedColumns.length - 1; i > -1; i--) {
+                const col = affectedColumns[i];
+                if (col instanceof SelectDef) {
+                    const item = items[i];
+                    selectColumns.set(i, await col.getOptions(item, indicesByItem.get(item)));
+                }
+            }
+            const separator = this.commaSeparatedCopy ? ',' : '\t';
+            const shouldCopyHeaders = this.copyWithHeaders &&
+                (focusedElementData.length !== 1 || focusedElementData[0].length !== 1);
+            // transform to TSV
+            if (focusedElementData.length === 1 && focusedElementData[0].length === 1) {
+                if (selectColumns.has(0)) {
+                    const columnOptions = selectColumns.get(0);
+                    const value = columnOptions.find((it) => it.value === focusedElementData[0][0])?.label ??
+                        focusedElementData[0][0]?.toString() ??
+                        '';
+                    return value;
+                }
+                else {
+                    const value = focusedElementData[0][0]?.toString().trim() ?? '';
+                    return value;
+                }
+            }
+            return `${shouldCopyHeaders ? `${focusedColumnIds.join(separator)}\n` : ''}${focusedElementData
+                .map((it) => it
+                .map((toCopy, i) => {
+                if (toCopy instanceof Date) {
+                    return toCopy.toLocaleDateString();
+                }
+                if (selectColumns.has(i)) {
+                    const columnOptions = selectColumns.get(i);
+                    const value = columnOptions.find((it) => it.value === toCopy)?.label ??
+                        toCopy?.toString() ??
+                        '';
+                    return encapsulate(value);
+                }
+                else {
+                    const value = toCopy?.toString().trim() ?? '';
+                    return encapsulate(value);
+                }
+            })
+                .join(separator))
+                .join('\n')}`;
+        })();
+        navigator.clipboard.writeText(value ?? '');
+    };
+    startFocus = (coords) => {
+        this.isMousingDown = true;
+        this.moveFocus(coords);
+    };
+    moveFocus = (coords, startEditing = false) => {
+        this.focusStart = { ...coords };
+        this.focusEnd = { ...coords };
+        if (startEditing) {
+            tick().then(() => {
+                this.focusStartIsBeingEdited = true;
+            });
+        }
+    };
+    unfocus = () => {
+        this.focusStartIsBeingEdited = false;
+        this.focusStart = null;
+        this.focusEnd = null;
+    };
+    focusToTop = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        this._moveFocusEndRow(-Infinity);
+    };
+    focusToBottom = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        this._moveFocusEndRow(Infinity);
+    };
+    moveToBottom = () => {
+        this._moveFocusRow(Infinity);
+    };
+    moveToTop = () => {
+        this._moveFocusRow(-Infinity);
+    };
+    moveFocusUp = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        this._moveFocusEndRow(-1);
+    };
+    setFocusUp = () => {
+        this._moveFocusRow(-1);
+    };
+    tabForward = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        const defs = this.columnDefs;
+        const visibility = this.columnVisibility;
+        const indexBounds = defs.length;
+        const rowBounds = this.sortedData.length;
+        if (!this.focusStart || !rowBounds) {
+            return;
+        }
+        let { column: index, row } = this.focusStart;
+        ++index;
+        while (row < rowBounds) {
+            while (index < indexBounds) {
+                const newId = defs[index].id;
+                if (newId && visibility[newId] !== false) {
+                    this.moveFocus({ id: newId, row, column: index }, this.focusStartIsBeingEdited);
+                    return;
+                }
+                ++index;
+            }
+            index = 0;
+            ++row;
+        }
+    };
+    tabBackward = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        const maxIndexRight = this.columnDefs.length - 1;
+        const defs = this.columnDefs;
+        const visibility = this.columnVisibility;
+        if (!this.focusStart) {
+            return;
+        }
+        let { column: index, row } = this.focusStart;
+        --index;
+        while (row > -1) {
+            while (index > -1) {
+                const newId = defs[index].id;
+                if (newId && visibility[newId] !== false) {
+                    this.moveFocus({ id: newId, row, column: index }, this.focusStartIsBeingEdited);
+                    return;
+                }
+                --index;
+            }
+            index = maxIndexRight;
+            --row;
+        }
+    };
+    focusToStart = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        if (!this.focusEnd) {
+            return null;
+        }
+        const visibility = this.columnVisibility;
+        const columnDefs = this.columnDefs;
+        const currentIndex = this.focusEnd.column;
+        let index = 0;
+        while (index < currentIndex) {
+            const newId = columnDefs[index].id;
+            if (newId && visibility[newId] !== false) {
+                this.focusEnd = { ...this.focusEnd, column: index };
+                return;
+            }
+            ++index;
+        }
+    };
+    moveToStart = () => {
+        if (!this.focusStart)
+            return;
+        const visibility = this.columnVisibility;
+        const columnDefs = this.columnDefs;
+        const current = this.focusStart.column;
+        let index = 0;
+        while (index < current) {
+            const newId = columnDefs[index].id;
+            if (newId && visibility[newId] !== false) {
+                this.moveFocus({ ...this.focusStart, id: newId, column: index });
+                return;
+            }
+            ++index;
+        }
+        //otherwise return without doing anything
+    };
+    focusToEnd = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        if (!this.focusEnd)
+            return null;
+        const current = this.focusEnd;
+        const visibility = this.columnVisibility;
+        const columnDefs = this.columnDefs;
+        const currentIndex = current.column;
+        let index = columnDefs.length - 1;
+        while (index > currentIndex) {
+            const newId = columnDefs[index].id;
+            if (newId && visibility[newId] !== false) {
+                this.focusEnd = { ...this.focusEnd, column: index };
+                return;
+            }
+            --index;
+        }
+        this.focusEnd = current;
+    };
+    moveToEnd = () => {
+        if (!this.focusStart)
+            return;
+        const visibility = this.columnVisibility;
+        const columnDefs = this.columnDefs;
+        const current = this.focusStart.column;
+        let index = columnDefs.length - 1;
+        while (index > current) {
+            const newId = columnDefs[index].id;
+            if (newId && visibility[newId] !== false) {
+                this.moveFocus({ ...this.focusStart, id: newId, column: index });
+                return;
+            }
+            --index;
+        }
+        //otherwise return without doing anything
+    };
+    moveFocusDown = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        this._moveFocusEndRow(1);
+    };
+    setFocusDown = () => {
+        this._moveFocusRow(1);
+    };
+    moveFocusLeft = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        if (this.focusEnd != null) {
+            const visibility = this.columnVisibility;
+            let index = this.focusEnd.column - 1;
+            while (index > -1) {
+                const newId = this.columnDefs[index].id;
+                if (newId && visibility[newId] !== false) {
+                    this.focusEnd = { ...this.focusEnd, column: index };
+                    return;
+                }
+                --index;
+            }
+        }
+    };
+    setFocusLeft = () => {
+        if (!this.focusStart)
+            return;
+        if (this.focusStart != null) {
+            const visibility = this.columnVisibility;
+            const columnDefs = this.columnDefs;
+            let index = this.focusStart.column - 1;
+            while (index > -1) {
+                const newId = columnDefs[index].id;
+                if (newId && visibility[newId] !== false) {
+                    this.moveFocus({ ...this.focusStart, id: newId, column: index });
+                    return;
+                }
+                --index;
+            }
+            //otherwise return without doing anything
+        }
+    };
+    moveFocusRight = () => {
+        if (!this.allowCopy) {
+            return;
+        }
+        if (this.focusEnd != null) {
+            const visibility = this.columnVisibility;
+            const columnDefs = this.columnDefs;
+            const upperBounds = columnDefs.length;
+            let index = this.focusEnd.column + 1;
+            while (index < upperBounds) {
+                const newId = columnDefs[index].id;
+                if (newId && visibility[newId] !== false) {
+                    this.focusEnd = { ...this.focusEnd, column: index };
+                    return;
+                }
+                ++index;
+            }
+        }
+    };
+    setFocusRight = () => {
+        if (!this.focusStart)
+            return;
+        if (this.focusStart != null) {
+            const visibility = this.columnVisibility;
+            const columnDefs = this.columnDefs;
+            const upperBounds = columnDefs.length;
+            let index = this.focusStart.column + 1;
+            while (index < upperBounds) {
+                const newId = columnDefs[index].id;
+                if (newId && visibility[newId] !== false) {
+                    this.moveFocus({ ...this.focusStart, id: newId, column: index });
+                    return;
+                }
+                ++index;
+            }
+            //otherwise return without doing anything
+        }
+    };
+    endFocus = (coords) => {
+        if (this.isMousingDown) {
+            this.isMousingDown = false;
+            if (!this.allowCopy) {
+                return;
+            }
+            this.focusEnd = { ...coords };
+        }
+    };
+    setIsCompact = (value) => {
+        this.isCompact = value;
+        this._updateLocalStorageSettings();
+    };
+    setAlternateRowColours = (value) => {
+        this.alternateRowColours = value;
+        this._updateLocalStorageSettings();
+    };
+    setSingleClickEditing = (value) => {
+        this.singleClickEditing = value;
+        this._updateLocalStorageSettings();
+    };
+    setChangeColourOnHover = (value) => {
+        this.changeColourOnHover = value;
+        this._updateLocalStorageSettings();
+    };
+    setCopyWithHeaders = (value) => {
+        if (this.allowCopy) {
+            this.copyWithHeaders = value;
+            this._updateLocalStorageSettings();
+        }
+    };
+    setCommaSeparatedCopy = (value) => {
+        if (this.allowCopy) {
+            this.commaSeparatedCopy = value;
+            this._updateLocalStorageSettings();
+        }
+    };
+    // /**
+    //  * HACK no idea why but this is necessary in order to fix columns that start out as invisibile
+    //  */
+    // public readonly forceVisibilityUpdate = () => {
+    // 	// alert('force visibility update');
+    // 	if (browser) {
+    // 		tick().then(() => {
+    // 			this.showSelectedOnly = !this.showSelectedOnly;
+    // 			this.showSelectedOnly = !this.showSelectedOnly;
+    // 			// this.columnDefs = this.columnDefs.concat();
+    // 		});
+    // 	}
+    // };
+    setSelectedPreset = (preset) => {
+        this.columnDefs = preset.columnDefs;
+        if (preset.sortingState) {
+            if (!this.paginationRepo?.updateSorting && dev) {
+                alert('no sorting state found');
+            }
+            this.paginationRepo?.updateSorting?.(preset.sortingState);
+        }
+        if (preset.visibilityState) {
+            this.columnVisibility = preset.visibilityState;
+        }
+        if (preset.columnPinningState) {
+            this.columnPinning = preset.columnPinningState;
+        }
+        this.selectedPreset = preset;
+        localStorage.setItem(`${this.userId}-${this.tableName}-selected-preset-name`, preset.name);
+    };
+    saveColumnPreset = (name) => {
+        if (!name) {
+            return;
+        }
+        const visibilityState = this.columnVisibility;
+        const columnPinningState = this.columnPinning;
+        const columnDefs = this.columnDefs;
+        const sortingState = (this.paginationRepo && this.paginationRepo.sorting) || [];
+        const newPreset = { columnDefs, name, visibilityState, columnPinningState, sortingState };
+        const lowercasePresetname = name.toLocaleLowerCase();
+        const indexToReplace = this.columnPresets.findIndex((oldPreset) => oldPreset.name.toLocaleLowerCase() === lowercasePresetname);
+        const newPresets = this.columnPresets.concat();
+        if (indexToReplace > -1) {
+            newPresets[indexToReplace] = newPreset;
+        }
+        else {
+            newPresets.push(newPreset);
+        }
+        this.columnPresets = newPresets;
+        const stringified = JSON.stringify(newPresets);
+        localStorage.setItem(`${this.userId}-${this.tableName}-presets`, stringified);
+        this.setSelectedPreset(newPreset);
+    };
+    /**
+     * This listener should be added and removed based on isMousingDown
+     */
+    setFocusEnd = (coords) => {
+        if (!this.allowCopy) {
+            return;
+        }
+        this.focusEnd = coords;
+    };
+    // #region private methods
+    columnDefReturnsTextValue = (it) => {
+        if (!this.dataRepo) {
+            return false;
+        }
+        return ('index' in it &&
+            this.columnVisibility[it.id] !== false &&
+            (it.columnType === undefined ||
+                it.columnType === 'Accessor' ||
+                //only include it if it returns some kind of tangible value instead of a custom component
+                ('accessorFn' in it && typeof it.accessorFn?.(this.sortedData[0], 0) != 'function')));
+    };
+    _updateLocalStorageSettings() {
+        const isCompact = this.isCompact;
+        const singleClickEditing = this.singleClickEditing;
+        const alternateRowColours = this.alternateRowColours;
+        const copyWithHeaders = this.copyWithHeaders;
+        const commaSeparatedCopy = this.commaSeparatedCopy;
+        const changeColourOnHover = this.changeColourOnHover;
+        const settingsObject = {
+            isCompact,
+            singleClickEditing,
+            alternateRowColours,
+            changeColourOnHover,
+            copyWithHeaders,
+            commaSeparatedCopy
+        };
+        localStorage.setItem(`${this.userId}-${this.tableName}-settings`, JSON.stringify(settingsObject));
+    }
+    _moveFocusEndRow(offset) {
+        if (!this.allowCopy) {
+            return;
+        }
+        if (!this.focusEnd) {
+            if (dev) {
+                console.warn('no current found');
+            }
+            return;
+        }
+        const rows = this.paginationRowModel.rows;
+        const endRowIndex = rows.findIndex((row) => row.index === this.focusEnd.row);
+        this.focusEnd = {
+            ...this.focusEnd,
+            row: rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].index
+        };
+    }
+    _moveFocusRow(offset) {
+        if (!this.focusStart) {
+            if (dev) {
+                console.warn('no this.focusStart found');
+            }
+            return null;
+        }
+        const newEndRowIndex = (() => {
+            const rows = this.paginationRowModel.rows;
+            const endRowIndex = rows.findIndex((row) => row.index === this.focusStart.row);
+            return rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].index;
+        })();
+        this.moveFocus({ ...this.focusStart, row: newEndRowIndex });
+    }
+    _recalculateFocusedElements() {
+        if (!this.focusStart || !this.focusEnd) {
+            this.focusedRowIndexIds = new SvelteSet();
+            this.focusedColumnIds = new SvelteSet();
+            return;
+        }
+        const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
+        const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
+        const model = this.sortedRowModel;
+        const startRowIndex = model?.rows.findIndex((row) => row.index === startRowIndexId) ?? -1;
+        const endRowIndex = model?.rows.findIndex((row) => row.index === endRowIndexId) ?? -1;
+        if (!model || startRowIndex == -1 || endRowIndex == -1) {
+            return;
+        }
+        const minRowIndex = Math.min(startRowIndex, endRowIndex);
+        const maxRowIndex = Math.max(startRowIndex, endRowIndex);
+        const minColumnIndex = Math.min(startColumnIndex, endColumnIndex);
+        const maxColumnIndex = Math.max(startColumnIndex, endColumnIndex);
+        const affectedColumns = new SvelteSet();
+        const visibility = this.columnVisibility;
+        this.columnDefs
+            .filter((it) => 'index' in it &&
+            visibility[it.id] !== false &&
+            // TODO handle pinning behaviour
+            // !columnPinning.left?.includes(it.id) &&
+            // !columnPinning.right?.includes(it.id) &&
+            // (!('columnType' in it) || it.columnType === undefined || it.columnType === 'Accessor') &&
+            it.index >= minColumnIndex &&
+            it.index <= maxColumnIndex)
+            .forEach((it) => affectedColumns.add(it.id));
+        const indeces = new SvelteSet();
+        for (let i = minRowIndex; i <= maxRowIndex; i++) {
+            indeces.add(parseInt(model.rows[i].id));
+        }
+        this.focusedRowIndexIds = indeces;
+        this.focusedColumnIds = affectedColumns;
+    }
+    async getHighlightedRowData() {
+        if (!this.dataRepo) {
+            throw new Error('No data found');
+        }
+        const affectedColumns = this.columnDefs.filter(this.columnDefReturnsTextValue);
+        const indices = new Map();
+        const selectedRows = [...this.highlightedItems.values()];
+        for (const item of selectedRows) {
+            const rowIndex = this.sortedData.indexOf(item);
+            if (rowIndex == -1) {
+                // eslint-disable-next-line no-debugger
+                debugger;
+            }
+            indices.set(item, rowIndex);
+        }
+        // TODO somewhere between here and the ending of the copy functionality, we end up with issues where instead of it using the accessor fn, it tries to pick up the select option, and ends up using the value ("1", etc)
+        const selectedCells = [];
+        const rowLength = selectedRows.length;
+        for (let rowIndex = 0; rowIndex < rowLength; rowIndex++) {
+            const item = selectedRows[rowIndex];
+            const key = this.selectionExtractor?.(item);
+            selectedCells[rowIndex] = [];
+            const targetRow = selectedCells[rowIndex];
+            const colLength = affectedColumns.length;
+            for (let colIndex = 0; colIndex < colLength; colIndex++) {
+                const col = affectedColumns[colIndex];
+                if (col instanceof RowSelectionDef) {
+                    targetRow.push(key !== undefined && this.selectedItems.has(key) ? 'true' : 'false');
+                    continue;
+                }
+                const x = 'accessorFn' in col && (await col.accessorFn?.(item, this.sortedData.indexOf(item)));
+                if (x && typeof x === 'string') {
+                    targetRow.push(x);
+                    continue;
+                }
+                if (x && Array.isArray(x) && typeof x[0] === 'string') {
+                    targetRow.push(x.join(', '));
+                    continue;
+                }
+                const toCopy = col.id && col.id in item ? item[col.id] : null;
+                const y = toCopy && typeof toCopy === 'object' && toCopy instanceof Date
+                    ? toCopy.toLocaleDateString()
+                    : (toCopy?.toString() ?? '');
+                targetRow.push(y);
+            }
+        }
+        return {
+            items: selectedRows,
+            indicesByItem: indices,
+            focusedElementData: selectedCells,
+            affectedColumns
+        };
+    }
+    async getFocusElementData() {
+        if (this.focusStart && this.focusEnd) {
+            const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
+            const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
+            const model = this.sortedRowModel;
+            const startRowIndex = model?.rows.findIndex((row) => row.index === startRowIndexId) ?? -1;
+            const endRowIndex = model?.rows.findIndex((row) => row.index === endRowIndexId) ?? -1;
+            if (!this.dataRepo || startRowIndex == -1 || endRowIndex == -1) {
+                if (dev) {
+                    console.warn('was missing one of the two indices');
+                    // eslint-disable-next-line no-debugger
+                    debugger;
+                }
+                throw new Error(`copy was missing one of the two indices. First: ${startRowIndex}, second: ${endRowIndex}`);
+            }
+            const minRowIndex = Math.min(startRowIndex, endRowIndex);
+            const maxRowIndex = Math.max(startRowIndex, endRowIndex);
+            const minColumnIndex = Math.min(startColumnIndex, endColumnIndex);
+            const maxColumnIndex = Math.max(startColumnIndex, endColumnIndex);
+            const affectedColumns = this.columnDefs.filter((it) => {
+                return (it.index >= minColumnIndex &&
+                    it.index <= maxColumnIndex &&
+                    this.columnDefReturnsTextValue(it));
+            });
+            const selectedRows = [];
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const indices = new Map();
+            for (let i = minRowIndex; i <= maxRowIndex; i++) {
+                const itemIndex = model.rows[i].index;
+                const item = this.sortedData[itemIndex];
+                selectedRows.push(item);
+                indices.set(item, itemIndex);
+            }
+            // TODO somewhere between here and the ending of the copy functionality, we end up with issues where instead of it using the accessor fn, it tries to pick up the select option, and ends up using the value ("1", etc)
+            const selectedCells = [];
+            const rowLength = selectedRows.length;
+            for (let rowIndex = 0; rowIndex < rowLength; rowIndex++) {
+                const item = selectedRows[rowIndex];
+                const key = this.selectionExtractor?.(item);
+                selectedCells[rowIndex] = [];
+                const targetRow = selectedCells[rowIndex];
+                const colLength = affectedColumns.length;
+                for (let colIndex = 0; colIndex < colLength; colIndex++) {
+                    const col = affectedColumns[colIndex];
+                    if (col.columnType === ColumnType.RowSelect) {
+                        targetRow.push(key !== undefined && this.selectedItems.has(key) ? 'true' : 'false');
+                        continue;
+                    }
+                    const x = 'accessorFn' in col && (await col.accessorFn?.(item, this.sortedData.indexOf(item)));
+                    if (x && typeof x === 'string') {
+                        targetRow.push(x);
+                        continue;
+                    }
+                    if (x && Array.isArray(x) && typeof x[0] === 'string') {
+                        targetRow.push(x.join(', '));
+                        continue;
+                    }
+                    const toCopy = col.id && col.id in item ? item[col.id] : null;
+                    const y = toCopy && typeof toCopy === 'object' && toCopy instanceof Date
+                        ? toCopy.toLocaleDateString()
+                        : (toCopy?.toString() ?? '');
+                    targetRow.push(y);
+                }
+            }
+            return {
+                items: selectedRows,
+                indicesByItem: indices,
+                focusedElementData: selectedCells,
+                affectedColumns
+            };
+        }
+        return { items: [], indicesByItem: new Map(), focusedElementData: [], affectedColumns: [] };
+    }
+    updateDefsBasedOnPinning = () => {
+        const leftDefs = [];
+        const midDefs = [];
+        const rightDefs = [];
+        this.columnDefs.forEach((def) => {
+            if (this.columnPinning.left?.includes(def.id)) {
+                leftDefs.push(def);
+            }
+            else if (this.columnPinning.right?.includes(def.id)) {
+                rightDefs.push(def);
+            }
+            else {
+                midDefs.push(def);
+            }
+        });
+        leftDefs.sort((a, b) => a.index - b.index);
+        midDefs.sort((a, b) => a.index - b.index);
+        rightDefs.sort((a, b) => a.index - b.index);
+        const allDefs = leftDefs.concat(midDefs, rightDefs);
+        allDefs.forEach((def, index) => {
+            def.index = index;
+        });
+        return allDefs;
+    };
+    assertNoDuplicateIds() {
+        const foundIds = new Set();
+        this.defaultColumnDefs.defs.forEach((def) => {
+            if (foundIds.has(def.id)) {
+                throw new Error(`Duplicate Column Definition ID ${def.id} in table ${this.tableName}`);
+            }
+            foundIds.add(def.id);
+        });
+    }
+    async setupDefaultColumnDefs() {
+        // 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;
+                // }
+                if (!('minSize' in def) || !def.minSize) {
+                    if (typeof def.header === 'string') {
+                        const minWidth = this.measureHeaderWidth(def);
+                        def.minSize = minWidth;
+                        def.width = Math.max(def.width, minWidth);
+                    }
+                    else {
+                        def.minSize = 120;
+                    }
+                }
+                // code smell...
+                if (def instanceof TextInputDef) {
+                    def.filterFn = this.stringFilter;
+                }
+                else if (def instanceof NumberInputDef) {
+                    def.filterFn = this.numberFilter;
+                }
+                else if (def instanceof SelectDef) {
+                    def.filterFn = this.selectFilter;
+                }
+                else if (def instanceof CheckboxDef) {
+                    def.filterFn = this.boolFilter;
+                }
+                else if (def instanceof DateInputDef) {
+                    def.filterFn = this.dateFilter;
+                }
+            }
+            return def;
+        });
+        const adjustedDefs = (await Promise.all(adjustedDefsPromises))
+            .sort((a, b) => a.index - b.index)
+            .map((def, index) => {
+            def.index = index;
+            return def;
+        });
+        this.columnDefs = adjustedDefs;
+        return adjustedDefs;
+    }
+    _getUserDefaults() {
+        const savedSettings = localStorage.getItem(`${this.userId}-${this.tableName}-settings`);
+        if (savedSettings) {
+            const saved = JSON.parse(savedSettings);
+            this.singleClickEditing = saved.singleClickEditing ?? true;
+            if (saved.alternateRowColours) {
+                this.alternateRowColours = true;
+            }
+            if (saved.commaSeparatedCopy) {
+                this.commaSeparatedCopy = true;
+            }
+            // these are true by default so we only want to alter them if the user wants them disabled
+            if (saved.isCompact === false) {
+                this.isCompact = false;
+            }
+            if (saved.copyWithHeaders === false) {
+                this.copyWithHeaders = false;
+            }
+            if (saved.changeColourOnHover === false) {
+                this.changeColourOnHover = false;
+            }
+        }
+        else {
+            this.singleClickEditing = true;
+        }
+    }
+    _setNewPinningState() {
+        this.columnPinning = {
+            left: this.columnPinning.left &&
+                this.columnDefs
+                    .filter((col) => this.columnPinning.left?.includes(col.id))
+                    .map((col) => col.id),
+            right: this.columnPinning.right &&
+                this.columnDefs
+                    .filter((col) => this.columnPinning.right?.includes(col.id))
+                    .map((col) => col.id)
+        }; // TODO
+    }
+    getToggleSortingHandler = (def) => (e) => {
+        this.paginationRepo?.updateSorting?.((state) => {
+            const newState = state.concat();
+            const index = newState.findIndex((it) => it.id === def.id);
+            if (index > -1) {
+                const found = newState[index];
+                if (found.desc) {
+                    newState.splice(index, 1);
+                }
+                else {
+                    newState[index] = { ...newState[index], desc: true };
+                }
+            }
+            else {
+                newState.push({
+                    desc: false,
+                    id: def.id
+                });
+            }
+            return newState;
+        });
+    };
+    async reassignDefsToPresets(presets) {
+        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;
+            });
+        });
+    }
+}
+// #region static functions
+function areDefsEquivalent(newColumnDefs, oldColumnDefs) {
+    const defKeys = newColumnDefs.map((def) => def.id);
+    const presetKeys = oldColumnDefs.map((def) => def.id);
+    if (defKeys.length !== presetKeys.length) {
+        return false;
+    }
+    return newColumnDefs.every((newDef) => {
+        if (newDef.columnType == ColumnType.RowSelect || newDef.columnType == ColumnType.Actions) {
+            return true;
+        }
+        const oldDef = oldColumnDefs.find((d) => d.id === newDef.id);
+        if (oldDef === undefined ||
+            newDef.header !== oldDef.header ||
+            newDef.columnType !== oldDef.columnType
+        // ||
+        // newDef.defaultHidden !== oldDef.defaultHidden ||
+        // newDef.enableHiding !== oldDef.enableHiding ||
+        // newDef.enablePinning !== oldDef.enablePinning ||
+        // newDef.enableResizing !== oldDef.enableResizing
+        ) {
+            return false;
+        }
+        return true;
+    });
+}
+function columnDefsToMap(defs) {
+    const map = new Map();
+    defs.forEach((def) => {
+        map.set(def.id, def);
+    });
+    return map;
+}
+function targetIsLI(target) {
+    return target.id.includes('-column-settings-');
+}
+export function isSearchable(def) {
+    return def instanceof AccessorDef || (!!def.filterFn && typeof def.filterFn == 'function');
+}
+function hasPagination(repository) {
+    return 'setPage' in repository;
+}
+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);
+        const isSorted = $derived.by(() => {
+            const sortState = contextObj.paginationRepo?.sorting.find((it) => it.id == def.id);
+            if (!sortState) {
+                return 'none';
+            }
+            if (sortState.desc) {
+                return 'desc';
+            }
+            return 'asc';
+        });
+        let originalWidth = 0;
+        let mouseStartingPoint = 0;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        function addOverrideResizeHandler(e) {
+            originalWidth = def.width;
+            mouseStartingPoint = e.clientX;
+            def.isResizing = true;
+            window.addEventListener('mousemove', onResize);
+            window.addEventListener('mouseup', removeOverrideResizeHandler);
+        }
+        function onResize(e) {
+            def.width = originalWidth - (mouseStartingPoint - e.clientX);
+        }
+        function removeOverrideResizeHandler(e) {
+            def.isResizing = false;
+            window.removeEventListener('mousemove', onResize);
+        }
+        return {
+            id: def.id,
+            colSpan: 1,
+            column: {
+                id: def.id,
+                getIsResizing: () => def.isResizing,
+                columnDef: def,
+                getCanSort: () => def.enableSorting,
+                getToggleSortingHandler: () => def.enableSorting ? contextObj.getToggleSortingHandler(def) : undefined,
+                getIsSorted: () => isSorted,
+                getIsVisible: () => isVisible
+            },
+            getResizeHandler: () => {
+                return (e) => {
+                    addOverrideResizeHandler(e);
+                };
+            },
+            isPlaceholder: false,
+            getSize: () => def.width
+        };
+    };
+    const leftHeaderGroups = $derived.by(() => {
+        const headers = contextObj.columnDefs
+            .filter((it) => contextObj.columnVisibility[it.id] != false &&
+            contextObj.columnPinning.left?.includes(it.id))
+            .map(makeHeader);
+        return [
+            {
+                depth: 0,
+                id: 'left_0',
+                headers
+            }
+        ];
+    });
+    const rightHeaderGroups = $derived.by(() => {
+        const headers = contextObj.columnDefs
+            .filter((it) => contextObj.columnVisibility[it.id] != false &&
+            contextObj.columnPinning.right?.includes(it.id))
+            .map(makeHeader);
+        return [
+            {
+                depth: 0,
+                id: 'right_0',
+                headers
+            }
+        ];
+    });
+    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)))
+            .map(makeHeader);
+        return [
+            {
+                depth: 0,
+                id: 'center_0',
+                headers
+            }
+        ];
+    });
+    const leftSizePx = $derived(leftHeaderGroups.reduce((total, grp) => total + grp.headers.reduce((total, header) => total + header.getSize(), 0), 0));
+    const centerSizePx = $derived(centerHeaderGroups.reduce((total, grp) => total + grp.headers.reduce((total, header) => total + header.getSize(), 0), 0));
+    const rightSizePx = $derived(rightHeaderGroups.reduce((total, grp) => total + grp.headers.reduce((total, header) => total + header.getSize(), 0), 0));
+    const leftVisibleLeafColumns = $derived(leftHeaderGroups.flatMap((grp) => grp.headers.map((it) => it.column)));
+    const rightVisibleLeafColumns = $derived(rightHeaderGroups.flatMap((grp) => grp.headers.map((it) => it.column)));
+    const centerVisibleLeafColumns = $derived(centerHeaderGroups.flatMap((grp) => grp.headers.map((it) => it.column)));
+    return {
+        getLeftTotalSize: () => leftSizePx,
+        getCenterTotalSize: () => centerSizePx,
+        getRightTotalSize: () => rightSizePx,
+        getLeftHeaderGroups: () => leftHeaderGroups,
+        getRightHeaderGroups: () => rightHeaderGroups,
+        getCenterHeaderGroups: () => centerHeaderGroups,
+        getLeftVisibleLeafColumns: () => leftVisibleLeafColumns,
+        getRightVisibleLeafColumns: () => rightVisibleLeafColumns,
+        getCenterVisibleLeafColumns: () => centerVisibleLeafColumns,
+        // manualPagination: true,
+        get data() {
+            return contextObj.sortedData;
+        },
+        get columns() {
+            return contextObj.columnDefs;
+        },
+        get columnSizing() {
+            return contextObj.columnSizing;
+        },
+        get columnVisibility() {
+            return contextObj.columnVisibility;
+        },
+        get sorting() {
+            return contextObj.paginationRepo?.sorting;
+        },
+        get pagination() {
+            return _pagination;
+        },
+        get columnPinning() {
+            return contextObj.columnPinning;
+        },
+        get columnFilters() {
+            return contextObj.paginationRepo?.filtering;
+        },
+        get enableMultiSort() {
+            return true;
+        },
+        get onColumnVisibilityChange() {
+            return contextObj.updateVisibility;
+        },
+        get onColumnSizingChange() {
+            return contextObj.updateColumnSizing;
+        },
+        get onColumnFiltersChange() {
+            return contextObj.updateFilters;
+        }
+        // get pageCount() {
+        // 	return _pageCount;
+        // }
+    };
+}
+function checkboxSortingFn(id, desc) {
+    return desc
+        ? (a, b) => {
+            if (a[id] && !b[id]) {
+                return 1;
+            }
+            if (!a[id] && b[id]) {
+                return -1;
+            }
+            return 0;
+        }
+        : (a, b) => {
+            if (a[id] && !b[id]) {
+                return -1;
+            }
+            if (!a[id] && b[id]) {
+                return 1;
+            }
+            return 0;
+        };
+}
+function comparableSortingFn(id, desc) {
+    return desc
+        ? (a, b) => {
+            if (a[id] == undefined && b[id] != undefined) {
+                return 1;
+            }
+            if (b[id] == undefined && a[id] != undefined) {
+                return -1;
+            }
+            if (a[id] < b[id]) {
+                return 1;
+            }
+            if (a[id] > b[id]) {
+                return -1;
+            }
+            return 0;
+        }
+        : (a, b) => {
+            if (a[id] == undefined && b[id] != undefined) {
+                return 1;
+            }
+            if (b[id] == undefined && a[id] != undefined) {
+                return -1;
+            }
+            if (a[id] < b[id]) {
+                return -1;
+            }
+            if (a[id] > b[id]) {
+                return 1;
+            }
+            return 0;
+        };
+}
+function progressSortingFn(id, desc) {
+    return desc
+        ? (a, b) => {
+            const [minA, maxA] = a[id];
+            const [minB, maxB] = b[id];
+            if (minA == undefined || maxA == undefined || maxA == 0) {
+                if (maxB != undefined && maxB != 0) {
+                    return 1;
+                }
+                else {
+                    return 0;
+                }
+            }
+            if (minB == undefined || maxB == undefined || maxB == 0) {
+                return -1;
+            }
+            const valueA = minA / maxA;
+            const valueB = minB / maxB;
+            if (valueA < valueB) {
+                return 1;
+            }
+            if (valueB < valueA) {
+                return -1;
+            }
+            return 0;
+        }
+        : (a, b) => {
+            const [minA, maxA] = a[id];
+            const [minB, maxB] = b[id];
+            if (minA == undefined || maxA == undefined || maxA == 0) {
+                if (maxB != undefined && maxB != 0) {
+                    return -1;
+                }
+                else {
+                    return 0;
+                }
+            }
+            if (minB == undefined || maxB == undefined || maxB == 0) {
+                return 1;
+            }
+            const valueA = minA / maxA;
+            const valueB = minB / maxB;
+            if (valueA < valueB) {
+                return -1;
+            }
+            if (valueB < valueA) {
+                return 1;
+            }
+            return 0;
+        };
+}
+// #endregion