compote-ui 0.79.1 → 0.80.0

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

@@ -1,151 +1,154 @@
-<script lang="ts" generics="T extends RowData">
-	import type { RowData } from '@tanstack/svelte-table';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import type { DataTableInstance } from './data-table-utils';
-	import { createTableViewState } from './table-view-state.svelte';
-	import DataTableHead from './data-table-head.svelte';
-	import DataTableFoot from './data-table-foot.svelte';
-	import DataTableCellContent from './data-table-cell-content.svelte';
-	import {
-		alignClass,
-		columnSizeStyle,
-		getColumnMeta,
-		getPinningStyle,
-		getRowCells,
-		selectionColumnSizeStyle,
-		tableSizeStyle
-	} from './data-table-utils';
-
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		table: DataTableInstance<T>;
-		caption?: string;
-		emptyMessage?: string;
-		class?: ClassValue;
-		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
-		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
-	};
-
-	let {
-		table,
-		caption,
-		emptyMessage = 'No rows found',
-		class: className,
-		onRowClick,
-		onRowDoubleClick,
-		...rest
-	}: Props = $props();
-
-	const view = createTableViewState(() => table);
-
-	const visibleColumnCount = $derived(view.visibleLeafColumns.length);
-	const tableColumnCount = $derived(visibleColumnCount + (view.isRowSelectionEnabled ? 1 : 0));
-	const renderedColumnCount = $derived(tableColumnCount + 1);
-</script>
-
-<div
-	class={cn(
-		'flex max-h-full min-h-0 flex-col overflow-hidden rounded-lg border border-surface-3 bg-surface-1',
-		className
-	)}
-	{...rest}
->
-	{#if view.isColumnResizing}
-		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
-	{/if}
-
-	<div class="min-h-0 flex-1 overflow-auto">
-		<table
-			class="table-fixed border-separate border-spacing-0 text-sm"
-			style={tableSizeStyle(table, view.isRowSelectionEnabled, view)}
-		>
-			<colgroup>
-				{#if view.isRowSelectionEnabled}
-					<col style={selectionColumnSizeStyle()} />
-				{/if}
-				{#each view.visibleLeafColumns as column (column.id)}
-					<col
-						style={getColumnMeta(column.columnDef)?.grow
-							? undefined
-							: columnSizeStyle(column.getSize())}
-					/>
-				{/each}
-				{#if !view.hasGrowColumn}
-					<col />
-				{/if}
-			</colgroup>
-			{#if caption}
-				<caption class="sr-only">{caption}</caption>
-			{/if}
-			<DataTableHead {table} {view} hasGrowColumn={view.hasGrowColumn} />
-			<tbody>
-				{#each view.rowModel.rows as row (row.id)}
-					{@const rowSelected = view.rowSelection[row.id] === true}
-					<tr
-						class={cn(
-							'group/row',
-							'[--row-bg:var(--compote-surface-1)]',
-							'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
-							rowSelected &&
-								'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
-						)}
-						onclick={(event) => onRowClick?.({ row: row.original, event })}
-						ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
-					>
-						{#if view.isRowSelectionEnabled}
-							<td
-								class="border-b border-surface-2 bg-(--row-bg) px-3 py-2 text-center align-middle group-last/row:border-b-0"
-								style="position: sticky; left: 0; z-index: 1"
-								onclick={(event) => event.stopPropagation()}
-								ondblclick={(event) => event.stopPropagation()}
-							>
-								<input
-									type="checkbox"
-									aria-label="Select row"
-									class="table-checkbox mx-auto block size-4"
-									checked={rowSelected}
-									disabled={!row.getCanSelect()}
-									onchange={(e) => row.toggleSelected(e.currentTarget.checked)}
-								/>
-							</td>
-						{/if}
-						{#each getRowCells(row, view) as cell (cell.id)}
-							{@const meta = getColumnMeta(cell.column.columnDef)}
-							<td
-								class={cn(
-									'h-9 truncate border-b border-b-surface-2 px-3 py-0 align-middle group-last/row:border-b-0',
-									alignClass(meta?.align),
-									cell.column.getIsPinned() && 'bg-(--row-bg)'
-								)}
-								style={getPinningStyle(cell.column, table, view, false, view.isRowSelectionEnabled)}
-							>
-								<DataTableCellContent {cell} />
-							</td>
-						{/each}
-						{#if !view.hasGrowColumn}
-							<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
-							></td>
-						{/if}
-					</tr>
-				{:else}
-					<tr>
-						<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
-							{emptyMessage}
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-			{#if view.hasFooter}
-				<DataTableFoot {table} {view} hasGrowColumn={view.hasGrowColumn} />
-			{/if}
-		</table>
-	</div>
-
-	<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
-		{#if view.isRowSelectionEnabled}
-			{view.selectedRowCount} of {view.rowModel.rows.length} rows selected
-		{:else}
-			{view.rowModel.rows.length} rows
-		{/if}
-	</div>
-</div>
+<script lang="ts" generics="T extends RowData">
+	import type { RowData } from '@tanstack/svelte-table';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type ClassValue } from 'tailwind-variants';
+	import type { DataTableInstance } from './data-table-utils';
+	import { createTableViewState } from './table-view-state.svelte';
+	import DataTableHead from './data-table-head.svelte';
+	import DataTableFoot from './data-table-foot.svelte';
+	import DataTableCellContent from './data-table-cell-content.svelte';
+	import {
+		alignClass,
+		columnSizeStyle,
+		getColumnMeta,
+		getPinningStyle,
+		getRowCells,
+		selectionColumnSizeStyle,
+		tableSizeStyle
+	} from './data-table-utils';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+		table: DataTableInstance<T>;
+		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;
+	};
+
+	let {
+		table,
+		caption,
+		emptyMessage = 'No rows found',
+		class: className,
+		headerFilters = false,
+		onRowClick,
+		onRowDoubleClick,
+		...rest
+	}: Props = $props();
+
+	const view = createTableViewState(() => table);
+
+	const visibleColumnCount = $derived(view.visibleLeafColumns.length);
+	const tableColumnCount = $derived(visibleColumnCount + (view.isRowSelectionEnabled ? 1 : 0));
+	const renderedColumnCount = $derived(tableColumnCount + 1);
+</script>
+
+<div
+	class={cn(
+		'flex max-h-full min-h-0 flex-col overflow-hidden rounded-lg border border-surface-3 bg-surface-1',
+		className
+	)}
+	{...rest}
+>
+	{#if view.isColumnResizing}
+		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
+	{/if}
+
+	<div class="min-h-0 flex-1 overflow-auto">
+		<table
+			class="table-fixed border-separate border-spacing-0 text-sm"
+			style={tableSizeStyle(table, view.isRowSelectionEnabled, view)}
+		>
+			<colgroup>
+				{#if view.isRowSelectionEnabled}
+					<col style={selectionColumnSizeStyle()} />
+				{/if}
+				{#each view.visibleLeafColumns as column (column.id)}
+					<col
+						style={getColumnMeta(column.columnDef)?.grow
+							? undefined
+							: columnSizeStyle(column.getSize())}
+					/>
+				{/each}
+				{#if !view.hasGrowColumn}
+					<col />
+				{/if}
+			</colgroup>
+			{#if caption}
+				<caption class="sr-only">{caption}</caption>
+			{/if}
+			<DataTableHead {table} {view} hasGrowColumn={view.hasGrowColumn} {headerFilters} />
+			<tbody>
+				{#each view.rowModel.rows as row (row.id)}
+					{@const rowSelected = view.rowSelection[row.id] === true}
+					<tr
+						class={cn(
+							'group/row',
+							'[--row-bg:var(--compote-surface-1)]',
+							'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
+							rowSelected &&
+								'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
+						)}
+						onclick={(event) => onRowClick?.({ row: row.original, event })}
+						ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
+					>
+						{#if view.isRowSelectionEnabled}
+							<td
+								class="border-b border-surface-2 bg-(--row-bg) px-3 py-2 text-center align-middle group-last/row:border-b-0"
+								style="position: sticky; left: 0; z-index: 1"
+								onclick={(event) => event.stopPropagation()}
+								ondblclick={(event) => event.stopPropagation()}
+							>
+								<input
+									type="checkbox"
+									aria-label="Select row"
+									class="table-checkbox mx-auto block size-4"
+									checked={rowSelected}
+									disabled={!row.getCanSelect()}
+									onchange={(e) => row.toggleSelected(e.currentTarget.checked)}
+								/>
+							</td>
+						{/if}
+						{#each getRowCells(row, view) as cell (cell.id)}
+							{@const meta = getColumnMeta(cell.column.columnDef)}
+							<td
+								class={cn(
+									'h-9 truncate border-b border-b-surface-2 px-3 py-0 align-middle group-last/row:border-b-0',
+									alignClass(meta?.align),
+									cell.column.getIsPinned() && 'bg-(--row-bg)'
+								)}
+								style={getPinningStyle(cell.column, table, view, false, view.isRowSelectionEnabled)}
+							>
+								<DataTableCellContent {cell} />
+							</td>
+						{/each}
+						{#if !view.hasGrowColumn}
+							<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
+							></td>
+						{/if}
+					</tr>
+				{:else}
+					<tr>
+						<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
+							{emptyMessage}
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+			{#if view.hasFooter}
+				<DataTableFoot {table} {view} hasGrowColumn={view.hasGrowColumn} />
+			{/if}
+		</table>
+	</div>
+
+	<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
+		{#if view.isRowSelectionEnabled}
+			{view.selectedRowCount} of {view.rowModel.rows.length} rows selected
+		{:else}
+			{view.rowModel.rows.length} rows
+		{/if}
+	</div>
+</div>

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,33 @@
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import type { DataTableFeatures } from '../features';
+	import { getColumnMeta } from '../data-table-utils';
+	import { filterKindFor } from '../column-filter-kind';
+	import type { 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>;
+		editing: ColumnFilterEditing;
+	};
+
+	let { column, editing }: Props = $props();
+
+	const kind = $derived(filterKindFor(getColumnMeta(column.columnDef)?.type));
+</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,30 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures } from '../features';
+import type { ColumnFilterEditing } from '../column-filter-editing.svelte';
+declare function $$render<T extends RowData>(): {
+    props: {
+        column: Column<DataTableFeatures, T, unknown>;
+        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;

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

@@ -0,0 +1,52 @@
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import DatePicker from '../../date-picker/date-picker.svelte';
+	import type { DataTableFeatures } from '../features';
+	import { getColumnMeta } from '../data-table-utils';
+	import { dateCellTimeZone } from '../date-cell';
+	import type { DateRangeFilterValue } from '../../../utils/date-filter';
+
+	type Props = {
+		column: Column<DataTableFeatures, T, unknown>;
+	};
+
+	let { column }: Props = $props();
+
+	const meta = $derived(getColumnMeta(column.columnDef));
+	// Pick days in the zone the column is shown and filtered in, so "today" matches the cells.
+	const timeZone = $derived(
+		dateCellTimeZone(meta?.formatOptions as Intl.DateTimeFormatOptions | undefined)
+	);
+
+	function bound(index: 0 | 1): string | null {
+		const value = column.getFilterValue();
+		const bound = Array.isArray(value) ? value[index] : undefined;
+		return typeof bound === 'string' ? bound : null;
+	}
+
+	// Each picked bound applies at once. The picker emits `YYYY-MM-DD` for a day it accepted
+	// and null when cleared; a half-typed date never reaches here.
+	function setBound(index: 0 | 1, next: unknown) {
+		const value = column.getFilterValue();
+		const range: DateRangeFilterValue = Array.isArray(value)
+			? [value[0] as string | undefined, value[1] as string | undefined]
+			: [undefined, undefined];
+		range[index] = typeof next === 'string' && next ? next : undefined;
+		column.setFilterValue(range[0] || range[1] ? range : undefined);
+	}
+</script>
+
+<div class="flex flex-col gap-2">
+	<DatePicker
+		label="From"
+		locale={meta?.formatLocale}
+		{timeZone}
+		bind:value={() => bound(0), (next) => setBound(0, next)}
+	/>
+	<DatePicker
+		label="To"
+		locale={meta?.formatLocale}
+		{timeZone}
+		bind:value={() => bound(1), (next) => setBound(1, next)}
+	/>
+</div>

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

@@ -0,0 +1,28 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures } from '../features';
+declare function $$render<T extends RowData>(): {
+    props: {
+        column: Column<DataTableFeatures, T, unknown>;
+    };
+    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 DateRangeFilterEditor: $$IsomorphicComponent;
+type DateRangeFilterEditor<T extends RowData> = InstanceType<typeof DateRangeFilterEditor<T>>;
+export default DateRangeFilterEditor;

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

@@ -0,0 +1,51 @@
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import NumberInput from '../../number-input/number-input.svelte';
+	import type { DataTableFeatures } from '../features';
+	import { getColumnMeta } from '../data-table-utils';
+	import type { ColumnFilterEditing } from '../column-filter-editing.svelte';
+
+	type Props = {
+		column: Column<DataTableFeatures, T, unknown>;
+		editing: ColumnFilterEditing;
+	};
+
+	let { column, editing }: Props = $props();
+
+	const facetBounds = $derived.by((): [number | undefined, number | undefined] => {
+		const vals = column.getFacetedMinMaxValues();
+		return vals ? [vals[0] as number, vals[1] as number] : [undefined, undefined];
+	});
+	const formatOptions = $derived(
+		getColumnMeta(column.columnDef)?.formatOptions as Intl.NumberFormatOptions | undefined
+	);
+</script>
+
+<div class="flex flex-col gap-1.5">
+	<div class="min-w-0 flex-1">
+		<NumberInput
+			layout="horizontal"
+			label="From"
+			bind:value={
+				() => editing.rangeBound(column, 'min'),
+				(bound) => editing.editRange(column, 'min', bound ?? null)
+			}
+			min={facetBounds[0]}
+			max={facetBounds[1]}
+			{formatOptions}
+		/>
+	</div>
+	<div class="min-w-0 flex-1">
+		<NumberInput
+			layout="horizontal"
+			label="To"
+			bind:value={
+				() => editing.rangeBound(column, 'max'),
+				(bound) => editing.editRange(column, 'max', bound ?? null)
+			}
+			min={facetBounds[0]}
+			max={facetBounds[1]}
+			{formatOptions}
+		/>
+	</div>
+</div>