@lavalogic/scoria 0.12.3 → 0.13.1

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

@@ -33,7 +33,8 @@
 	import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
 	import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
 	import type { QuickSearchCellProps } from './QuickSearchCellProps.js';
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { column, customFilters }: QuickSearchCellProps<T> = $props();
 
@@ -557,7 +558,6 @@
 							const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
 
 							tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
-							tableContext.paginationRepo?.filterModes.set(def.id, newFilterType);
 
 							if (selectedNumberFilterType?.value !== oldFilterType?.value) {
 								if (oldFilterType?.value === NumberDateFilterMode.Between) {
@@ -587,7 +587,6 @@
 						onchange={(newValue: SelectOption<StringFilterMode> | null) => {
 							const filterType = newValue?.value ?? StringFilterMode.Contains;
 							tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-							tableContext.paginationRepo?.filterModes.set(def.id, filterType);
 						}}
 						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();

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

@@ -8,7 +8,7 @@
 	import type { ColumnListProps } from './ColumnListProps.js';
 	import ColumnListRow from './ColumnListRow.svelte';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { searchValue }: ColumnListProps = $props();
 

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

@@ -7,7 +7,7 @@
 	import { Size } from '../../../../Types/Internal/Size.js';
 	import { getContext } from 'svelte';
 	import type { ColumnListRowProps } from './ColumnListRowProps.js';
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { columnDef }: ColumnListRowProps<T> = $props();
 

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

@@ -8,7 +8,7 @@
 	import { MultiFocusEdge } from '../../../Types/Focus/MultiFocusEdge.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
 	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
-	import { devCatch, refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
+	import { asyncMap, devCatch, refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../../../../../scss/colours.js';
 	import { Size } from '../../../../../Types/Internal/Size.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
@@ -24,7 +24,7 @@
 
 	const value = $derived(cell.getValue());
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	const actions: Array<TableActionButton<T>> = $derived(cell.column.columnDef.actions);
@@ -88,12 +88,14 @@
 			untrack(() => {
 				tick()
 					.then(() => {
-						if (validity === Validity.Invalid) {
-							tableContext.addInvalidValue(cell.row.original);
-						} else {
-							tableContext.removeInvalidValue(cell.row.original);
-						}
+						const x =
+							validity === Validity.Invalid
+								? tableContext.addInvalidValue(cell.row.original)
+								: tableContext.removeInvalidValue(cell.row.original);
+
 						previousValidity = validity;
+
+						return x;
 					})
 					.catch(devCatch);
 			});
@@ -163,15 +165,23 @@
 		/>
 	</div>
 	{#if thisPopupIsVisibile}
-		<Portal>
-			<div class="popup" style="--y: {y}px; --x: {x}px;">
-				<div class="action-container">
-					{#each actions as action (action.getLabel(cell.row.original, cell.row.visibleIndex))}
-						<TableAction {action} {cell} />
-					{/each}
+		{@const awaitedActions = asyncMap<TableActionButton<T>, [TableActionButton<T>, string]>(
+			actions,
+			async (item) => {
+				return [item, await item.getLabel(cell.row.original, cell.row.visibleIndex)];
+			}
+		)}
+		{#await awaitedActions then actions}
+			<Portal>
+				<div class="popup" style="--y: {y}px; --x: {x}px;">
+					<div class="action-container">
+						{#each actions as [action, label] (label)}
+							<TableAction {action} {cell} />
+						{/each}
+					</div>
 				</div>
-			</div>
-		</Portal>
+			</Portal>
+		{/await}
 	{/if}
 </td>
 

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

@@ -16,7 +16,7 @@
 
 	const values = $derived(cell.getValue()) as Array<string> | Promise<Array<string>>;
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	const focusDetails: TableFocusDetails<T, FilterValueType> = $derived(
@@ -44,12 +44,14 @@
 			untrack(() => {
 				tick()
 					.then(() => {
-						if (validity === Validity.Invalid) {
-							tableContext.addInvalidValue(cell.row.original);
-						} else {
-							tableContext.removeInvalidValue(cell.row.original);
-						}
+						const x =
+							validity === Validity.Invalid
+								? tableContext.addInvalidValue(cell.row.original)
+								: tableContext.removeInvalidValue(cell.row.original);
+
 						previousValidity = validity;
+
+						return x;
 					})
 					.catch(devCatch);
 			});

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

@@ -1,8 +1,12 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object, R extends object,FilterValueType">
+<script
+	lang="ts"
+	generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
+>
 	import Action from '../../../../Action.svelte';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
 	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
 	import { ColourSet } from '../../../../../scss/colours.js';
@@ -10,9 +14,9 @@
 	import { getContext } from 'svelte';
 	import type { ExpandCellProps } from './ExpandCellProps.js';
 
-	const { cell, expandedColumnDef, onExpandChange }: ExpandCellProps<T, R> = $props();
+	const { cell, expandedColumnDef, onExpandChange }: ExpandCellProps<T, R, IdType> = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 	const focusDetails: TableFocusDetails<T, FilterValueType> = $derived(
 		new TableFocusDetails(cell, tableContext, toastContext.toast)

package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte.d.ts

@@ -1,25 +1,26 @@
+import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
 import type { ExpandCellProps } from './ExpandCellProps.js';
-declare function $$render<T extends object, R extends object, FilterValueType>(): {
-    props: ExpandCellProps<T, R>;
+declare function $$render<T extends object, R extends object, FilterValueType, IdType extends Primitive>(): {
+    props: ExpandCellProps<T, R, IdType>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object, R extends object, FilterValueType> {
-    props(): ReturnType<typeof $$render<T, R, FilterValueType>>['props'];
-    events(): ReturnType<typeof $$render<T, R, FilterValueType>>['events'];
-    slots(): ReturnType<typeof $$render<T, R, FilterValueType>>['slots'];
+declare class __sveltets_Render<T extends object, R extends object, FilterValueType, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, R, FilterValueType, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, R, FilterValueType, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, R, FilterValueType, IdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object, R extends object, FilterValueType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, R, FilterValueType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, R, FilterValueType>['props']>, ReturnType<__sveltets_Render<T, R, FilterValueType>['events']>, ReturnType<__sveltets_Render<T, R, FilterValueType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, R, FilterValueType>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, R, FilterValueType>['exports']>;
-    <T extends object, R extends object, FilterValueType>(internal: unknown, props: ReturnType<__sveltets_Render<T, R, FilterValueType>['props']> & {}): ReturnType<__sveltets_Render<T, R, FilterValueType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+    new <T extends object, R extends object, FilterValueType, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, R, FilterValueType, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, R, FilterValueType, IdType>['props']>, ReturnType<__sveltets_Render<T, R, FilterValueType, IdType>['events']>, ReturnType<__sveltets_Render<T, R, FilterValueType, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, R, FilterValueType, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, R, FilterValueType, IdType>['exports']>;
+    <T extends object, R extends object, FilterValueType, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, R, FilterValueType, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, R, FilterValueType, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any>['bindings']>;
 }
 declare const ExpandCell: $$IsomorphicComponent;
-type ExpandCell<T extends object, R extends object, FilterValueType> = InstanceType<typeof ExpandCell<T, R, FilterValueType>>;
+type ExpandCell<T extends object, R extends object, FilterValueType, IdType extends Primitive> = InstanceType<typeof ExpandCell<T, R, FilterValueType, IdType>>;
 export default ExpandCell;

package/dist/Components/Table/Body/Rows/Columns/ExpandCellProps.d.ts

@@ -1,7 +1,8 @@
 import type { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
 import type { ExpandTableCell } from '../../../Types/Columns/ExpandTableCell.js';
-export interface ExpandCellProps<T extends object, R extends object> {
-    cell: ExpandTableCell<T, R>;
-    expandedColumnDef: ExpandDef<T, R> | undefined;
-    onExpandChange: (def: ExpandDef<T, R>) => void;
+import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
+export interface ExpandCellProps<T extends object, R extends object, IdType extends Primitive> {
+    cell: ExpandTableCell<T, R, IdType>;
+    expandedColumnDef: ExpandDef<T, R, IdType> | undefined;
+    onExpandChange: (def: ExpandDef<T, R, IdType>) => void;
 }

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

@@ -17,7 +17,7 @@
 		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
 	);
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	const options: Array<SelectOption<unknown>> = $derived(

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

@@ -22,7 +22,7 @@
 
 	const value: [number, number] = $derived(cell.getValue()) as [number, number];
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
 	// const previousRowIndex: number | undefined = $state(undefined);
@@ -52,12 +52,14 @@
 			untrack(() => {
 				tick()
 					.then(() => {
-						if (validity === Validity.Invalid) {
-							tableContext.addInvalidValue(cell.row.original);
-						} else {
-							tableContext.removeInvalidValue(cell.row.original);
-						}
+						const x =
+							validity === Validity.Invalid
+								? tableContext.addInvalidValue(cell.row.original)
+								: tableContext.removeInvalidValue(cell.row.original);
+
 						previousValidity = validity;
+
+						return x;
 					})
 					.catch(devCatch);
 			});

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

@@ -23,7 +23,7 @@
 
 	const value = $derived(!!cell.getValue());
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	const focusDetails: TableFocusDetails<T, BoolFilterValueType> = $derived(

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

@@ -25,8 +25,8 @@
 
 	export interface TableColumnProps<T extends object, FilterValueType> {
 		cell: TableCell<T, FilterValueType>;
-		expandedColumnDef: ExpandDef<T> | undefined;
-		onExpandChange: (columnDef: ExpandDef<T>) => void;
+		expandedColumnDef: ExpandDef<T, object, Primitive> | undefined;
+		onExpandChange: (columnDef: ExpandDef<T, object, Primitive>) => void;
 	}
 
 	function isProgressBarTableCell<T extends object>(
@@ -39,6 +39,7 @@
 <script lang="ts" generics="T extends object,FilterValueType">
 	import { dev } from '$app/environment';
 	import { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+	import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
 	import type { RowSelectionTableCell } from './RowSelectionTableCell.js';
 
 	let { cell, expandedColumnDef, onExpandChange }: TableColumnProps<T, FilterValueType> = $props();
@@ -58,7 +59,7 @@
 	function isActionsDef(cell: TableCell<T>): cell is ActionsTableCell<T> {
 		return cell.column.columnDef instanceof ActionsDef;
 	}
-	function isExpandTableCell(cell: TableCell<T>): cell is ExpandTableCell<T> {
+	function isExpandTableCell(cell: TableCell<T>): cell is ExpandTableCell<T, object, Primitive> {
 		return cell.column.columnDef instanceof ExpandDef;
 	}
 

package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte.d.ts

@@ -2,9 +2,10 @@ import { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.s
 import type { TableCell } from '../../../Types/Columns/TableCell.js';
 export interface TableColumnProps<T extends object, FilterValueType> {
     cell: TableCell<T, FilterValueType>;
-    expandedColumnDef: ExpandDef<T> | undefined;
-    onExpandChange: (columnDef: ExpandDef<T>) => void;
+    expandedColumnDef: ExpandDef<T, object, Primitive> | undefined;
+    onExpandChange: (columnDef: ExpandDef<T, object, Primitive>) => void;
 }
+import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
 declare function $$render<T extends object, FilterValueType>(): {
     props: TableColumnProps<T, FilterValueType>;
     exports: {};

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

@@ -19,7 +19,7 @@
 
 	const dateValue = $derived(value && value instanceof Date ? value : undefined);
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
 	const columnDef = $derived(cell.column.columnDef);
@@ -103,9 +103,9 @@
 		validityPromise
 			.then(([validity]) => {
 				if (validity === Validity.Invalid) {
-					tableContext.addInvalidValue(cell.row.original);
+					return tableContext.addInvalidValue(cell.row.original);
 				} else {
-					tableContext.removeInvalidValue(cell.row.original);
+					return tableContext.removeInvalidValue(cell.row.original);
 				}
 			})
 			.catch(devCatch);

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

@@ -48,7 +48,7 @@
 	let tdref: HTMLTableCellElement | undefined = $state();
 	let inputRef: HTMLInputElement | undefined = $state();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
 	const editableAsync = $derived(
@@ -161,12 +161,13 @@
 			untrack(() => {
 				tick()
 					.then(() => {
-						if (validity === Validity.Invalid) {
-							tableContext.addInvalidValue(cell.row.original);
-						} else {
-							tableContext.removeInvalidValue(cell.row.original);
-						}
+						const x: Promise<void> =
+							validity === Validity.Invalid
+								? tableContext.addInvalidValue(cell.row.original)
+								: tableContext.removeInvalidValue(cell.row.original);
+
 						previousValidity = validity;
+						return x;
 					})
 					.catch(devCatch);
 			});

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

@@ -29,7 +29,7 @@
 
 	let lastOptions: Array<SelectOption<unknown>> = $state([]);
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
 	const editableAsync = $derived(
@@ -175,12 +175,14 @@
 			untrack(() => {
 				tick()
 					.then(() => {
-						if (validity === Validity.Invalid) {
-							tableContext.addInvalidValue(cell.row.original);
-						} else {
-							tableContext.removeInvalidValue(cell.row.original);
-						}
+						const x =
+							validity === Validity.Invalid
+								? tableContext.addInvalidValue(cell.row.original)
+								: tableContext.removeInvalidValue(cell.row.original);
+
 						previousValidity = validity;
+
+						return x;
 					})
 					.catch(devCatch);
 			});

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

@@ -7,6 +7,7 @@
 	import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
 	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
+	import { devCatch } from '../../../../../Helpers/Helpers.svelte.js';
 	import { getContext } from 'svelte';
 	import type { ChangeEventHandler } from 'svelte/elements';
 
@@ -20,14 +21,14 @@
 <script lang="ts" generics="T extends object,">
 	const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	const focusDetails: TableFocusDetails<T, BoolFilterValueType> = $derived(
 		new TableFocusDetails(cell, tableContext, toastContext.toast)
 	);
 
-	const key = $derived(tableContext.selectionExtractor(cell.row.original));
+	const key: Promise<unknown> = $derived(tableContext.selectionExtractor(cell.row.original));
 
 	const value = $derived(tableContext.selectedItems.has(key));
 
@@ -39,7 +40,9 @@
 	);
 
 	const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
-		tableContext.toggleSelected(cell.row.original, (e.target as HTMLInputElement).checked);
+		tableContext
+			.toggleSelected(cell.row.original, (e.target as HTMLInputElement).checked)
+			.catch(devCatch);
 		parentOnchange?.(e);
 	};
 
@@ -68,7 +71,7 @@
 	onkeyup={(e) => {
 		if (e.key === 'Enter') {
 			e.stopPropagation();
-			tableContext.toggleSelected(cell.row.original, !value);
+			tableContext.toggleSelected(cell.row.original, !value).catch(devCatch);
 
 			inputRef?.dispatchEvent(new InputEvent('change'));
 			// tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value);

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

@@ -27,7 +27,7 @@
 
 	const optional = $derived(cell.column.columnDef.optional);
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
 	const editableAsync = $derived(
@@ -139,12 +139,14 @@
 			untrack(() => {
 				tick()
 					.then(() => {
-						if (validity === Validity.Invalid) {
-							tableContext.addInvalidValue(cell.row.original);
-						} else {
-							tableContext.removeInvalidValue(cell.row.original);
-						}
+						const x =
+							validity === Validity.Invalid
+								? tableContext.addInvalidValue(cell.row.original)
+								: tableContext.removeInvalidValue(cell.row.original);
+
 						previousValidity = validity;
+
+						return x;
 					})
 					.catch(devCatch);
 			});

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

@@ -56,7 +56,7 @@
 	let tdref = $state<HTMLTableCellElement | undefined>();
 	let inputRef = $state<HTMLInputElement | undefined>();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	const focusDetails: TableFocusDetails<T, never> = $derived(
@@ -150,12 +150,14 @@
 			untrack(() => {
 				tick()
 					.then(() => {
-						if (validity === Validity.Invalid) {
-							tableContext.addInvalidValue(cell.row.original);
-						} else {
-							tableContext.removeInvalidValue(cell.row.original);
-						}
+						const x =
+							validity === Validity.Invalid
+								? tableContext.addInvalidValue(cell.row.original)
+								: tableContext.removeInvalidValue(cell.row.original);
+
 						previousValidity = validity;
+
+						return x;
 					})
 					.catch(devCatch);
 			});

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

@@ -42,7 +42,7 @@
 
 	const { cell }: ValidityCellProps<T, FilterValueType> = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
 	const ColumnDef = $derived(cell.column.columnDef as AbstractDisplayDef<T, FilterValueType>);
@@ -76,9 +76,9 @@
 				const [validityValue] = await validity;
 
 				if (validityValue === Validity.Invalid) {
-					tableContext.addInvalidValue(cell.row.original);
+					return tableContext.addInvalidValue(cell.row.original);
 				} else {
-					tableContext.removeInvalidValue(cell.row.original);
+					return tableContext.removeInvalidValue(cell.row.original);
 				}
 			})().catch(devCatch);
 		});

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

@@ -2,24 +2,25 @@
 
 <script lang="ts" generics="T extends object">
 	import { dev } from '$app/environment';
-	import { generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
 	import { getContext, untrack } from 'svelte';
 	import NestedTable from '../../NestedTable.svelte';
 	import type { ExpandDef } from '../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
 	import type { DefsWrapper } from '../../Types/Columns/DefsWrapper.js';
 	import type { TableCell } from '../../Types/Columns/TableCell.js';
 	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../../Types/Context/TableInitOptions.js';
 	import ColumnHighlight from './ColumnHighlight.svelte';
 	import TableColumn from './Columns/TableColumn.svelte';
 	import type { TableRowProps } from './TableRowProps.js';
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { row, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
 
 	const hoverable = $derived(tableContext.changeColourOnHover);
 
 	//HACK converted this from derived to state+deffect because otherwise this throws an unsafe mutation error deeper down the stack
-	const cells: Array<TableCell<T, never>> = $derived(
+	const cells: Array<TableCell<T>> = $derived(
 		side === 'left'
 			? row.getLeftVisibleCells()
 			: side === 'right'
@@ -27,7 +28,7 @@
 				: row.getCenterVisibleCells()
 	);
 
-	let expandedColumnDef: ExpandDef<T> | undefined = $state();
+	let expandedColumnDef: ExpandDef<T, object, Primitive> | undefined = $state();
 
 	$effect(() => {
 		if (cells.length) {
@@ -44,7 +45,7 @@
 	let innerColumnDefs: DefsWrapper<object> = $state({ defs: [] });
 	let innerTableName: string | undefined = $state();
 
-	let prevExpandedColumnDef: ExpandDef<T> | undefined = $state();
+	let prevExpandedColumnDef: ExpandDef<T, object, Primitive> | undefined = $state();
 
 	const rowIndex = $derived(cells.at(0) && cells[0].row.visibleIndex);
 	const highlighted = $derived(
@@ -83,7 +84,7 @@
 		});
 	});
 
-	function onExpandChange(columnDef: ExpandDef<T>) {
+	function onExpandChange(columnDef: ExpandDef<T, object, Primitive>) {
 		if (expandedColumnDef?.id === columnDef.id) {
 			expandedColumnDef = undefined;
 		} else {
@@ -158,7 +159,7 @@ onMouseLeave={onMouseLeave} -->
 				})()}
 			{highlighted}
 			toggleHighlightedRow={() => {
-				tableContext.toggleHighlightedRow(row.original);
+				tableContext.toggleHighlightedRow(row.original).catch(devCatch);
 			}}
 		/>
 	{/if}

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

@@ -10,7 +10,7 @@
 
 	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	type HasHeight = {
 		trHeight: RefWrapper<number>;
@@ -33,24 +33,28 @@
 			{#if includeHighlight}
 				<td class="highlight-dud"><!-- accomodating for row marking --></td>
 			{/if}
-			{#each columns as column (column)}
+			{#each columns as column (column.id)}
 				<QuickSearchCell {column} customFilters={tableContext.remoteFilters} />
 			{/each}
 		</tr>
 	{/if}
-	{#each tableContext.paginationRowModel.rows as row, index (row)}
-		{@const customHeight = heights[index]?.applyTo.includes(side)
-			? heights[index].maxHeight
-			: undefined}
-		<TableRow
-			{includeHighlight}
-			{customHeight}
-			{row}
-			{side}
-			odd={index % 2 == 1}
-			bind:this={rows[index]}
-		/>
-	{/each}
+	<svelte:boundary>
+		{#await tableContext.paginationRowModel then prm}
+			{#each prm.rows as row, index (row)}
+				{@const customHeight = heights[index]?.applyTo.includes(side)
+					? heights[index].maxHeight
+					: undefined}
+				<TableRow
+					{includeHighlight}
+					{customHeight}
+					{row}
+					{side}
+					odd={index % 2 == 1}
+					bind:this={rows[index]}
+				/>
+			{/each}
+		{/await}
+	</svelte:boundary>
 </tbody>
 
 <style>td {