@lavalogic/scoria 0.36.0 → 0.37.0

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

@@ -2,7 +2,7 @@
 
 <script
 	lang="ts"
-	generics="T extends object, FilterValueType"
+	generics="T extends object, IdType extends Primitive, FilterValueType"
 >
 	import { dev } from '$app/environment';
 	import Action from '../../Action.svelte';
@@ -13,12 +13,13 @@
 	import TextInput from '../../TextInput.svelte';
 	import ThreeStateRadio from '../../ThreeStateRadio.svelte';
 	import DateModal from '../../Touch/DateModal.svelte';
-	import { devCatch, hasQuery, isDateTuple, isNumericArray } from '../../../Helpers/Helpers.svelte.js';
+	import { hasQuery } from '../TableHelpers.svelte.js';
+	import { devCatch, isDateTuple, isNumericArray } from '../../../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../../../scss/colours.js';
 	import { InputVariant } from '../../../Types/Internal/InputVariant.js';
 	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { Size } from '../../../Types/Internal/Size.js';
-	import { getContext, onMount, untrack } from 'svelte';
+	import { getContext, onDestroy, onMount, untrack } from 'svelte';
 	import { cubicOut } from 'svelte/easing';
 	import { fade } from 'svelte/transition';
 
@@ -32,12 +33,13 @@
 	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
 	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import { CustomFilterType } from '../Types/Filtering/CustomFilterType.js';
 	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, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
 	const { column, customFilters }: QuickSearchCellProps<T, FilterValueType> = $props();
 
@@ -88,7 +90,7 @@
 	const isSelectOpen = $derived(openedSelect?.value === selectSymbol);
 
 	// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-	let asdfvalue: unknown | null = $state(null);
+	let value: unknown | null = $state(null);
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
@@ -140,7 +142,7 @@
 						if (def.debug) {
 							console.debug(`${def.id}: `, 'value:', $state.snapshot(x));
 						}
-						asdfvalue = (await x) ?? null;
+						value = (await x) ?? null;
 					} else if (def.debug) {
 						console.debug(
 							`${def.id}: `,
@@ -150,7 +152,7 @@
 					}
 				} catch (e) {
 					console.warn(e);
-					asdfvalue = null;
+					value = null;
 				}
 			}).catch(devCatch);
 		} else if (isSelect) {
@@ -208,36 +210,39 @@
 				const gotValue = filteringStateValue;
 				if (gotValue != undefined) {
 					const [min, max] = gotValue as [number, number | undefined];
-					asdfvalue = min;
+					value = min;
 					valueMin = min;
 					valueMax = max ?? null;
 				} else {
-					asdfvalue = valueMin = valueMax = null;
+					value = valueMin = valueMax = null;
 				}
 			} else if (tableContext.paginationRepo?.filtering) {
 				const gotValue = filteringStateValue;
 
 				if (gotValue != undefined) {
 					const [min] = gotValue as [number, number | undefined];
-					asdfvalue = min;
+					value = min;
 					valueMin = min;
 					valueMax = min;
 				} else {
-					asdfvalue = valueMin = valueMax = null;
+					value = valueMin = valueMax = null;
 				}
 			}
 		} else if (tableContext.paginationRepo?.filtering) {
 			const gotValue = filteringStateValue;
 			if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
-				//RATS
-				rats(gotValue);
-				asdfvalue = gotValue;
+				assertNotPromise(gotValue);
+				value = gotValue;
 			}
 		}
 	});
 
-	function rats(gotValue: unknown) {
-		// RATS
+	/**
+	 * Dev-only invariant: a Promise must never reach the synchronous primitive
+	 * sink (we should always have awaited it upstream). Throws in dev to make
+	 * any regression loud; no-ops in production builds.
+	 */
+	function assertNotPromise(gotValue: unknown) {
 		if (dev && gotValue != null && typeof gotValue == 'object' && gotValue instanceof Promise) {
 			throw new Error(`Unexpected Promise`);
 		}
@@ -252,19 +257,18 @@
 				[valueMin, valueMax] = filterOption.value;
 				if (valueMax == undefined) {
 					valueMax = valueMin;
-					asdfvalue = valueMin?.toString();
+					value = valueMin?.toString();
 				} else if (valueMin == undefined) {
 					valueMin = valueMax;
-					asdfvalue = valueMax.toString();
+					value = valueMax.toString();
 				} else {
-					asdfvalue = valueMin.toString();
+					value = valueMin.toString();
 				}
 			} else if (!hasQuery(customFilter)) {
 				const gotValue = filterOption.value;
 				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
-					//RATS
-					rats(gotValue);
-					asdfvalue = gotValue;
+					assertNotPromise(gotValue);
+					value = gotValue;
 				}
 			}
 		}
@@ -284,24 +288,69 @@
 		return (newValue: SelectOption<unknown> | null) => {
 			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
 			tableContext.dataRepo.__queryValues.set(label, newValue);
-			rats(newValue);
-			asdfvalue = newValue;
+			assertNotPromise(newValue);
+			value = newValue;
 		};
 	}
 
 	function generateOnChangePrimitive(label: string) {
-		return (newValue: SelectOption<unknown> | null) => {
-			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-			tableContext.dataRepo.__queryValues.set(label, newValue?.value ?? null);
-			rats(newValue);
-			asdfvalue = newValue?.value ?? null;
+		// Phase 7.6: AsPrimitive QuerySelect now hands us the primitive
+		// directly (previously typed as `SelectOption` with a hidden
+		// `.value` dig). The discriminated typing makes the flow
+		// straightforward.
+		return (newValue: unknown) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
+			tableContext.dataRepo.__queryValues.set(label, newValue ?? null);
+			assertNotPromise(newValue);
+			value = newValue ?? null;
 		};
 	}
 
 	let isNullFilter = $derived(selectedNumberFilterType?.value == NumberDateFilterMode.null);
+
+	/**
+	 * Debounce window for typed filter inputs. For a 10k-row table each
+	 * keystroke would otherwise kick off a full filter pass; coalescing
+	 * adjacent keystrokes within `FILTER_DEBOUNCE_MS` cuts the cost to
+	 * roughly one filter pass per pause-in-typing.
+	 */
+	const FILTER_DEBOUNCE_MS = 300;
+
+	/**
+	 * Sequence counter used to discard the result of a stale debounce
+	 * timer. When the user types again before the timer fires, the
+	 * `pendingSeq` increments; only the timer whose captured `seq`
+	 * matches `pendingSeq` is allowed to call `filterBy`.
+	 */
+	let pendingSeq = 0;
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function debouncedFilterBy(value: unknown): void {
+		pendingSeq += 1;
+		const seq = pendingSeq;
+		if (debounceTimer !== undefined) {
+			clearTimeout(debounceTimer);
+		}
+		debounceTimer = setTimeout(() => {
+			debounceTimer = undefined;
+			if (seq !== pendingSeq) {
+				// A newer keystroke superseded this one before the timer
+				// fired; the newer timer will handle the filter call.
+				return;
+			}
+			tableContext.paginationRepo?.filterBy(def.id, value);
+		}, FILTER_DEBOUNCE_MS);
+	}
+
+	onDestroy(() => {
+		if (debounceTimer !== undefined) {
+			clearTimeout(debounceTimer);
+			debounceTimer = undefined;
+		}
+	});
 </script>
 
-<td class="input-cell {inputId}">
+<div class="input-cell {inputId}">
 	{#if isSearchable}
 		<div class="input-wrapper-parent">
 			{#if isDate}
@@ -370,7 +419,7 @@
 							name={customFilter.objectName ?? 'Item'}
 							valueProp="value"
 							labelProp="label"
-							value={asdfvalue as null}
+							value={value as null}
 							query={customFilter.query}
 							bind:options={lastQueryOptions}
 							onchange={generateOnChangePrimitive(label)}
@@ -386,7 +435,7 @@
 							name={customFilter.objectName ?? 'Item'}
 							valueProp="value"
 							labelProp="label"
-							value={asdfvalue as null}
+							value={value as null}
 							query={customFilter.query}
 							bind:options={lastQueryOptions}
 							onchange={generateOnChangeObject(label)}
@@ -460,7 +509,7 @@
 							variant={InputVariant.Table}
 							placeholder="Min&hellip;"
 							oninput={() => {
-								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+								debouncedFilterBy([valueMin, valueMax]);
 							}}
 							onkeydown={closeOnCtrlF}
 						/>
@@ -473,7 +522,7 @@
 							placeholder="Max&hellip;"
 							variant={InputVariant.Table}
 							oninput={() => {
-								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+								debouncedFilterBy([valueMin, valueMax]);
 							}}
 							onkeydown={closeOnCtrlF}
 						/>
@@ -496,21 +545,22 @@
 								<TextInput
 									data-type="quicksearch"
 									id={inputId}
-									bind:value={asdfvalue as string | null}
+									bind:value={value as string | null}
 									placeholder="Filter&hellip;"
 									variant={InputVariant.Table}
 									oninput={() => {
-										tableContext.paginationRepo?.filterBy(def.id, [asdfvalue || null]);
+										debouncedFilterBy([value || null]);
 									}}
 									onkeydown={closeOnCtrlF}
 								/>
 							{/if}
 						{:catch e}
+							<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
 							{@debug e}
 						{/await}
 					</div>
 				{/if}
-			{:else if asdfvalue == null || typeof asdfvalue == 'string'}
+			{:else if value == null || typeof value == 'string'}
 				<div class="input-wrapper right">
 					{#if selectedStringFilterType?.value == StringFilterMode.null}
 						<TextInput
@@ -533,10 +583,10 @@
 							data-type="quicksearch"
 							id={inputId}
 							oninput={() => {
-								tableContext.paginationRepo?.filterBy(def.id, asdfvalue);
+								debouncedFilterBy(value);
 							}}
 							variant={InputVariant.Table}
-							bind:value={asdfvalue as string | null}
+							bind:value={value as string | null}
 							placeholder="Filter&hellip;"
 						/>
 					{/if}
@@ -597,7 +647,7 @@
 								if (newFilterType === NumberDateFilterMode.Between) {
 									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
 								} else if (newFilterType === NumberDateFilterMode.In) {
-									tableContext.paginationRepo?.filterBy(def.id, [asdfvalue]);
+									tableContext.paginationRepo?.filterBy(def.id, [value]);
 								} else {
 									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
 								}
@@ -627,9 +677,13 @@
 			</div>
 		</div>
 	{/if}
-</td>
+</div>
 
-<style>td {
+<style>.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell,
+.datepicker-cell {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
@@ -639,14 +693,16 @@
   position: relative;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--height);
 }
 
-td.input-cell {
+.input-cell {
   padding: unset;
   box-sizing: border-box;
-  vertical-align: middle;
 }
 
 .spaced-around {
@@ -660,14 +716,14 @@ td.input-cell {
   justify-content: space-around;
 }
 
-td {
+div.input-cell {
   background-color: #f4f7f9;
   height: var(--height);
   overflow: visible;
   padding-left: 0;
   padding-right: 0;
 }
-td div.stick-right {
+div.input-cell div.stick-right {
   position: absolute;
   right: 0.5rem;
   height: 100%;
@@ -736,10 +792,10 @@ div.input-wrapper-parent div.input-wrapper.right {
   --input-padding-right: 2.6rem;
 }
 
-td {
+[role=cell] {
   --input-width: 100%;
 }
-td .input-wrapper-parent {
+[role=cell] .input-wrapper-parent {
   width: 100%;
 }
 

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

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

package/dist/Components/Table/Body/QuickSearchCellProps.d.ts

@@ -1,6 +1,12 @@
 import type { Column } from '../Types/Columns/Column.js';
 import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
 export interface QuickSearchCellProps<T extends object, in FilterValueType> {
+    /** The column this cell renders an inline quick-filter input for. */
     column: Column<T, FilterValueType>;
+    /**
+     * Optional registry of remote-filter configurations (custom select / query
+     * filters) keyed by column id. Typed as `unknown` value because each
+     * configuration narrows its own filter value internally.
+     */
     customFilters?: CustomRemoteFilters<unknown> | undefined;
 }

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

@@ -1,33 +1,58 @@
 <svelte:options runes />
 
-<script lang="ts">
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
 	import Action from '../../../Action.svelte';
 	import { Colour } from '../../../../scss/colours.js';
 	import { Size } from '../../../../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../../Types/Context/TableInitOptions.js';
 	import type { ColumnHighlightProps } from './ColumnHighlightProps.js';
 
 	const { rowIndex, highlighted, toggleHighlightedRow }: ColumnHighlightProps = $props();
 
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
 	const backgroundColour = $derived(highlighted ? Colour['$brand-primary'] : Colour['$ui-white']);
+
+	// Cell id is prefixed with the owning table name to avoid duplicate `id`
+	// attributes when multiple tables share the page (workorder P2).
+	const cellId = $derived(`${tableContext.tableName}-tagger-row-${rowIndex}`);
+	const label = $derived(
+		`${highlighted ? 'Unhighlight' : 'Highlight'} row ${(rowIndex + 1).toString()}`
+	);
 </script>
 
-<td id="tagger-row-{rowIndex}">
+<!-- Toggle semantics: `aria-pressed` is communicated through the Action's label
+which reads either "Highlight row N" or "Unhighlight row N" depending on state. -->
+<div
+	id={cellId}
+	class="highlight-content"
+>
 	<div class="wrapper">
 		<Action
 			{backgroundColour}
 			hoverBackgroundColour={Colour['$brand-dark']}
 			size={Size.FillWidth}
+			{label}
 			icon={{
-				name: 'nothing'
+				name: 'nothing',
 			}}
 			onclick={() => {
 				toggleHighlightedRow();
 			}}
 		/>
-	</div></td
->
+	</div>
+</div>
 
-<style>td {
+<style>.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell,
+.datepicker-cell {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
@@ -37,13 +62,22 @@
   position: relative;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--height);
 }
 
-td {
+.highlight-content {
   position: relative;
   padding: 0;
+  width: 100%;
+  height: 100%;
+  min-height: var(--height, 3rem);
+  box-sizing: border-box;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
 }
 
 div.wrapper {

package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte.d.ts

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

package/dist/Components/Table/Body/Rows/ColumnHighlightProps.d.ts

@@ -1,5 +1,8 @@
 export interface ColumnHighlightProps {
+    /** Visible position of the row this cell belongs to (zero-based). */
     rowIndex: number;
+    /** True when the row is currently marked as highlighted. */
     highlighted: boolean;
+    /** Caller-supplied toggle; wraps `tableContext.toggleHighlightedRow`. */
     toggleHighlightedRow: () => void;
 }

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

@@ -2,16 +2,17 @@
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, IdType extends Primitive"
 >
 	import { ColumnType } from '../../Types/Columns/ColumnType.js';
 	import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
 	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../../Types/Context/TableInitOptions.js';
 	import { getContext } from 'svelte';
 	import type { ColumnListProps } from './ColumnListProps.js';
 	import ColumnListRow from './ColumnListRow.svelte';
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
 	const { searchValue }: ColumnListProps = $props();
 
@@ -43,13 +44,15 @@
 	class="column-list"
 	ondrop={onDrop}
 >
-	<!-- key={"top-anchor"} -->
 	<!-- HACK this is used as an anchor for dragging rows to the top -->
 	<ColumnListRow columnDef={null} />
 
-	<!-- TODO try to find a key for these -->
-	{#each visibleColumns as columnDef (columnDef)}
+	{#each visibleColumns as columnDef (columnDef.id)}
 		<ColumnListRow {columnDef} />
+	{:else}
+		{#if searchValue.length > 0}
+			<li class="empty-state">No columns match &ldquo;{searchValue}&rdquo;</li>
+		{/if}
 	{/each}
 </ul>
 
@@ -65,4 +68,11 @@
   padding: 0.5rem;
   margin: 0;
   overflow: auto;
+}
+
+.empty-state {
+  padding: 0.5rem;
+  text-align: center;
+  color: #8096a5;
+  font-style: italic;
 }</style>

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

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

package/dist/Components/Table/Body/Rows/ColumnListProps.d.ts

@@ -1,3 +1,4 @@
 export interface ColumnListProps {
+    /** Lowercased substring filter applied to column id / header text. */
     searchValue: string;
 }