@lavalogic/scoria 0.0.45 → 0.0.47

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

@@ -62,7 +62,7 @@
 	);
 
 	const isSearchable = $derived(
-		hasFilterFn || hasAcceptableColumnType || (customFilters?.has(def.id) ?? false)
+		hasFilterFn || hasAcceptableColumnType || customFilters?.has(def.id) == true
 	);
 	const isNumeric = $derived(
 		def instanceof NumberInputDef ||
@@ -70,12 +70,7 @@
 			customFilter?.type === CustomFilterType.Number
 	);
 	const options = $derived(
-		isSelect
-			? ((def as SelectDef<T>)?.getOptions?.() ??
-					(def as SelectDef<T>).getSpecificOptions?.() ??
-					customFilter?.options ??
-					[])
-			: []
+		isSelect ? ((def as SelectDef<T>)?.getOptions?.() ?? customFilter?.options ?? []) : []
 	);
 	const isDate = $derived(def instanceof DateInputDef);
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
@@ -232,7 +227,7 @@
 	let showToDateModal = $state(false);
 </script>
 
-<td class="input-cell">
+<td class="input-cell {inputId}">
 	{#if isSearchable}
 		<div class="input-wrapper-parent">
 			{#if isDate}
@@ -243,6 +238,7 @@
 					<div class="spaced-around">
 						<Button
 							size={Size.FillHeight}
+							fullWidth
 							onclick={() => {
 								showFromDateModal = true;
 							}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
@@ -250,6 +246,7 @@
 
 						<Button
 							size={Size.FillHeight}
+							fullWidth
 							onclick={() => {
 								showToDateModal = true;
 							}}>To {toDate?.toLocaleDateString() ?? 'Any Date'}</Button
@@ -501,6 +498,8 @@ td.input-cell {
   padding-left: 4px;
   padding-right: 4px;
   gap: 4px;
+  width: 100%;
+  justify-content: space-around;
 }
 
 td {
@@ -577,4 +576,11 @@ div.input-wrapper-parent div.input-wrapper.right {
   min-width: 100px;
   flex-grow: 2;
   --input-padding-right: 2.6rem;
+}
+
+td {
+  --input-width: 100%;
+}
+td .input-wrapper-parent {
+  width: 100%;
 }</style>

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

@@ -68,13 +68,13 @@
 			}
 		}
 	}}
-	onkeyup={(e) => {
+	onkeyup={(e: KeyboardEvent) => {
 		if (e.key === 'Enter') {
 			e.stopPropagation();
 			tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value);
 		}
 	}}
-	onkeydown={(e) => {
+	onkeydown={(e: KeyboardEvent) => {
 		if (e.key == 'Enter' || e.key == 'F2') {
 			e.stopPropagation();
 		}
@@ -88,6 +88,7 @@
 		tableContext.endFocus(focusDetails.coordinates);
 	}}
 >
+	 
 	<label
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}

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

@@ -2,7 +2,7 @@
 
 <script lang="ts" module>
 	import { generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
-	import { getContext, untrack } from 'svelte';
+	import { getContext, onMount, untrack } from 'svelte';
 	import NestedTable from '../../NestedTable.svelte';
 	import type { Row } from '../../Types/Context/Row.js';
 	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
@@ -16,6 +16,8 @@
 		row: Row<T>;
 		side: 'left' | 'right' | 'centre';
 		odd: boolean;
+		customHeight: number | undefined;
+		includeHighlight: boolean;
 		// oncontextmenu?: (e: MouseEvent) => void
 	}
 </script>
@@ -23,7 +25,7 @@
 <script lang="ts" generics="T extends object">
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
-	const { row, side, odd = false }: TableRowProps<T> = $props();
+	const { row, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
 
 	const hoverable = $derived(tableContext.changeColourOnHover);
 
@@ -61,19 +63,7 @@
 			tableContext.highlightedItems.has(tableContext.selectionExtractor(row.original))
 	);
 
-	const isAppropriateTableSide = $derived.by(() => {
-		if (side === 'left') {
-			return (tableContext.columnPinning.left?.size ?? 0) > 0;
-		} else if (side === 'centre') {
-			return (
-				(tableContext.columnPinning.left?.size ?? 0) == 0 &&
-				(tableContext.columnPinning.right?.size ?? 0) != tableContext.columnDefs.length
-			);
-		} else {
-			return (tableContext.columnPinning.right?.size ?? 0) == tableContext.columnDefs.length;
-		}
-	});
-	const showHighlightButton = $derived(rowIndex != null && isAppropriateTableSide);
+	const showHighlightButton = $derived(rowIndex != null && includeHighlight);
 
 	const colspan = $derived(cells.length + (showHighlightButton ? 1 : 0));
 
@@ -111,11 +101,59 @@
 			expandedColumnDef = columnDef;
 		}
 	}
+
+	let trRef: HTMLTableRowElement | undefined = $state();
+	let _trHeight = $state(0);
+	export const trHeight = {
+		get value() {
+			return _trHeight;
+		}
+	};
+	$effect(() => {
+		if (trRef) {
+			const observer = new ResizeObserver((entries) => {
+				if (customHeight) {
+					_trHeight = 0;
+				} else {
+					_trHeight = entries[0].borderBoxSize[0].blockSize;
+				}
+			});
+			observer.observe(trRef);
+
+			const currentTrRef = trRef;
+			return () => observer.unobserve(currentTrRef);
+		}
+	});
+
+	let innerTrRef: HTMLTableRowElement | undefined = $state();
+	// let _innerTrHeight = $state(0);
+	// export const innerTrHeight = {
+	// 	get value() {
+	// 		return _innerTrHeight;
+	// 	}
+	// };
+	// $effect(() => {
+	// 	if (innerTrRef) {
+	// 		const observer = new ResizeObserver((entries) => {
+	// 			_innerTrHeight = entries[0].borderBoxSize[0].blockSize;
+	// 		});
+	// 		observer.observe(innerTrRef);
+
+	// 		const currentinnerTrRef = innerTrRef;
+	// 		return () => observer.unobserve(currentTrRef);
+	// 	}
+	// });
 </script>
 
 <!-- onMouseEnter={onMouseEnter}
 onMouseLeave={onMouseLeave} -->
-<tr class:hoverable class:alt={tableContext.alternateRowColours && odd} class:highlighted>
+<tr
+	class:hoverable
+	class:alt={tableContext.alternateRowColours && odd}
+	class:highlighted
+	style={customHeight ? `height: ${customHeight}px !important;` : null}
+	bind:this={trRef}
+>
 	{#if showHighlightButton}
 		<ColumnHighlight
 			{rowIndex}
@@ -132,7 +170,7 @@ onMouseLeave={onMouseLeave} -->
 
 {#if expandedColumnDef}
 	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
-	<tr class="inner-table">
+	<tr class="inner-table" bind:this={innerTrRef}>
 		{#await innerDataPromise}
 			<td {colspan}>loading&hellip;</td>
 		{:then data}

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

@@ -3,10 +3,16 @@ export interface TableRowProps<T extends object> {
     row: Row<T>;
     side: 'left' | 'right' | 'centre';
     odd: boolean;
+    customHeight: number | undefined;
+    includeHighlight: boolean;
 }
 declare function $$render<T extends object>(): {
     props: TableRowProps<T>;
-    exports: {};
+    exports: {
+        trHeight: {
+            readonly value: number;
+        };
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -16,7 +22,11 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        trHeight: {
+            readonly value: number;
+        };
+    };
 }
 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']>> & {

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

@@ -1,8 +1,16 @@
 <svelte:options runes />
 
 <script lang="ts" module>
-	export interface TableBodyProps {
+	export interface HeightData<T extends object> {
+		index: number;
+		applyTo: Array<TableBodyProps<T>['side']>;
+		maxHeight: number;
+	}
+	export interface TableBodyProps<T extends object> {
 		side: 'left' | 'centre' | 'right';
+		heights: Array<HeightData<T>>;
+		columns: Array<Column<T>>;
+		includeHighlight: boolean;
 	}
 </script>
 
@@ -10,40 +18,45 @@
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import QuickSearchCell from './QuickSearchCell.svelte';
-	import type { Column } from '../Types/Columns/Column.js';
 	import TableRow from './Rows/TableRow.svelte';
+	import type { Column } from '../Types/Columns/Column.js';
 
-	let { side }: TableBodyProps = $props();
+	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
 
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
-	let quickFilterColumns: Column<T>[] = $state([]);
-
-	$effect(() => {
-		if (tableContext.showQuickFiltering && tableContext.table) {
-			const columns =
-				side === 'left'
-					? tableContext.table.getLeftVisibleLeafColumns()
-					: side === 'right'
-						? tableContext.table.getRightVisibleLeafColumns()
-						: tableContext.table.getCenterVisibleLeafColumns();
-
-			quickFilterColumns = columns;
+	const rows: Array<TableRow<T>> = $state([]);
+	const _rowHeights = $derived(rows.map((it) => it?.trHeight.value ?? 0));
+	export const rowHeights = {
+		get value() {
+			return _rowHeights;
 		}
-	});
+	};
 </script>
 
 <tbody>
-	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && quickFilterColumns.length}
+	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && columns.length}
 		<tr class="sticky">
-			<td><!-- accomodating for row marking --></td>
-			{#each quickFilterColumns as column (column)}
+			{#if includeHighlight}
+				<td class="highlight-dud"><!-- accomodating for row marking --></td>
+			{/if}
+			{#each columns as column (column)}
 				<QuickSearchCell {column} customFilters={tableContext.remoteFilters} />
 			{/each}
 		</tr>
 	{/if}
 	{#each tableContext.paginationRowModel.rows ?? [] as row, index (row)}
-		<TableRow {row} {side} odd={index % 2 == 1} />
+		{@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}
 </tbody>
 

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

@@ -1,9 +1,22 @@
-export interface TableBodyProps {
+export interface HeightData<T extends object> {
+    index: number;
+    applyTo: Array<TableBodyProps<T>['side']>;
+    maxHeight: number;
+}
+export interface TableBodyProps<T extends object> {
     side: 'left' | 'centre' | 'right';
+    heights: Array<HeightData<T>>;
+    columns: Array<Column<T>>;
+    includeHighlight: boolean;
 }
+import type { Column } from '../Types/Columns/Column.js';
 declare function $$render<T extends object>(): {
-    props: TableBodyProps;
-    exports: {};
+    props: TableBodyProps<T>;
+    exports: {
+        rowHeights: {
+            readonly value: number[];
+        };
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -13,7 +26,11 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        rowHeights: {
+            readonly value: number[];
+        };
+    };
 }
 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']>> & {

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

@@ -119,12 +119,7 @@
 	);
 
 	const options = $derived(
-		isSelect
-			? ((def as SelectDef<T>)?.getOptions?.() ??
-					(def as SelectDef<T>).getSpecificOptions?.() ??
-					customFilter?.options ??
-					[])
-			: []
+		isSelect ? ((def as SelectDef<T>)?.getOptions?.() ?? customFilter?.options ?? []) : []
 	);
 
 	let optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>> = $state(

package/dist/Components/Table/Table.svelte

@@ -15,7 +15,7 @@
 	import TableSidebar from './Misc/TableSidebar.svelte';
 	import TableFooter from './Misc/TableFooter.svelte';
 	import TableHead from './Headers/TableHead.svelte';
-	import TableBody from './Body/TableBody.svelte';
+	import TableBody, { type HeightData } from './Body/TableBody.svelte';
 	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
 
 	declare global {
@@ -264,6 +264,57 @@
 	const leftTotalSize = $derived(tableContext.table.getLeftTotalSize());
 	const centreTotalSize = $derived(tableContext.table.getCenterTotalSize());
 	const rightTotalSize = $derived(tableContext.table.getRightTotalSize());
+
+	const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
+	const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
+	const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
+
+	const appropriateSide = $derived.by(() => {
+		if (leftColumns.length > 0) {
+			return 'left';
+		} else if ((rightColumns.length ?? 0) != 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();
+
+	const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
+		if (!leftTable || !centreTable || !rightTable) {
+			return [];
+		}
+		const centre = centreTable.rowHeights.value;
+		const right = rightTable.rowHeights.value;
+
+		return leftTable?.rowHeights.value.map((_leftHeight, index) => {
+			const leftHeight = _leftHeight || 0;
+			const centreHeight = centre[index] || 0;
+			const rightHeight = right[index] || 0;
+
+			const maxHeight = Math.max(leftHeight, centreHeight, rightHeight);
+			const applyTo: HeightData<T>['applyTo'] = [];
+
+			if (leftHeight < maxHeight) {
+				applyTo.push('left');
+			}
+			if (centreHeight < maxHeight) {
+				applyTo.push('centre');
+			}
+			if (rightHeight < maxHeight) {
+				applyTo.push('right');
+			}
+
+			return {
+				index,
+				applyTo,
+				maxHeight
+			};
+		});
+	});
 </script>
 
 <svelte:window
@@ -349,7 +400,13 @@
 				<!-- {#if leftTotalSize > 0} -->
 				<table class="datatable__table left" style="min-width: {leftTotalSize}px">
 					<TableHead showHighlight={leftTotalSize > 0} side="left" />
-					<TableBody side="left" />
+					<TableBody
+						includeHighlight={appropriateSide == 'left'}
+						columns={leftColumns}
+						heights={totalRowSizes}
+						side="left"
+						bind:this={leftTable}
+					/>
 				</table>
 				<!-- {/if} -->
 
@@ -357,14 +414,26 @@
 
 				<table class="datatable__table centre" style="min-width: {centreTotalSize}px">
 					<TableHead showHighlight={leftTotalSize == 0} side="centre" />
-					<TableBody side="centre" />
+					<TableBody
+						includeHighlight={appropriateSide == 'centre'}
+						columns={centreColumns}
+						heights={totalRowSizes}
+						side="centre"
+						bind:this={centreTable}
+					/>
 				</table>
 				<!-- {/if} -->
 
 				<!-- {#if rightTotalSize > 0} -->
 				<table class="datatable__table right" style="min-width: {rightTotalSize}px">
 					<TableHead showHighlight={false} side="right" />
-					<TableBody side="right" />
+					<TableBody
+						includeHighlight={appropriateSide == 'right'}
+						columns={rightColumns}
+						heights={totalRowSizes}
+						side="right"
+						bind:this={rightTable}
+					/>
 				</table>
 				<!-- {/if} -->
 			</div>
@@ -449,6 +518,10 @@ div.resizer.isResizing {
   opacity: 1;
 }
 
+.left {
+  border-right: solid 2px #3a4952;
+}
+
 .right {
   border-left: solid 2px #3a4952;
 }

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> extends ColumnDefProps<T> {
+export interface AccessorDefProps<T extends object, FilterFnType> extends ColumnDefProps<T, FilterFnType> {
     readonly id: string & keyof T;
 }
-export declare abstract class AccessorDef<T extends object, filterValueType = unknown> extends ColumnDef<T, filterValueType> {
+export declare abstract class AccessorDef<T extends object, FilterFnType> 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,12 @@
-import type { BoolFilterValueType } from '../../../Filtering/FilterFn.js';
+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> {
+export interface CheckboxDefProps<T extends object> extends AccessorDefProps<T, BoolFilterValueType> {
 }
 export declare class CheckboxDef<T extends object> extends AccessorDef<T, BoolFilterValueType> {
     readonly accessorType: "Checkbox";
     constructor(props: CheckboxDefProps<T>);
+    private _filterFn;
+    get filterFn(): CustomFilterFn | FilterFn<T, BoolFilterValueType> | undefined;
+    set filterFn(v: CustomFilterFn | FilterFn<T, BoolFilterValueType> | undefined);
 }

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

@@ -4,5 +4,13 @@ export class CheckboxDef extends AccessorDef {
     accessorType = AccessorType.Checkbox;
     constructor(props) {
         super(props);
+        this._filterFn = $state(props.filterFn);
+    }
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
     }
 }

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

@@ -1,10 +1,14 @@
-import type { DateFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { DateFilterValueType, FilterFn } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
-export interface DateInputDefProps<T extends object> extends AccessorDefProps<T> {
+export interface DateInputDefProps<T extends object> extends AccessorDefProps<T, DateFilterValueType> {
     showTime?: boolean;
 }
 export declare class DateInputDef<T extends object> extends AccessorDef<T, DateFilterValueType> {
     readonly accessorType: "Date";
     constructor(props: DateInputDefProps<T>);
+    private _filterFn;
+    get filterFn(): FilterFn<T, DateFilterValueType> | CustomFilterFn | undefined;
+    set filterFn(v: FilterFn<T, DateFilterValueType> | CustomFilterFn | undefined);
     readonly showTime: boolean;
 }

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

@@ -5,6 +5,14 @@ export class DateInputDef extends AccessorDef {
     constructor(props) {
         super(props);
         this.showTime = $derived(props.showTime ?? false);
+        this._filterFn = $state(props.filterFn);
+    }
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
     }
     showTime;
 }

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

@@ -1,7 +1,8 @@
 import { AccessorDef } from './AccessorDef.svelte.js';
 import { type ColumnDefProps } from '../ColumnDef.svelte.js';
-import type { NumberFilterValueType } from '../../../Filtering/FilterFn.js';
-export interface NumberInputDefProps<T extends object> extends ColumnDefProps<T> {
+import type { FilterFn, NumberFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+export interface NumberInputDefProps<T extends object> extends ColumnDefProps<T, NumberFilterValueType> {
     min: number;
     max: number;
 }
@@ -10,4 +11,7 @@ export declare class NumberInputDef<T extends object> extends AccessorDef<T, Num
     constructor(props: NumberInputDefProps<T>);
     readonly min: number;
     readonly max: number;
+    private _filterFn;
+    get filterFn(): CustomFilterFn | FilterFn<T, NumberFilterValueType> | undefined;
+    set filterFn(v: CustomFilterFn | FilterFn<T, NumberFilterValueType> | undefined);
 }

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

@@ -7,7 +7,15 @@ export class NumberInputDef extends AccessorDef {
         super(props);
         this.min = $derived(props.min);
         this.max = $derived(props.max);
+        this._filterFn = $state(props.filterFn);
     }
     min;
     max;
+    _filterFn;
+    get filterFn() {
+        return this._filterFn;
+    }
+    set filterFn(v) {
+        this._filterFn = v;
+    }
 }

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

@@ -1,16 +1,18 @@
 import type { SelectOption } from '../../../../../../Types/Internal/SelectOption.js';
-import type { StringFilterValueType } from '../../../Filtering/FilterFn.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { FilterFn, SelectFilterValueType } from '../../../Filtering/FilterFn.js';
 import type { ColumnDefProps } from '../ColumnDef.svelte.js';
 import { AccessorDef } from './AccessorDef.svelte.js';
-export interface QueryDefProps<T extends object> extends ColumnDefProps<T> {
+export interface QueryDefProps<T extends object> extends ColumnDefProps<T, SelectFilterValueType<T>> {
     valueAsObject: boolean;
     query: (queryString: string, item: T, index: number) => Promise<Array<SelectOption<unknown>>>;
     getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     clearable?: boolean;
 }
-export declare class QueryDef<T extends object> extends AccessorDef<T, StringFilterValueType> {
+export declare class QueryDef<T extends object> extends AccessorDef<T, SelectFilterValueType<T>> {
     readonly accessorType: "Query";
     constructor(props: QueryDefProps<T>);
+    readonly filterFn: CustomFilterFn | FilterFn<T, SelectFilterValueType<T>> | undefined;
     readonly valueAsObject: boolean;
     readonly getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     readonly query: (queryString: string, item: T, index: number) => Promise<Array<SelectOption<unknown>>>;

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

@@ -9,6 +9,7 @@ export class QueryDef extends AccessorDef {
         this.getDisplayValue = $derived(props.getDisplayValue);
         this.clearable = $derived(props.clearable ?? true);
     }
+    filterFn;
     valueAsObject;
     getDisplayValue;
     query;

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

@@ -1,7 +1,9 @@
 import type { SelectOption } from '../../../../../../Types/Internal/SelectOption.js';
+import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
+import type { FilterFn, SelectFilterValueType } from '../../../Filtering/FilterFn.js';
 import type { ColumnDefProps } from '../ColumnDef.svelte.js';
 import { AccessorDef } from './AccessorDef.svelte.js';
-export interface SelectDefProps<T extends object> extends ColumnDefProps<T> {
+export interface SelectDefProps<T extends object> extends ColumnDefProps<T, SelectFilterValueType<T>> {
     getOptions: () => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
     getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     sortingFn?: (a: T, b: T) => 1 | -1 | 0;
@@ -9,9 +11,12 @@ export interface SelectDefProps<T extends object> extends ColumnDefProps<T> {
     optional?: boolean;
     clearable?: boolean;
 }
-export declare class SelectDef<T extends object> extends AccessorDef<T, T> {
+export declare class SelectDef<T extends object> extends AccessorDef<T, SelectFilterValueType<T>> {
     constructor(props: SelectDefProps<T>);
     readonly accessorType: "Select";
+    private _filterFn;
+    get filterFn(): FilterFn<T, SelectFilterValueType<T>> | CustomFilterFn | undefined;
+    set filterFn(v: FilterFn<T, SelectFilterValueType<T>> | CustomFilterFn | undefined);
     readonly sortingFn?: (a: T, b: T) => 1 | -1 | 0;
     readonly getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     readonly optional: boolean;