compote-ui 0.79.2 → 0.81.0

package/dist/components/data-table-v9/column-filter-editing.svelte.d.ts

@@ -0,0 +1,41 @@
+/** The slice of a TanStack column the filter editors read and write. */
+export type FilterableColumn = {
+    id: string;
+    getFilterValue(): unknown;
+    setFilterValue(value: unknown): void;
+};
+export type ColumnFilterEditingOptions = {
+    /** The table the edited columns belong to; read on every access so it may change. */
+    table: () => object;
+    /**
+     * Whether `columnId` still has an editor. An editor torn down by an outside change can
+     * still emit — Ark's NumberInput commits the typed number on the blur its unmount
+     * triggers — and that must not write back a filter the app just cleared.
+     */
+    isActive?: (columnId: string) => boolean;
+};
+/** Drops every pending filter edit on `table` without committing, whichever host made it. */
+export declare function cancelPendingFilterEdits(table: object): void;
+/**
+ * One host's access to a table's pending filter edits (see PendingFilterEdits). The edits
+ * live with the table, not with the host or its editors, so an edit still commits after its
+ * editor unmounts with a closing popover.
+ *
+ * A control shows its pending edit if there is one, otherwise the column's live filter
+ * value — so a filter changed from outside (the app calling setFilterValue /
+ * setColumnFilters / resetColumnFilters) never leaves a stale value in the inputs, an edit
+ * pending during that change is dropped rather than re-applied, and committing one range
+ * bound never restores the other's old value.
+ */
+export declare class ColumnFilterEditing {
+    #private;
+    constructor(options: ColumnFilterEditingOptions);
+    textValue(column: FilterableColumn): string;
+    editText(column: FilterableColumn, value: string): void;
+    rangeBound(column: FilterableColumn, which: 'min' | 'max'): number | null;
+    editRange(column: FilterableColumn, which: 'min' | 'max', value: number | null): void;
+    /** Drops the pending edits for one column without committing them. */
+    cancel(columnId: string): void;
+    /** Drops every pending edit on the table without committing — including other hosts'. */
+    cancelAll(): void;
+}

package/dist/components/data-table-v9/column-filter-editing.svelte.js

@@ -0,0 +1,88 @@
+import { DebouncedFilterEdits } from '../../utils/debounced-filter-edit.svelte';
+import { mergeRangeFilter, rangeBounds } from '../../utils/range-filter';
+import { getFilterRevisions } from './filter-revisions.svelte';
+/**
+ * The debounced edits pending on one table's filters. Shared by every component that edits
+ * them (the toolbar filter, each header filter), so the latest edit to a column wins no
+ * matter where it was made, and cancelling reaches edits made from any of them.
+ */
+class PendingFilterEdits {
+    text = new DebouncedFilterEdits();
+    range = new DebouncedFilterEdits();
+}
+const registry = new WeakMap();
+function pendingEdits(table) {
+    let edits = registry.get(table);
+    if (!edits) {
+        edits = new PendingFilterEdits();
+        registry.set(table, edits);
+    }
+    return edits;
+}
+/** Drops every pending filter edit on `table` without committing, whichever host made it. */
+export function cancelPendingFilterEdits(table) {
+    const edits = registry.get(table);
+    edits?.text.cancelAll();
+    edits?.range.cancelAll();
+}
+/**
+ * One host's access to a table's pending filter edits (see PendingFilterEdits). The edits
+ * live with the table, not with the host or its editors, so an edit still commits after its
+ * editor unmounts with a closing popover.
+ *
+ * A control shows its pending edit if there is one, otherwise the column's live filter
+ * value — so a filter changed from outside (the app calling setFilterValue /
+ * setColumnFilters / resetColumnFilters) never leaves a stale value in the inputs, an edit
+ * pending during that change is dropped rather than re-applied, and committing one range
+ * bound never restores the other's old value.
+ */
+export class ColumnFilterEditing {
+    #table;
+    #isActive;
+    constructor(options) {
+        this.#table = options.table;
+        this.#isActive = options.isActive ?? (() => true);
+    }
+    get #edits() {
+        return pendingEdits(this.#table());
+    }
+    /**
+     * What an edit is based on: the column's filter revision, which only ever goes up, so a
+     * filter cleared and set back to its old value still makes the edit stale. Tables not
+     * made by compote's createTable have no revisions; fall back to the filter value.
+     */
+    #base(column) {
+        const revisions = getFilterRevisions(this.#table());
+        return revisions ? revisions.get(column.id) : column.getFilterValue();
+    }
+    textValue(column) {
+        const value = column.getFilterValue();
+        return (this.#edits.text.get(column.id, this.#base(column)) ??
+            (typeof value === 'string' ? value : ''));
+    }
+    editText(column, value) {
+        if (!this.#isActive(column.id))
+            return;
+        this.#edits.text.edit(column.id, this.#base(column), () => value, () => this.#base(column), (text) => column.setFilterValue(text || undefined));
+    }
+    rangeBound(column, which) {
+        const pending = this.#edits.range.get(column.id, this.#base(column));
+        if (pending && which in pending)
+            return pending[which] ?? null;
+        return rangeBounds(column.getFilterValue())[which === 'min' ? 0 : 1] ?? null;
+    }
+    editRange(column, which, value) {
+        if (!this.#isActive(column.id))
+            return;
+        this.#edits.range.edit(column.id, this.#base(column), (pending) => ({ ...pending, [which]: value }), () => this.#base(column), (pending) => column.setFilterValue(mergeRangeFilter(column.getFilterValue(), pending)));
+    }
+    /** Drops the pending edits for one column without committing them. */
+    cancel(columnId) {
+        this.#edits.text.cancel(columnId);
+        this.#edits.range.cancel(columnId);
+    }
+    /** Drops every pending edit on the table without committing — including other hosts'. */
+    cancelAll() {
+        cancelPendingFilterEdits(this.#table());
+    }
+}

package/dist/components/data-table-v9/column-filter-kind.d.ts

@@ -0,0 +1,19 @@
+import type { DataTableColumnMeta, DataTableColumnType } from './types';
+/** Which filter editor (and default filterFn) a column type uses. */
+export type ColumnFilterKind = 'text' | 'range' | 'boolean' | 'select' | 'date';
+/**
+ * The filter kind for a column type. The single mapping both the filter editors and the
+ * default filterFn follow, so a column never shows an editor its filterFn can't evaluate.
+ * `action` columns carry no value and get no filter. `time` stays a text filter until it has
+ * its own contract (a time-of-day range has to decide how to cross midnight).
+ */
+export declare function filterKindFor(type: DataTableColumnType | undefined): ColumnFilterKind | null;
+/**
+ * The filter kind of a table column (from its `type`): the editor `ColumnFilterEditor` shows
+ * for it and the filter value shape its default filterFn expects.
+ */
+export declare function getColumnFilterKind(column: {
+    columnDef: {
+        meta?: DataTableColumnMeta;
+    };
+}): ColumnFilterKind | null;

package/dist/components/data-table-v9/column-filter-kind.js

@@ -0,0 +1,32 @@
+/**
+ * The filter kind for a column type. The single mapping both the filter editors and the
+ * default filterFn follow, so a column never shows an editor its filterFn can't evaluate.
+ * `action` columns carry no value and get no filter. `time` stays a text filter until it has
+ * its own contract (a time-of-day range has to decide how to cross midnight).
+ */
+export function filterKindFor(type) {
+    switch (type) {
+        case 'number':
+        case 'currency':
+        case 'percent':
+            return 'range';
+        case 'boolean':
+            return 'boolean';
+        case 'select':
+            return 'select';
+        case 'date':
+        case 'date-time':
+            return 'date';
+        case 'action':
+            return null;
+        default:
+            return 'text';
+    }
+}
+/**
+ * The filter kind of a table column (from its `type`): the editor `ColumnFilterEditor` shows
+ * for it and the filter value shape its default filterFn expects.
+ */
+export function getColumnFilterKind(column) {
+    return filterKindFor(column.columnDef.meta?.type);
+}

package/dist/components/data-table-v9/create-table.svelte.js

@@ -4,6 +4,10 @@ import { onDestroy } from 'svelte';
 import { renderComponent, renderSnippet } from '@tanstack/svelte-table';
 import { dataTableFeatures } from './features';
 import { TYPE_NUMBER_FORMAT_DEFAULTS } from './data-table-utils';
+import { filterKindFor } from './column-filter-kind';
+import { dateCellTimeZone, formatDateCell } from './date-cell';
+import { isEmptyDateRange, matchesDateRange, resolveDateRange } from '../../utils/date-filter';
+import { cancelPendingFilterEdits } from './column-filter-editing.svelte';
 import { changedFilterIds, FilterRevisions, registerFilterRevisions } from './filter-revisions.svelte';
 import { formatSelectValue, matchesSelectFilter, selectCellValues } from '../../utils/select-filter';
 const oneOfFilterFn = (row, columnId, filterValue) => {
@@ -90,6 +94,22 @@ export function createTable(options) {
         onDestroy(() => subscription.unsubscribe());
     }
     registerFilterRevisions(table, filterRevisions);
+    // Debounced filter edits outlive the editors that made them, but not the table.
+    onDestroy(() => cancelPendingFilterEdits(table));
+    // A reset drops pending filter edits too — including one on a column with no committed
+    // filter, whose revision the reset leaves alone, so the edit would otherwise commit
+    // afterwards and bring a filter back. TanStack assigns these as own methods of the table
+    // (`table.reset` also writes state directly, bypassing onColumnFiltersChange).
+    const resetColumnFilters = table.resetColumnFilters;
+    table.resetColumnFilters = (defaultState) => {
+        cancelPendingFilterEdits(table);
+        resetColumnFilters(defaultState);
+    };
+    const resetTable = table.reset;
+    table.reset = () => {
+        cancelPendingFilterEdits(table);
+        resetTable();
+    };
     return table;
 }
 function createColumnVisibility(columns) {
@@ -128,7 +148,7 @@ function createColumns(columns, localeCtx) {
             };
         }
         const columnId = getColumnId(column);
-        const derivedFilterFn = column.filterFn ?? getFilterFnForType(column.type);
+        const derivedFilterFn = column.filterFn ?? getFilterFnForType(column);
         const columnDef = {
             id: columnId,
             header: column.header,
@@ -191,27 +211,26 @@ export function getColumnId(column) {
         return column.accessorKey;
     throw new Error('DataTableColumn with accessorFn requires an id.');
 }
-const TYPE_DATE_FORMAT_DEFAULTS = {
-    date: { day: '2-digit', month: '2-digit', year: 'numeric' },
-    time: { hour: '2-digit', minute: '2-digit' },
-    'date-time': {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
-    }
-};
-function getFilterFnForType(type) {
-    switch (type) {
-        case 'number':
-        case 'currency':
-        case 'percent':
+/**
+ * A calendar-day range filter for a date column, judged in the zone the column is shown in
+ * (read on every pass, so it follows a changed local zone like the cells do).
+ */
+function dateRangeFilterFn(formatOptions) {
+    const filterFn = (row, columnId, range) => matchesDateRange(row.getValue(columnId), range, dateCellTimeZone(formatOptions));
+    filterFn.resolveFilterValue = resolveDateRange;
+    filterFn.autoRemove = isEmptyDateRange;
+    return filterFn;
+}
+function getFilterFnForType(column) {
+    switch (filterKindFor(column.type)) {
+        case 'range':
             return 'inNumberRange';
         case 'boolean':
             return 'equals';
         case 'select':
             return oneOfFilterFn;
+        case 'date':
+            return dateRangeFilterFn(column.formatOptions);
         default:
             return undefined;
     }
@@ -231,14 +250,7 @@ function applyTypeFormat(column, value, localeCtx) {
         }).format(numericValue);
     }
     if (column.type === 'date' || column.type === 'time' || column.type === 'date-time') {
-        const dateValue = value instanceof Date ? value : new Date(value);
-        if (isNaN(dateValue.getTime()))
-            return undefined;
-        const locale = column.formatLocale ?? localeCtx().locale;
-        return new Intl.DateTimeFormat(locale, {
-            ...TYPE_DATE_FORMAT_DEFAULTS[column.type],
-            ...column.formatOptions
-        }).format(dateValue);
+        return formatDateCell(value, column.type, column.formatLocale ?? localeCtx().locale, column.formatOptions);
     }
     if (column.type === 'boolean')
         return value ? 'Yes' : 'No';

package/dist/components/data-table-v9/data-table-head.svelte

@@ -6,6 +6,8 @@
 	import type { DataTableInstance } from './data-table-utils';
 	import type { DataTableViewState } from './table-view-state.svelte';
 	import type { DataTableFeatures } from './features';
+	import type { DataTableAlign } from './types';
+	import ColumnHeaderFilter from './header/column-header-filter.svelte';
 	import {
 		alignClass,
 		getColumnMeta,
@@ -29,9 +31,17 @@
 		view: DataTableViewState<T>;
 		isVirtual?: boolean;
 		hasGrowColumn?: boolean;
+		/** Show a filter funnel in the header of every filterable column. */
+		headerFilters?: boolean;
 	};
 
-	let { table, view, isVirtual = false, hasGrowColumn = false }: Props = $props();
+	let {
+		table,
+		view,
+		isVirtual = false,
+		hasGrowColumn = false,
+		headerFilters = false
+	}: Props = $props();
 
 	type Header = HeaderGroup<DataTableFeatures, T>['headers'][number];
 
@@ -46,6 +56,21 @@
 		return undefined;
 	}
 
+	function showHeaderFilter(header: Header) {
+		return headerFilters && header.subHeaders.length === 0 && header.column.getCanFilter();
+	}
+
+	/**
+	 * Padding that keeps an active (always visible) filter funnel off the label, so it never
+	 * hides the sort indicator. The funnel sits on the inner edge opposite the label.
+	 */
+	function headerFilterPaddingClass(header: Header, align: DataTableAlign | undefined) {
+		if (!showHeaderFilter(header)) return undefined;
+		const filtered = view.columnFilters.some((filter) => filter.id === header.column.id);
+		if (!filtered) return undefined;
+		return align === 'right' ? 'pl-6' : 'pr-6';
+	}
+
 	function headerSortDirection(header: Header) {
 		void view.sorting;
 		return header.column.getIsSorted();
@@ -141,10 +166,11 @@
 				<th
 					scope="col"
 					class={cn(
-						'relative h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 align-middle leading-5 font-medium',
+						'group/th relative h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 align-middle leading-5 font-medium',
 						isVirtual && 'items-center',
 						isVirtual && justifyClass(meta?.align),
-						alignClass(meta?.align)
+						alignClass(meta?.align),
+						headerFilterPaddingClass(header, meta?.align)
 					)}
 					colspan={header.colSpan}
 					aria-sort={header.column.getCanSort() ? getHeaderAriaSort(sortDirection) : undefined}
@@ -179,6 +205,9 @@
 							<FlexRender {header} />
 						{/if}
 					{/if}
+					{#if !header.isPlaceholder && showHeaderFilter(header)}
+						<ColumnHeaderFilter {table} column={header.column} />
+					{/if}
 					<!-- A group split by pinning renders as adjacent fragments; skip the
 					     divider between them so the group reads as one continuous header. -->
 					{#if header.column.getCanResize() && !continuesInNextFragment}

package/dist/components/data-table-v9/data-table-head.svelte.d.ts

@@ -7,6 +7,8 @@ declare function $$render<T extends RowData>(): {
         view: DataTableViewState<T>;
         isVirtual?: boolean;
         hasGrowColumn?: boolean;
+        /** Show a filter funnel in the header of every filterable column. */
+        headerFilters?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/components/data-table-v9/data-table-utils.d.ts

@@ -81,6 +81,13 @@ export declare function getUrlCellValue(value: unknown): string | undefined;
 export declare function openUrlCell(value: string): void;
 export declare function getPhoneCellValue(value: unknown): string | undefined;
 export declare function openPhoneCell(value: string): void;
+/** A column's display name: its string header, or its id when the header is rendered. */
+export declare function getColumnLabel(column: {
+    id: string;
+    columnDef: {
+        header?: unknown;
+    };
+}): string;
 export declare function getColumnMeta(columnDef: {
     meta?: DataTableColumnMeta;
 }): DataTableColumnMeta | undefined;

package/dist/components/data-table-v9/data-table-utils.js

@@ -154,6 +154,10 @@ export function getPhoneCellValue(value) {
 export function openPhoneCell(value) {
     window.location.href = `tel:${value}`;
 }
+/** A column's display name: its string header, or its id when the header is rendered. */
+export function getColumnLabel(column) {
+    return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+}
 // `columnDef.meta` is natively typed as DataTableColumnMeta via the `columnMeta`
 // type-only slot in features.ts; this accessor just narrows the columnDef shape.
 export function getColumnMeta(columnDef) {

package/dist/components/data-table-v9/data-table.svelte

@@ -22,6 +22,8 @@
 		caption?: string;
 		emptyMessage?: string;
 		class?: ClassValue;
+		/** Show a filter funnel in the header of every filterable column. */
+		headerFilters?: boolean;
 		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
 		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
 	};
@@ -31,6 +33,7 @@
 		caption,
 		emptyMessage = 'No rows found',
 		class: className,
+		headerFilters = false,
 		onRowClick,
 		onRowDoubleClick,
 		...rest
@@ -77,7 +80,7 @@
 			{#if caption}
 				<caption class="sr-only">{caption}</caption>
 			{/if}
-			<DataTableHead {table} {view} hasGrowColumn={view.hasGrowColumn} />
+			<DataTableHead {table} {view} hasGrowColumn={view.hasGrowColumn} {headerFilters} />
 			<tbody>
 				{#each view.rowModel.rows as row (row.id)}
 					{@const rowSelected = view.rowSelection[row.id] === true}

package/dist/components/data-table-v9/data-table.svelte.d.ts

@@ -8,6 +8,8 @@ declare function $$render<T extends RowData>(): {
         caption?: string;
         emptyMessage?: string;
         class?: ClassValue;
+        /** Show a filter funnel in the header of every filterable column. */
+        headerFilters?: boolean;
         onRowClick?: (details: {
             row: T;
             event: MouseEvent;

package/dist/components/data-table-v9/date-cell.d.ts

@@ -0,0 +1,13 @@
+export type DateCellType = 'date' | 'time' | 'date-time';
+export declare const TYPE_DATE_FORMAT_DEFAULTS: Record<DateCellType, Intl.DateTimeFormatOptions>;
+/**
+ * The zone a date column is shown — and therefore filtered — in: `formatOptions.timeZone`
+ * when the column sets one, otherwise the viewer's local zone.
+ */
+export declare function dateCellTimeZone(formatOptions: Intl.DateTimeFormatOptions | undefined): string;
+/**
+ * A date cell value formatted for display, or undefined when it can't be read. Reads the
+ * value with `readDateInZone`, exactly as the date range filter does, so a cell always shows
+ * the day it is filtered by.
+ */
+export declare function formatDateCell(value: unknown, type: DateCellType, locale: string, formatOptions?: Intl.DateTimeFormatOptions): string | undefined;

package/dist/components/data-table-v9/date-cell.js

@@ -0,0 +1,38 @@
+import { CalendarDate, getLocalTimeZone } from '@internationalized/date';
+import { readDateInZone } from '../../utils/date';
+export const TYPE_DATE_FORMAT_DEFAULTS = {
+    date: { day: '2-digit', month: '2-digit', year: 'numeric' },
+    time: { hour: '2-digit', minute: '2-digit' },
+    'date-time': {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    }
+};
+/**
+ * The zone a date column is shown — and therefore filtered — in: `formatOptions.timeZone`
+ * when the column sets one, otherwise the viewer's local zone.
+ */
+export function dateCellTimeZone(formatOptions) {
+    return formatOptions?.timeZone ?? getLocalTimeZone();
+}
+/**
+ * A date cell value formatted for display, or undefined when it can't be read. Reads the
+ * value with `readDateInZone`, exactly as the date range filter does, so a cell always shows
+ * the day it is filtered by.
+ */
+export function formatDateCell(value, type, locale, formatOptions) {
+    const timeZone = dateCellTimeZone(formatOptions);
+    const date = readDateInZone(value, timeZone);
+    if (!date)
+        return undefined;
+    const options = { ...TYPE_DATE_FORMAT_DEFAULTS[type], ...formatOptions };
+    // A calendar date has no instant: format its own year-month-day as UTC midnight in UTC,
+    // so no display zone can move it to another day.
+    if (date instanceof CalendarDate) {
+        return new Intl.DateTimeFormat(locale, { ...options, timeZone: 'UTC' }).format(date.toDate('UTC'));
+    }
+    return new Intl.DateTimeFormat(locale, { ...options, timeZone }).format(date.toDate());
+}

package/dist/components/data-table-v9/filter-editors/boolean-filter-editor.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn } from 'tailwind-variants';
+	import type { FilterableColumn } from '../column-filter-editing.svelte';
+
+	type Props = {
+		column: FilterableColumn;
+	};
+
+	let { column }: Props = $props();
+
+	const value = $derived(column.getFilterValue() as boolean | undefined);
+</script>
+
+<div class="flex overflow-hidden rounded border border-border text-xs">
+	<button
+		type="button"
+		onclick={() => column.setFilterValue(undefined)}
+		class={cn(
+			'flex-1 px-2 py-1',
+			value === undefined ? 'bg-surface-3 font-medium text-ink' : 'text-ink-dim hover:bg-surface-2'
+		)}
+	>
+		All
+	</button>
+	<button
+		type="button"
+		onclick={() => column.setFilterValue(value === true ? undefined : true)}
+		class={cn(
+			'flex-1 border-x border-border px-2 py-1',
+			value === true ? 'bg-surface-3 font-medium text-ink' : 'text-ink-dim hover:bg-surface-2'
+		)}
+	>
+		Yes
+	</button>
+	<button
+		type="button"
+		onclick={() => column.setFilterValue(value === false ? undefined : false)}
+		class={cn(
+			'flex-1 px-2 py-1',
+			value === false ? 'bg-surface-3 font-medium text-ink' : 'text-ink-dim hover:bg-surface-2'
+		)}
+	>
+		No
+	</button>
+</div>

package/dist/components/data-table-v9/filter-editors/boolean-filter-editor.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { FilterableColumn } from '../column-filter-editing.svelte';
+type Props = {
+    column: FilterableColumn;
+};
+declare const BooleanFilterEditor: import("svelte").Component<Props, {}, "">;
+type BooleanFilterEditor = ReturnType<typeof BooleanFilterEditor>;
+export default BooleanFilterEditor;

package/dist/components/data-table-v9/filter-editors/column-filter-editor.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import type { DataTableFeatures } from '../features';
+	import { getColumnFilterKind } from '../column-filter-kind';
+	import { ColumnFilterEditing } from '../column-filter-editing.svelte';
+	import TextFilterEditor from './text-filter-editor.svelte';
+	import RangeFilterEditor from './range-filter-editor.svelte';
+	import BooleanFilterEditor from './boolean-filter-editor.svelte';
+	import SelectFilterEditor from './select-filter-editor.svelte';
+	import DateRangeFilterEditor from './date-range-filter-editor.svelte';
+
+	type Props = {
+		column: Column<DataTableFeatures, T, unknown>;
+		/**
+		 * Pending (debounced) text and range edits. Hosts that can tear an editor down while
+		 * it still holds an edit pass their own, with `isActive`; otherwise the editor uses
+		 * one bound to the column's table.
+		 */
+		editing?: ColumnFilterEditing;
+	};
+
+	let { column, editing: editingProp }: Props = $props();
+
+	const ownEditing = new ColumnFilterEditing({ table: () => column.table });
+	const editing = $derived(editingProp ?? ownEditing);
+	const kind = $derived(getColumnFilterKind(column));
+</script>
+
+{#if kind === 'range'}
+	<RangeFilterEditor {column} {editing} />
+{:else if kind === 'boolean'}
+	<BooleanFilterEditor {column} />
+{:else if kind === 'select'}
+	<SelectFilterEditor {column} />
+{:else if kind === 'date'}
+	<DateRangeFilterEditor {column} />
+{:else if kind === 'text'}
+	<TextFilterEditor {column} {editing} />
+{/if}

package/dist/components/data-table-v9/filter-editors/column-filter-editor.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures } from '../features';
+import { ColumnFilterEditing } from '../column-filter-editing.svelte';
+declare function $$render<T extends RowData>(): {
+    props: {
+        column: Column<DataTableFeatures, T, unknown>;
+        /**
+         * Pending (debounced) text and range edits. Hosts that can tear an editor down while
+         * it still holds an edit pass their own, with `isActive`; otherwise the editor uses
+         * one bound to the column's table.
+         */
+        editing?: ColumnFilterEditing;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(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 RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ColumnFilterEditor: $$IsomorphicComponent;
+type ColumnFilterEditor<T extends RowData> = InstanceType<typeof ColumnFilterEditor<T>>;
+export default ColumnFilterEditor;