compote-ui 0.33.1 → 0.35.0

package/dist/components/carousel/carousel-item-group.svelte

@@ -13,7 +13,7 @@
 
 <Carousel.ItemGroup
 	class={cn(
-		'flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+		'flex min-w-0 flex-1 [scrollbar-width:none] overflow-hidden rounded-lg [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden',
 		className
 	)}
 	{...rest}

package/dist/components/data-table/column-helper.d.ts

@@ -0,0 +1,12 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableGroupColumn } from './types';
+type AccessorKeyColumnOptions<T extends RowData> = Omit<DataTableAccessorKeyColumn<T>, 'accessorKey' | 'accessorFn' | 'columns'>;
+type AccessorFnColumnOptions<T extends RowData> = Omit<DataTableAccessorFnColumn<T>, 'accessorFn' | 'accessorKey' | 'columns'>;
+type GroupColumnOptions<T extends RowData> = Omit<DataTableGroupColumn<T>, 'columns' | 'accessorKey' | 'accessorFn' | 'cell' | 'cellComponent' | 'cellProps' | 'cellSnippet' | 'type' | 'formatOptions' | 'formatLocale'>;
+export declare function createDataTableColumnHelper<T extends RowData>(): {
+    accessor<K extends Extract<keyof T, string>>(accessorKey: K, options: AccessorKeyColumnOptions<T>): DataTableAccessorKeyColumn<T>;
+    accessorFn(accessorFn: (row: T) => unknown, options: AccessorFnColumnOptions<T>): DataTableAccessorFnColumn<T>;
+    group(header: string, columns: DataTableColumn<T>[], options?: Omit<GroupColumnOptions<T>, "header">): DataTableGroupColumn<T>;
+    columns(columns: DataTableColumn<T>[]): DataTableColumn<T>[];
+};
+export {};

package/dist/components/data-table/column-helper.js

@@ -0,0 +1,36 @@
+function urlDefaults(options) {
+    if (options.type !== 'url')
+        return options;
+    return {
+        align: 'center',
+        enableSorting: false,
+        size: 60,
+        ...options
+    };
+}
+export function createDataTableColumnHelper() {
+    return {
+        accessor(accessorKey, options) {
+            return {
+                ...urlDefaults(options),
+                accessorKey
+            };
+        },
+        accessorFn(accessorFn, options) {
+            return {
+                ...urlDefaults(options),
+                accessorFn
+            };
+        },
+        group(header, columns, options = {}) {
+            return {
+                ...options,
+                header,
+                columns
+            };
+        },
+        columns(columns) {
+            return columns;
+        }
+    };
+}

package/dist/components/data-table/create-table.d.ts

@@ -0,0 +1,38 @@
+import { type ColumnFiltersState, type ColumnResizeMode, type Row, type RowData, type RowSelectionState, type SortingState, type SvelteTable, type TableState } from '@tanstack/svelte-table';
+import type { DataTableColumn, DataTableLeafColumn } from './types';
+declare const dataTableFeatures: {
+    columnVisibilityFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnVisibilityFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnSizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnSizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnResizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnResizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnFilteringFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFilteringFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnFacetingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFacetingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    rowSelectionFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSelectionFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    rowSortingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSortingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+};
+export type DataTableFeatures = typeof dataTableFeatures;
+export type DataTableSelectedState = Pick<TableState<DataTableFeatures>, 'columnVisibility' | 'columnSizing' | 'columnResizing' | 'rowSelection' | 'sorting' | 'columnFilters'>;
+export type DataTableInstance<T extends RowData> = SvelteTable<DataTableFeatures, T, DataTableSelectedState>;
+export type CreateDataTableOptions<T extends RowData> = {
+    data: T[];
+    columns: DataTableColumn<T>[];
+    columnResizeMode?: ColumnResizeMode;
+    initialSorting?: SortingState;
+    initialRowSelection?: RowSelectionState;
+    initialColumnFilters?: ColumnFiltersState;
+    getRowId?: (row: T, index: number, parent?: Row<DataTableFeatures, T>) => string;
+    enableRowSelection?: boolean | ((row: Row<DataTableFeatures, T>) => boolean);
+    enableMultiRowSelection?: boolean | ((row: Row<DataTableFeatures, T>) => boolean);
+    enableSorting?: boolean;
+    debugTable?: boolean;
+};
+export declare function createTable<T extends RowData>(options: CreateDataTableOptions<T>): SvelteTable<{
+    columnVisibilityFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnVisibilityFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnSizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnSizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnResizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnResizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnFilteringFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFilteringFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnFacetingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFacetingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    rowSelectionFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSelectionFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    rowSortingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSortingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+}, T, DataTableSelectedState>;
+export declare function getColumnId<T extends RowData>(column: DataTableLeafColumn<T>): string;
+export {};

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

@@ -0,0 +1,190 @@
+import { columnVisibilityFeature, columnResizingFeature, columnSizingFeature, columnFilteringFeature, columnFacetingFeature, createSortedRowModel, createFilteredRowModel, createFacetedRowModel, createFacetedMinMaxValues, createFacetedUniqueValues, createTable as createTanStackTable, filterFns, renderComponent, renderSnippet, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
+import { useLocaleContext } from '@ark-ui/svelte/locale';
+const dataTableFeatures = tableFeatures({
+    columnVisibilityFeature,
+    columnSizingFeature,
+    columnResizingFeature,
+    columnFilteringFeature,
+    columnFacetingFeature,
+    rowSelectionFeature,
+    rowSortingFeature
+});
+function oneOfFilterFn(row, columnId, filterValue) {
+    return filterValue.includes(String(row.getValue(columnId)));
+}
+oneOfFilterFn.autoRemove = (val) => !Array.isArray(val) || val.length === 0;
+export function createTable(options) {
+    const localeCtx = useLocaleContext();
+    return createTanStackTable({
+        _features: dataTableFeatures,
+        _rowModels: {
+            sortedRowModel: createSortedRowModel(sortFns),
+            filteredRowModel: createFilteredRowModel({ ...filterFns, oneOf: oneOfFilterFn }),
+            facetedRowModel: createFacetedRowModel(),
+            facetedMinMaxValues: createFacetedMinMaxValues(),
+            facetedUniqueValues: createFacetedUniqueValues()
+        },
+        columnResizeMode: options.columnResizeMode,
+        getRowId: options.getRowId,
+        enableRowSelection: options.enableRowSelection ?? false,
+        enableMultiRowSelection: options.enableMultiRowSelection,
+        enableSorting: options.enableSorting,
+        debugTable: options.debugTable,
+        get data() {
+            return options.data;
+        },
+        get columns() {
+            return createColumns(options.columns, localeCtx);
+        },
+        initialState: {
+            columnVisibility: createColumnVisibility(options.columns),
+            columnSizing: createColumnSizing(options.columns),
+            rowSelection: options.initialRowSelection ?? {},
+            sorting: options.initialSorting ?? [],
+            columnFilters: options.initialColumnFilters ?? []
+        }
+    }, (state) => ({
+        columnVisibility: state.columnVisibility,
+        columnSizing: state.columnSizing,
+        columnResizing: state.columnResizing,
+        rowSelection: state.rowSelection,
+        sorting: state.sorting,
+        columnFilters: state.columnFilters
+    }));
+}
+function createColumnVisibility(columns) {
+    return getLeafColumns(columns).reduce((visibility, column) => {
+        visibility[getColumnId(column)] = true;
+        return visibility;
+    }, {});
+}
+function createColumnSizing(columns) {
+    return getLeafColumns(columns).reduce((sizes, column) => {
+        if (typeof column.size === 'number') {
+            sizes[getColumnId(column)] = column.size;
+        }
+        return sizes;
+    }, {});
+}
+function createColumns(columns, localeCtx) {
+    return columns.map((column) => {
+        if (isGroupColumn(column)) {
+            return {
+                id: getGroupColumnId(column),
+                header: column.header,
+                columns: createColumns(column.columns, localeCtx),
+                meta: {
+                    align: column.align
+                }
+            };
+        }
+        const columnId = getColumnId(column);
+        const derivedFilterFn = column.filterFn ?? getFilterFnForType(column.type);
+        const columnDef = {
+            id: columnId,
+            header: column.header,
+            size: column.size,
+            minSize: column.minSize,
+            maxSize: column.maxSize,
+            enableResizing: column.enableResizing,
+            enableHiding: getColumnEnableHiding(column, columnId),
+            enableSorting: column.enableSorting,
+            enableColumnFilter: column.enableColumnFilter,
+            sortDescFirst: column.sortDescFirst,
+            ...(derivedFilterFn !== undefined ? { filterFn: derivedFilterFn } : {}),
+            meta: {
+                align: column.align,
+                type: column.type,
+                formatOptions: column.formatOptions,
+                formatLocale: column.formatLocale
+            }
+        };
+        if (typeof column.accessorFn === 'function') {
+            return {
+                ...columnDef,
+                accessorFn: column.accessorFn,
+                cell: (context) => formatCellValue(column, context.getValue(), context.row.original, localeCtx)
+            };
+        }
+        return {
+            ...columnDef,
+            accessorKey: column.accessorKey,
+            cell: (context) => formatCellValue(column, context.getValue(), context.row.original, localeCtx)
+        };
+    });
+}
+function isGroupColumn(column) {
+    return Array.isArray(column.columns);
+}
+function getLeafColumns(columns) {
+    return columns.flatMap((column) => isGroupColumn(column) ? getLeafColumns(column.columns) : column);
+}
+function getGroupColumnId(column) {
+    return column.id ?? column.header;
+}
+function getColumnEnableHiding(column, columnId) {
+    if (column.enableHiding !== undefined)
+        return column.enableHiding;
+    if (columnId === 'id')
+        return false;
+    return undefined;
+}
+export function getColumnId(column) {
+    if (column.id !== undefined)
+        return column.id;
+    if ('accessorKey' in column && column.accessorKey !== undefined)
+        return column.accessorKey;
+    throw new Error('DataTableColumn with accessorFn requires an id.');
+}
+const TYPE_FORMAT_DEFAULTS = {
+    currency: { style: 'currency', currency: 'USD' },
+    percent: { style: 'percent' },
+    number: {}
+};
+function getFilterFnForType(type) {
+    switch (type) {
+        case 'number':
+        case 'currency':
+        case 'percent':
+            return 'inNumberRange';
+        case 'boolean':
+            return 'equals';
+        case 'select':
+            return 'oneOf';
+        default:
+            return undefined;
+    }
+}
+function applyTypeFormat(column, value, localeCtx) {
+    if (value === null || value === undefined || value === '')
+        return undefined;
+    const defaults = column.type ? TYPE_FORMAT_DEFAULTS[column.type] : undefined;
+    if (defaults !== undefined) {
+        const locale = column.formatLocale ?? localeCtx().locale;
+        return new Intl.NumberFormat(locale, {
+            ...defaults,
+            ...column.formatOptions
+        }).format(Number(value));
+    }
+    if (column.type === 'boolean')
+        return value ? 'Yes' : 'No';
+    return value;
+}
+function formatCellValue(column, value, row, localeCtx) {
+    if (column.cellComponent) {
+        return renderComponent(column.cellComponent, getCellComponentProps(column, value, row));
+    }
+    if (column.cellSnippet) {
+        return renderSnippet(column.cellSnippet, { value, row });
+    }
+    const rendered = column.cell
+        ? column.cell(value, row)
+        : applyTypeFormat(column, value, localeCtx);
+    if (rendered === null || rendered === undefined || rendered === '') {
+        return '-';
+    }
+    return String(rendered);
+}
+function getCellComponentProps(column, value, row) {
+    return column.cellProps ? column.cellProps(value, row) : { value, row };
+}

package/dist/components/data-table/data-table-column-filter.svelte

@@ -0,0 +1,249 @@
+<script lang="ts" generics="T extends RowData">
+	import { onDestroy } from 'svelte';
+	import type { CellData, Column, RowData } from '@tanstack/svelte-table';
+	import * as Popover from '../popover';
+	import * as ScrollArea from '../scroll-area';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import { cn } from 'tailwind-variants';
+	import type { DataTableFeatures, DataTableInstance } from './create-table';
+	import NumberInput from '../number-input/number-input.svelte';
+	import * as Field from '../field';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		triggerLabel?: string;
+	};
+
+	let { table, triggerLabel = 'Filters' }: Props = $props();
+
+	let localText: Record<string, string> = $state({});
+	let localNumMin: Record<string, number> = $state({});
+	let localNumMax: Record<string, number> = $state({});
+	const timers: Record<string, ReturnType<typeof setTimeout>> = {};
+
+	const columnFilters = $derived(table.store.state.columnFilters);
+	const activeCount = $derived(columnFilters.length);
+	const filterableColumns = $derived(table.getAllLeafColumns().filter((col) => col.getCanFilter()));
+
+	onDestroy(() => {
+		Object.values(timers).forEach(clearTimeout);
+	});
+
+	function getColumnType(column: Column<DataTableFeatures, T, CellData>): string | undefined {
+		return (column.columnDef.meta as Record<string, unknown> | undefined)?.type as
+			| string
+			| undefined;
+	}
+
+	function getColumnLabel(column: Column<DataTableFeatures, T, CellData>): string {
+		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+	}
+
+	function clearFilters() {
+		Object.values(timers).forEach(clearTimeout);
+		for (const key of Object.keys(timers)) delete timers[key];
+		localText = {};
+		localNumMin = {};
+		localNumMax = {};
+		table.resetColumnFilters();
+	}
+
+	function handleTextInput(column: Column<DataTableFeatures, T, CellData>, value: string) {
+		localText[column.id] = value;
+		clearTimeout(timers[column.id]);
+		timers[column.id] = setTimeout(() => {
+			column.setFilterValue(value || undefined);
+		}, 300);
+	}
+
+	function handleNumericInput(
+		column: Column<DataTableFeatures, T, CellData>,
+		which: 'min' | 'max',
+		value: number | null
+	) {
+		if (value === null) {
+			if (which === 'min') delete localNumMin[column.id];
+			else delete localNumMax[column.id];
+		} else {
+			if (which === 'min') localNumMin[column.id] = value;
+			else localNumMax[column.id] = value;
+		}
+		clearTimeout(timers[`${column.id}_${which}`]);
+		timers[`${column.id}_${which}`] = setTimeout(() => {
+			const min = localNumMin[column.id];
+			const max = localNumMax[column.id];
+			column.setFilterValue(min === undefined && max === undefined ? undefined : [min, max]);
+		}, 300);
+	}
+
+	function getSelectValues(column: Column<DataTableFeatures, T, CellData>): string[] {
+		return (column.getFilterValue() as string[] | undefined) ?? [];
+	}
+
+	function handleSelectChange(
+		column: Column<DataTableFeatures, T, CellData>,
+		value: string,
+		checked: boolean
+	) {
+		const current = getSelectValues(column);
+		const next = checked ? [...current, value] : current.filter((v) => v !== value);
+		column.setFilterValue(next.length ? next : undefined);
+	}
+
+	function getFacetedValues(column: Column<DataTableFeatures, T, CellData>): string[] {
+		return Array.from(column.getFacetedUniqueValues().keys()).map(String).sort();
+	}
+
+	function getFacetedMinMax(
+		column: Column<DataTableFeatures, T, CellData>
+	): [number | undefined, number | undefined] {
+		const vals = column.getFacetedMinMaxValues();
+		return vals ? [vals[0] as number, vals[1] as number] : [undefined, undefined];
+	}
+
+	function getColumnFormatOptions(
+		column: Column<DataTableFeatures, T, CellData>
+	): Intl.NumberFormatOptions | undefined {
+		return (column.columnDef.meta as Record<string, unknown> | undefined)?.formatOptions as
+			| Intl.NumberFormatOptions
+			| undefined;
+	}
+</script>
+
+<Popover.Root positioning={{ placement: 'bottom-end' }}>
+	<Popover.Trigger
+		class="flex h-9 cursor-pointer items-center rounded-md border border-surface-3 bg-surface-1 px-3 text-sm font-medium text-ink shadow-sm outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+	>
+		{triggerLabel}{#if activeCount > 0}
+			({activeCount}){/if}
+	</Popover.Trigger>
+
+	<Popover.Content class="w-72 px-0" showArrow={false}>
+		<div class="mb-2 flex items-center justify-between px-4">
+			<span class="text-sm font-medium text-ink">Filters</span>
+			{#if activeCount > 0}
+				<button type="button" onclick={clearFilters} class="text-xs text-primary hover:underline">
+					Clear all
+				</button>
+			{/if}
+		</div>
+		<div class="mb-2 border-b border-surface-3"></div>
+
+		<ScrollArea.Root class="h-80">
+			<ScrollArea.Viewport>
+				<ScrollArea.Content>
+					{#each filterableColumns as column (column.id)}
+						<div class="mb-3">
+							<p class="mb-1 text-xs font-medium text-ink">{getColumnLabel(column)}</p>
+
+							{#if getColumnType(column) === 'number' || getColumnType(column) === 'currency' || getColumnType(column) === 'percent'}
+								{@const [facetMin, facetMax] = getFacetedMinMax(column)}
+								{@const colFormatOptions = getColumnFormatOptions(column)}
+								<div class="flex gap-1.5">
+									<div class="min-w-0 flex-1">
+										<p class="mb-1 text-xs text-ink-dim">From</p>
+										<NumberInput
+											value={localNumMin[column.id] ?? facetMin ?? null}
+											min={facetMin}
+											max={facetMax}
+											formatOptions={colFormatOptions}
+											onValueChange={({ valueAsNumber }) =>
+												handleNumericInput(
+													column,
+													'min',
+													isNaN(valueAsNumber) ? null : valueAsNumber
+												)}
+										/>
+									</div>
+									<div class="min-w-0 flex-1">
+										<p class="mb-1 text-xs text-ink-dim">To</p>
+										<NumberInput
+											value={localNumMax[column.id] ?? facetMax ?? null}
+											min={facetMin}
+											max={facetMax}
+											formatOptions={colFormatOptions}
+											onValueChange={({ valueAsNumber }) =>
+												handleNumericInput(
+													column,
+													'max',
+													isNaN(valueAsNumber) ? null : valueAsNumber
+												)}
+										/>
+									</div>
+								</div>
+							{:else if getColumnType(column) === 'boolean'}
+								{@const boolFilter = column.getFilterValue() as boolean | undefined}
+								<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',
+											boolFilter === undefined
+												? 'bg-surface-3 font-medium text-ink'
+												: 'text-ink-dim hover:bg-surface-2'
+										)}
+									>
+										All
+									</button>
+									<button
+										type="button"
+										onclick={() => column.setFilterValue(boolFilter === true ? undefined : true)}
+										class={cn(
+											'flex-1 border-x border-border px-2 py-1',
+											boolFilter === true
+												? 'bg-surface-3 font-medium text-ink'
+												: 'text-ink-dim hover:bg-surface-2'
+										)}
+									>
+										Yes
+									</button>
+									<button
+										type="button"
+										onclick={() => column.setFilterValue(boolFilter === false ? undefined : false)}
+										class={cn(
+											'flex-1 px-2 py-1',
+											boolFilter === false
+												? 'bg-surface-3 font-medium text-ink'
+												: 'text-ink-dim hover:bg-surface-2'
+										)}
+									>
+										No
+									</button>
+								</div>
+							{:else if getColumnType(column) === 'select'}
+								{@const options = getFacetedValues(column)}
+								{@const selected = getSelectValues(column)}
+								<div class="flex flex-col gap-0.5">
+									{#each options as option (option)}
+										<Checkbox
+											size="sm"
+											label={option}
+											class="min-h-7 rounded-sm px-2 hover:bg-surface-2"
+											checked={selected.includes(option)}
+											onCheckedChange={({ checked }) =>
+												handleSelectChange(column, option, checked === true)}
+										/>
+									{/each}
+								</div>
+							{:else}
+								<Field.Root>
+									<Field.Input
+										placeholder="Search..."
+										value={localText[column.id] ?? ''}
+										oninput={(e: Event) =>
+											handleTextInput(column, (e.currentTarget as HTMLInputElement).value)}
+									/>
+								</Field.Root>
+							{/if}
+						</div>
+					{/each}
+				</ScrollArea.Content>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar orientation="vertical">
+				<ScrollArea.Thumb />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner />
+		</ScrollArea.Root>
+	</Popover.Content>
+</Popover.Root>

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

@@ -0,0 +1,29 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTableInstance } from './create-table';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        triggerLabel?: string;
+    };
+    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 DataTableColumnFilter: $$IsomorphicComponent;
+type DataTableColumnFilter<T extends RowData> = InstanceType<typeof DataTableColumnFilter<T>>;
+export default DataTableColumnFilter;

package/dist/components/data-table/data-table-column-visibility.svelte

@@ -1,20 +1,18 @@
-<script lang="ts" generics="TData extends RowData, TSelected = object">
+<script lang="ts" generics="T extends RowData">
+	import type { CellData, Column, RowData } from '@tanstack/svelte-table';
 	import * as Popover from '../popover';
 	import * as ScrollArea from '../scroll-area';
 	import Checkbox from '../checkbox/checkbox.svelte';
-	import type { Column, RowData } from '@tanstack/svelte-table';
-	import type { DataTable, DataTableFeatures, DataTableSelectedState } from './core';
+	import type { DataTableFeatures, DataTableInstance } from './create-table';
 
 	type Props = {
-		table: DataTable<TData, TSelected>;
+		table: DataTableInstance<T>;
 		triggerLabel?: string;
 	};
 
 	let { table, triggerLabel = 'Columns' }: Props = $props();
 
-	const columnVisibility = $derived(
-		(table.state as unknown as DataTableSelectedState).columnVisibility
-	);
+	const columnVisibility = $derived(table.store.state.columnVisibility);
 	const allColumnsVisible = $derived(table.getIsAllColumnsVisible());
 	const someColumnsVisible = $derived(
 		table.getAllLeafColumns().some((column) => column.getCanHide() && column.getIsVisible())
@@ -23,15 +21,12 @@
 		allColumnsVisible ? true : someColumnsVisible ? 'indeterminate' : false
 	);
 
-	function getColumnLabel(column: Column<DataTableFeatures, TData, unknown>) {
+	function getColumnLabel(column: Column<DataTableFeatures, T, CellData>) {
 		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
 	}
 
-	function getColumnIsVisible(
-		column: Column<DataTableFeatures, TData, unknown>,
-		visibilityState: unknown
-	) {
-		void visibilityState;
+	function getColumnIsVisible(column: Column<DataTableFeatures, T, CellData>, state: unknown) {
+		void state;
 		return column.getIsVisible();
 	}
 </script>

package/dist/components/data-table/data-table-column-visibility.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { RowData } from '@tanstack/svelte-table';
-import type { DataTable } from './core';
-declare function $$render<TData extends RowData, TSelected = object>(): {
+import type { DataTableInstance } from './create-table';
+declare function $$render<T extends RowData>(): {
     props: {
-        table: DataTable<TData, TSelected>;
+        table: DataTableInstance<T>;
         triggerLabel?: string;
     };
     exports: {};
@@ -10,20 +10,20 @@ declare function $$render<TData extends RowData, TSelected = object>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<TData extends RowData, TSelected = object> {
-    props(): ReturnType<typeof $$render<TData, TSelected>>['props'];
-    events(): ReturnType<typeof $$render<TData, TSelected>>['events'];
-    slots(): ReturnType<typeof $$render<TData, TSelected>>['slots'];
+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 <TData extends RowData, TSelected = object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TSelected>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TSelected>['props']>, ReturnType<__sveltets_Render<TData, TSelected>['events']>, ReturnType<__sveltets_Render<TData, TSelected>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TData, TSelected>['bindings']>;
-    } & ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
-    <TData extends RowData, TSelected = object>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TSelected>['props']> & {}): ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    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 DataTableColumnVisibility: $$IsomorphicComponent;
-type DataTableColumnVisibility<TData extends RowData, TSelected = object> = InstanceType<typeof DataTableColumnVisibility<TData, TSelected>>;
+type DataTableColumnVisibility<T extends RowData> = InstanceType<typeof DataTableColumnVisibility<T>>;
 export default DataTableColumnVisibility;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type ClassValue } from 'tailwind-variants';
 
 	type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> & {
 		class?: ClassValue;