@lavalogic/scoria 0.11.15 → 0.12.1

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

@@ -5,9 +5,9 @@
 	import TouchModal from '../../Touch/TouchModal.svelte';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import FilterInput from './FilterInput.svelte';
-	import { getContext } from 'svelte';
 
 	export interface FilterPanelModalProps {
 		onclose?: () => void;
@@ -18,13 +18,10 @@
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
 	const { onclose }: FilterPanelModalProps = $props();
-	const refs: FilterInput<T>[] = $state([]);
+	const refs: Array<FilterInput<T>> = $state([]);
 
 	function reset() {
 		tableContext.paginationRepo?.resetFilters();
-		refs.forEach((ref) => {
-			ref.reset();
-		});
 	}
 </script>
 

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

@@ -7,15 +7,15 @@
 	import NumberInput from '../../NumberInput.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
 	import { AlertContext } from '../../../Contexts/AlertContext.svelte.js';
-	import { autoPluralise } from '../../../Helpers/Helpers.svelte.js';
+	import { autoPluralise, devCatch } from '../../../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../../../scss/colours.js';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { Side } from '../../../Types/Internal/Side.js';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext, tick } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import { FilterType } from '../Types/Filtering/FilterType.js';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 
 	export interface TableFooterProps {
 		onkeydown?: (e: KeyboardEvent) => void;
@@ -28,7 +28,7 @@
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 	const alertContext = getContext<AlertContext>(AlertContext.identifier);
 
-	const pageSizes: SelectOption<number>[] = $state([
+	const pageSizes: Array<SelectOption<number>> = $state([
 		{ label: '20', value: 20 },
 		{ label: '40', value: 40 },
 		{ label: '60', value: 60 },
@@ -48,7 +48,7 @@
 	$effect.pre(() => {
 		if (tableContext.paginationRepo) {
 			const found = pageSizes.find(
-				(size) => size.value === tableContext.paginationRepo!.paginationState.pageSize
+				(size) => size.value === tableContext.paginationRepo?.paginationState.pageSize
 			);
 
 			if (found) {
@@ -73,14 +73,16 @@
 		clearTimeout(debounceTimeout);
 		if (!isNaN(page)) {
 			debounceTimeout = setTimeout(() => {
-				tableContext.paginationRepo?.setPage?.(page);
-				tick().then(() => {
-					//force rerender
-					if (pageValue == (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1) {
-						pageValue = 0;
-						pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
-					}
-				});
+				tableContext.paginationRepo?.setPage(page);
+				tick()
+					.then(() => {
+						//force rerender
+						if (pageValue == (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1) {
+							pageValue = 0;
+							pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
+						}
+					})
+					.catch(devCatch);
 			}, 400) as unknown as number;
 		}
 	}
@@ -89,7 +91,7 @@
 		pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
 	});
 
-	let pageButtons: number[] = $state([]);
+	let pageButtons: Array<number> = $state([]);
 
 	$effect(() => {
 		if (tableContext.paginationRepo?.paginationState.pageIndex == null) {
@@ -101,7 +103,7 @@
 			);
 			const pageToStartWith = Math.max(1, Math.min(startingPage, tableContext.lastPage - 4));
 
-			pageButtons = new Array(Math.min(tableContext.lastPage, 5))
+			pageButtons = new Array<number>(Math.min(tableContext.lastPage, 5))
 				.fill(pageToStartWith)
 				.map((item, index) => item + index);
 		}
@@ -124,7 +126,7 @@
 >
 	<div class="block">
 		<span
-			>Actioning: {tableContext.dataRepo?.filterType === FilterType.Real ? 'Loaded' : 'All'} Records</span
+			>Actioning: {tableContext.dataRepo.filterType === FilterType.Real ? 'Loaded' : 'All'} Records</span
 		>
 	</div>
 
@@ -189,7 +191,7 @@
 				name="Page Size"
 				borderless
 				creatable
-				createFilter={(value) => {
+				createFilter={(value: string) => {
 					const parsed = parseInt(value);
 					return !(parsed >= 1 && parsed <= 500);
 				}}
@@ -206,15 +208,14 @@
 
 					tableContext.paginationRepo?.setPageSize(newSize.value);
 				}}
-				virtual
 				value={currentSize}
-				options={pageSizes as SelectOption<number>[]}
+				options={pageSizes}
 				labelProp="label"
 				valueProp="value"
 				valueAsObject
-				onchange={(newSelection) => {
+				onchange={(newSelection: SelectOption<number> | null) => {
 					if (newSelection?.value) {
-						tableContext.paginationRepo?.setPageSize(newSelection?.value);
+						tableContext.paginationRepo?.setPageSize(newSelection.value);
 					}
 				}}
 			/>
@@ -287,7 +288,7 @@
 						tableContext.paginationRepo?.nextPage();
 					}}
 					disabled={tableContext.showSelectedOnly ||
-						tableContext.paginationRepo?.paginationState.pageIndex + 1 >= tableContext.lastPage}
+						tableContext.paginationRepo.paginationState.pageIndex + 1 >= tableContext.lastPage}
 					iconRight={{
 						name: 'right-close',
 						size: Size.FillHeight

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

@@ -9,8 +9,10 @@
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import { ExpandedPanel } from '../Types/ExpandedPanel.js';
 	import ColumnPanelModal from './ColumnPanelModal.svelte';
-	import FilterPanelModal from './FilterPanelModal.svelte';
-	import ToolboxPanelModal from './FilterPanelModal.svelte';
+	import {
+		default as FilterPanelModal,
+		default as ToolboxPanelModal
+	} from './FilterPanelModal.svelte';
 
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
@@ -88,12 +90,12 @@
 			name: 'category'
 		}}>My Tool Box</Button
 	>
-	{#if tableContext.dataRepo?.addEmptyRow}
+	{#if tableContext.dataRepo.addEmptyRow}
 		<Button
 			size={Size.Small}
 			side={Side.Bottom}
 			onclick={() => {
-				tableContext.dataRepo?.addEmptyRow?.();
+				tableContext.dataRepo.addEmptyRow?.();
 			}}
 			variant={Variant.Toolbar}
 			iconTop={{
@@ -109,7 +111,7 @@
 			onclick={() => {
 				tableContext.paginationRepo?.reload?.();
 			}}
-			toggled={tableContext.dataRepo?.isLoading}
+			toggled={tableContext.dataRepo.isLoading}
 			size={Size.Small}
 			disabled={!tableContext.allowQuickFiltering}
 			variant={Variant.Toolbar}

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

@@ -11,8 +11,8 @@
 	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
 	import ColumnPanel from './ColumnPanel.svelte';
 	import FilterPanel from './FilterPanel.svelte';
-	import ToolboxPanel from './ToolboxPanel.svelte';
 	import SidePanel from './SidePanel.svelte';
+	import ToolboxPanel from './ToolboxPanel.svelte';
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
 	const panels = {
@@ -124,7 +124,7 @@
 			}}
 			disabled={!tableContext.allowQuickFiltering}
 			variant={Variant.Toolbar}
-			toggled={tableContext.dataRepo?.isLoading}
+			toggled={tableContext.dataRepo.isLoading}
 			iconTop={{
 				// colour: Colour.$alt,
 				name: 'refresh',

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

@@ -1,16 +1,11 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface ToolboxPanelModalProps {
-		onclose?: () => void;
-	}
-</script>
-
 <script lang="ts" generics="T extends object">
 	import Checkbox from '../../Checkbox.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import DesktopModal from '../../DesktopModal.svelte';
+	import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
 
 	let { onclose }: ToolboxPanelModalProps = $props();
 

package/dist/Components/Table/Misc/ToolboxPanelModal.svelte.d.ts

@@ -1,6 +1,4 @@
-export interface ToolboxPanelModalProps {
-    onclose?: () => void;
-}
+import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
 declare function $$render<T extends object>(): {
     props: ToolboxPanelModalProps;
     exports: {};

package/dist/Components/Table/Misc/ToolboxPanelModalProps.d.ts

@@ -0,0 +1,3 @@
+export interface ToolboxPanelModalProps {
+    onclose?: () => void;
+}

package/dist/Components/Table/Misc/ToolboxPanelModalProps.js

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

package/dist/Components/Table/Misc/numberDateFilterTypes.d.ts

@@ -0,0 +1,5 @@
+import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
+export declare const numberDateFilterTypes: {
+    value: NumberDateFilterMode;
+    label: string;
+}[];

package/dist/Components/Table/Misc/numberDateFilterTypes.js

@@ -0,0 +1,13 @@
+import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
+export const numberDateFilterTypes = [
+    { value: NumberDateFilterMode.Equals, label: 'Equals' },
+    { value: NumberDateFilterMode.NotEquals, label: 'Does not equal' },
+    { value: NumberDateFilterMode.LessThan, label: 'Less Than' },
+    { value: NumberDateFilterMode.LessThanOrEqual, label: 'Less than or equal to' },
+    { value: NumberDateFilterMode.GreaterThan, label: 'Greater than' },
+    { value: NumberDateFilterMode.GreaterThanOrEqual, label: 'Greater than or equal to' },
+    { value: NumberDateFilterMode.Between, label: 'Between' },
+    { value: NumberDateFilterMode.In, label: 'In' },
+    { value: NumberDateFilterMode.NotIn, label: 'Not in' },
+    { value: NumberDateFilterMode.null, label: 'Is null' }
+];

package/dist/Components/Table/Misc/stringFilterTypes.d.ts

@@ -0,0 +1,5 @@
+import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
+export declare const stringFilterTypes: {
+    value: StringFilterMode;
+    label: string;
+}[];

package/dist/Components/Table/Misc/stringFilterTypes.js

@@ -0,0 +1,15 @@
+import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
+export const stringFilterTypes = [
+    { value: StringFilterMode.Equals, label: 'Equals' },
+    { value: StringFilterMode.NotEquals, label: 'Does not equal' },
+    { value: StringFilterMode.Contains, label: 'Contains' },
+    { value: StringFilterMode.NotContains, label: 'Does not contain' },
+    { value: StringFilterMode.StartsWith, label: 'Starts With' },
+    { value: StringFilterMode.NotStartsWith, label: 'Does not start with' },
+    { value: StringFilterMode.EndsWith, label: 'Ends With' },
+    { value: StringFilterMode.NotEndsWith, label: 'Does not end with' },
+    { value: StringFilterMode.In, label: 'In' },
+    { value: StringFilterMode.NotIn, label: 'Not in' },
+    { value: StringFilterMode.Empty, label: 'Empty' },
+    { value: StringFilterMode.null, label: 'Is null' }
+];

package/dist/Components/Table/NestedTable.svelte

@@ -20,7 +20,7 @@
 
 	export interface NestedTableProps<T extends object> {
 		tableName: string;
-		data: T[];
+		data: Array<T>;
 		columnDefWrapper: DefsWrapper<T>;
 		options: Pick<TableInitOptions<T>, 'selectionExtractor'> & Partial<TableInitOptions<T>>;
 		oncontextmenu?: (e: MouseEvent) => void;
@@ -49,13 +49,15 @@
 		root?.closest('.flex_table')?.getBoundingClientRect().width
 	);
 
-	const dataRepo = $state(new LocalTableDataRepository(tableName, wrapper, getUserId));
+	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
+	const dataRepo = $state(new LocalTableDataRepository(tableName, wrapper, () => getUserId()));
 
+	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
 	const tableContext: TableContext<T> | undefined = $state(
 		TableContext.init<T>(columnDefWrapper, tableName, dataRepo, {
 			...defaultOptions,
 			...options,
-			getUserId
+			getUserId: () => getUserId()
 		})
 	);
 </script>

package/dist/Components/Table/NestedTable.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
 import type { TableInitOptions } from './Types/Context/TableInitOptions.js';
 export interface NestedTableProps<T extends object> {
     tableName: string;
-    data: T[];
+    data: Array<T>;
     columnDefWrapper: DefsWrapper<T>;
     options: Pick<TableInitOptions<T>, 'selectionExtractor'> & Partial<TableInitOptions<T>>;
     oncontextmenu?: (e: MouseEvent) => void;

package/dist/Components/Table/Table.svelte

@@ -5,11 +5,13 @@
 		ContextMenuContext,
 		type IContextMenuOption
 	} from '../../Contexts/ContextMenuContext.svelte.js';
-	import { refWrapper } from '../../Helpers/Helpers.svelte.js';
+	import { devCatch, refWrapper } from '../../Helpers/Helpers.svelte.js';
+	import type { RefWrapper } from '../../Types/Internal/RefWrapper.js';
 	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
 	import LoadingOverlay from '../LoadingOverlay.svelte';
+	import type { HeightData } from './Body/HeightData.js';
 	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
-	import TableBody, { type HeightData } from './Body/TableBody.svelte';
+	import TableBody from './Body/TableBody.svelte';
 	import TableHead from './Headers/TableHead.svelte';
 	import TableFooter from './Misc/TableFooter.svelte';
 	import TableHorizontalBar from './Misc/TableHorizontalBar.svelte';
@@ -27,7 +29,7 @@
 	}
 
 	export interface TableProps<T extends object> {
-		tableContext: TableContext<T>;
+		readonly tableContext: TableContext<T>;
 		nested?: boolean;
 	}
 
@@ -39,6 +41,7 @@
 <script lang="ts" generics="T extends object">
 	const { nested = false, tableContext }: TableProps<T> = $props();
 
+	// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
 	setContext(TableContext.identifier, tableContext);
 
 	// const tableContext = getContext<TableContext<T>>(TableContext.identifier);
@@ -53,18 +56,20 @@
 	setContext(quickFilterContextIdentifier, openedQuickFilterSelect);
 
 	$effect(() => {
-		if (tableContext.focusStart && ref) {
-			untrack(() => {
-				const { row, column: index } = tableContext.focusStart!;
-				let element = ref?.querySelector(
+		void tableContext.focusStart;
+		void ref;
+		untrack(() => {
+			if (tableContext.focusStart && ref) {
+				const { row, column: index } = tableContext.focusStart;
+				let element = ref.querySelector(
 					`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].id}`
 				) as HTMLElement | undefined;
 
 				if (element?.tabIndex == -1) {
 					const td = element;
-					element = td.querySelector('button') as HTMLElement;
+					element = td.querySelector('button') as HTMLElement | undefined;
 					if (!element) {
-						element = td.querySelector('input') as HTMLElement;
+						element = td.querySelector('input') as HTMLElement | undefined;
 					}
 				}
 
@@ -74,8 +79,8 @@
 					block: 'nearest',
 					inline: 'nearest'
 				});
-			});
-		}
+			}
+		});
 	});
 
 	$effect(() => {
@@ -95,7 +100,7 @@
 
 	$effect(() => {
 		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		tableContext.dataRepo?.data?.length;
+		tableContext.dataRepo.data.length;
 		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 		tableContext.selectedItems;
 		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -137,21 +142,30 @@
 			}
 		}
 
+		// this may not exist in http contexts
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 		if (tableContext.allowCopy && window.Clipboard) {
 			e.preventDefault();
 
-			const options: IContextMenuOption[] = [
-				{ callback: () => tableContext.copyDataToClipboard(), text: 'Copy Selection' }
+			const options: Array<IContextMenuOption> = [
+				{
+					callback: () => {
+						tableContext.copyDataToClipboard().catch(devCatch);
+					},
+					text: 'Copy Selection'
+				}
 			];
 
 			if (tableContext.hasHighlightedItems) {
 				options.push({
-					callback: () => tableContext.copyHighlightedRowsToClipboard(),
+					callback: () => {
+						tableContext.copyHighlightedRowsToClipboard().catch(devCatch);
+					},
 					text: 'Copy Highlighted Rows'
 				});
 			}
 
-			_openContextMenu(e, options);
+			_openContextMenu(e, options).catch(devCatch);
 		}
 	}
 
@@ -163,7 +177,8 @@
 			}
 
 			if (target.closest('div.slot-wrapper') == null) {
-				shownPopup.value = undefined;
+				// svelte type gen/eslint miscommunication
+				(shownPopup as RefWrapper<symbol | undefined>).value = undefined;
 			}
 		}
 	}
@@ -192,8 +207,7 @@
 		remPxRatio = parseFloat(getComputedStyle(document.documentElement).fontSize);
 	});
 
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	function addOverrideResizeHandler(e: MouseEvent) {
+	function addOverrideResizeHandler() {
 		isResizing = true;
 		window.addEventListener('mousemove', onResize);
 	}
@@ -216,19 +230,21 @@
 	const shouldUnfocusRemote = $derived(
 		usesLoading &&
 			tableContext.paginationRepo?.isLoading === false &&
-			tableContext.paginationRepo!.paginationState?.pageIndex !==
+			tableContext.paginationRepo.paginationState.pageIndex !==
 				tableContext.paginationRepo.previouslyViewedPage
 	);
 
 	const shouldUnfocusLocal = $derived(
-		!usesLoading && tableContext.paginationRepo?.paginationState?.pageIndex
+		!usesLoading && tableContext.paginationRepo?.paginationState.pageIndex
 	);
 
 	$effect(() => {
 		if ((shouldUnfocusRemote || shouldUnfocusLocal) && unfocusRef) {
-			untrack(() => tableContext.unfocus());
+			untrack(() => {
+				tableContext.unfocus();
+			});
 			unfocusRef.scrollTop = 0;
-		} else if (usesLoading && tableContext.paginationRepo!.isLoading === false) {
+		} else if (usesLoading && tableContext.paginationRepo?.isLoading === false) {
 			// refocus same element after a reload
 			// this does not break mutifocus
 			untrack(() => {
@@ -238,15 +254,27 @@
 				}
 				const idToFocusTo = `#${tableContext.tableName}-cell-${fs.row}-${fs.id}`;
 
-				tick().then(() => {
-					if (idToFocusTo) {
-						(document.querySelector(idToFocusTo) as HTMLTableCellElement | undefined)?.focus();
-					}
-				});
+				tick()
+					.then(() => {
+						if (idToFocusTo) {
+							(document.querySelector(idToFocusTo) as HTMLTableCellElement | undefined)?.focus();
+						}
+					})
+					.catch(devCatch);
 			});
 		}
 	});
 
+	$effect(() => {
+		void tableContext.dataRepo.data;
+		untrack(() => {
+			if (tableContext.paginationRepo?.paginationState.pageIndex != undefined) {
+				tableContext.updateSelectedItems().catch(devCatch);
+				tableContext.resetHighlightedRows();
+			}
+		});
+	});
+
 	const leftTotalSize = $derived(tableContext.table.getLeftTotalSize());
 	const centreTotalSize = $derived(tableContext.table.getCenterTotalSize());
 	const rightTotalSize = $derived(tableContext.table.getRightTotalSize());
@@ -258,16 +286,20 @@
 	const appropriateSide = $derived.by(() => {
 		if (leftColumns.length > 0) {
 			return 'left';
-		} else if ((rightColumns.length ?? 0) != tableContext.columnDefs.length) {
+		} else if (rightColumns.length != tableContext.columnDefs.length) {
 			return 'centre';
 		} else {
 			return 'right';
 		}
 	});
 
-	let leftTable: TableBody<T> | undefined = $state();
-	let centreTable: TableBody<T> | undefined = $state();
-	let rightTable: TableBody<T> | undefined = $state();
+	type SvelteTableElement = {
+		rowHeights: RefWrapper<Array<number>>;
+	};
+
+	let leftTable: SvelteTableElement | undefined = $state();
+	let centreTable: SvelteTableElement | undefined = $state();
+	let rightTable: SvelteTableElement | undefined = $state();
 
 	const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
 		if (!leftTable || !centreTable || !rightTable) {
@@ -276,7 +308,7 @@
 		const centre = centreTable.rowHeights.value;
 		const right = rightTable.rowHeights.value;
 
-		return leftTable?.rowHeights.value.map((_leftHeight, index) => {
+		return leftTable.rowHeights.value.map((_leftHeight, index) => {
 			const leftHeight = _leftHeight || 0;
 			const centreHeight = centre[index] || 0;
 			const rightHeight = right[index] || 0;
@@ -304,13 +336,13 @@
 </script>
 
 <svelte:window
-	onmouseup={(e) => {
+	onmouseup={(e: MouseEvent) => {
 		if (
 			// if it's not a click on an item in the context menu
-			!(e.target as HTMLElement | undefined)?.classList?.contains('context-menu-item') &&
+			!(e.target as HTMLElement | undefined)?.classList.contains('context-menu-item') &&
 			// if it's outside the table or inside the empty space of the table
 			(e.target === unfocusRef ||
-				((e.target as HTMLElement | undefined)?.closest?.('.table-wrapper') == null &&
+				((e.target as HTMLElement | undefined)?.closest('.table-wrapper') == null &&
 					mousedDownEmptySpace))
 		) {
 			tableContext.unfocus();
@@ -323,17 +355,17 @@
 
 		removeOverrideResizeHandler();
 	}}
-	onclick={(e) => {
+	onclick={(e: MouseEvent) => {
 		handleClickOutside(e);
 	}}
-	onmousedown={(e) => {
+	onmousedown={(e: MouseEvent) => {
 		mousedDownEmptySpace =
 			e.target === unfocusRef || (e.target as HTMLElement).closest('.table-wrapper') == null;
 	}}
 />
 
 <div class="grid" class:nested>
-	{#if tableContext.dataRepo?.isLoading}
+	{#if tableContext.dataRepo.isLoading}
 		<LoadingOverlay absolute borderRadius="4px" />
 	{/if}
 
@@ -434,7 +466,7 @@
 				class="resizer"
 				onmousedown={(e) => {
 					e.preventDefault();
-					addOverrideResizeHandler(e);
+					addOverrideResizeHandler();
 				}}
 			></div>
 		{/if}

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

@@ -7,7 +7,7 @@ declare global {
     }
 }
 export interface TableProps<T extends object> {
-    tableContext: TableContext<T>;
+    readonly tableContext: TableContext<T>;
     nested?: boolean;
 }
 export declare const quickFilterContextIdentifier: symbol;

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

@@ -1,7 +1,7 @@
 import type { ColumnDef } from './Definitions/ColumnDef.svelte.js';
 export interface Column<T extends object> {
     id: string;
-    columnDef: ColumnDef<T, any>;
+    columnDef: ColumnDef<T, never>;
     getCanSort: () => boolean;
     getToggleSortingHandler: () => ((e: MouseEvent) => void) | undefined;
     getIsSorted: () => 'asc' | 'desc' | 'none';

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

@@ -1,5 +1,5 @@
 import type { DateInputDef } from './Definitions/Accessors/DateInputDef.svelte.js';
-export interface DateColumn<T extends object & object> {
+export interface DateColumn<T extends object> {
     id: string;
     columnDef: DateInputDef<T>;
     getCanSort: () => boolean;

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

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

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

@@ -1,8 +1,7 @@
 import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
 import type { BoolFilterValueType, FilterFn } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
-export interface CheckboxDefProps<T extends object> extends AccessorDefProps<T, BoolFilterValueType> {
-}
+export type CheckboxDefProps<T extends object> = AccessorDefProps<T, BoolFilterValueType>;
 export declare class CheckboxDef<T extends object> extends AccessorDef<T, BoolFilterValueType> {
     readonly accessorType: "Checkbox";
     constructor(props: CheckboxDefProps<T>);

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

@@ -1,5 +1,7 @@
 import { AccessorDef } from './AccessorDef.svelte.js';
 import { AccessorType } from './AccessorType.js';
+// export interface CheckboxDefProps<T extends object>
+// 	extends AccessorDefProps<T, BoolFilterValueType> {}
 export class CheckboxDef extends AccessorDef {
     accessorType = AccessorType.Checkbox;
     constructor(props) {