compote-ui 0.42.6 → 0.43.0

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

@@ -0,0 +1,85 @@
+import { createTable } from '@tanstack/table-core';
+export function createSvelteTable(options) {
+    const resolvedOptions = mergeObjects({
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        }
+    }, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    function updateOptions() {
+        table.setOptions(() => {
+            return mergeObjects(resolvedOptions, options, {
+                state: mergeObjects(state, options.state || {}),
+                onStateChange: (updater) => {
+                    if (updater instanceof Function)
+                        state = updater(state);
+                    else
+                        state = mergeObjects(state, updater);
+                    options.onStateChange?.(updater);
+                }
+            });
+        });
+    }
+    updateOptions();
+    $effect.pre(() => {
+        updateOptions();
+    });
+    Object.defineProperty(table, '_svelteState', {
+        get() {
+            return state;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return table;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects(...sources) {
+    const resolve = (src) => typeof src === 'function' ? (src() ?? undefined) : src;
+    const findSourceWithKey = (key) => {
+        for (let i = sources.length - 1; i >= 0; i--) {
+            const obj = resolve(sources[i]);
+            if (obj && key in obj)
+                return obj;
+        }
+        return undefined;
+    };
+    return new Proxy(Object.create(null), {
+        get(_, key) {
+            const src = findSourceWithKey(key);
+            return src?.[key];
+        },
+        has(_, key) {
+            return !!findSourceWithKey(key);
+        },
+        ownKeys() {
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const all = new Set();
+            for (const s of sources) {
+                const obj = resolve(s);
+                if (obj) {
+                    for (const k of Reflect.ownKeys(obj)) {
+                        all.add(k);
+                    }
+                }
+            }
+            return [...all];
+        },
+        getOwnPropertyDescriptor(_, key) {
+            const src = findSourceWithKey(key);
+            if (!src)
+                return undefined;
+            return {
+                configurable: true,
+                enumerable: true,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                value: src[key],
+                writable: true
+            };
+        }
+    });
+}

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

@@ -0,0 +1,35 @@
+import { type ColumnPinningState, type ColumnResizeMode, type ColumnSizingState, type VisibilityState, type FilterFn, type Row, type RowData, type Table } from '@tanstack/table-core';
+import type { DataTableColumn, DataTableLeafColumn } from './types';
+declare module '@tanstack/table-core' {
+    interface FilterFns {
+        oneOf: FilterFn<unknown>;
+    }
+}
+export type DataTableInstance<T extends RowData> = Table<T>;
+export type CreateDataTableOptions<T extends RowData> = {
+    data: T[];
+    columns: DataTableColumn<T>[];
+    columnResizeMode?: ColumnResizeMode;
+    initialState?: {
+        columnVisibility?: VisibilityState;
+        columnSizing?: ColumnSizingState;
+        columnPinning?: ColumnPinningState;
+        rowSelection?: Record<string, boolean>;
+        sorting?: {
+            id: string;
+            desc: boolean;
+        }[];
+        columnFilters?: {
+            id: string;
+            value: unknown;
+        }[];
+    };
+    getRowId?: (row: T, index: number, parent?: Row<T>) => string;
+    enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+    enableMultiRowSelection?: boolean | ((row: Row<T>) => boolean);
+    enableSorting?: boolean;
+    debugTable?: boolean;
+    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+};
+export declare function createTable<T extends RowData>(options: CreateDataTableOptions<T>): Table<T>;
+export declare function getColumnId<T extends RowData>(column: DataTableLeafColumn<T>): string;

package/dist/components/{data-table/create-table.js → data-table-v8/create-table.svelte.js}

@@ -1,21 +1,7 @@
-import { columnVisibilityFeature, columnResizingFeature, columnSizingFeature, columnFilteringFeature, columnFacetingFeature, columnPinningFeature, columnOrderingFeature, createSortedRowModel, createFilteredRowModel, 
-//	createFacetedRowModel,
-//	createFacetedMinMaxValues,
-//	createFacetedUniqueValues,
-createTable as createTanStackTable, filterFns, renderComponent, renderSnippet, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
-import { createAtom } from '@tanstack/svelte-store';
+import { getCoreRowModel, getSortedRowModel, getFilteredRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues } from '@tanstack/table-core';
 import { useLocaleContext } from '@ark-ui/svelte/locale';
-const dataTableFeatures = tableFeatures({
-    columnVisibilityFeature,
-    columnSizingFeature,
-    columnResizingFeature,
-    columnFilteringFeature,
-    columnFacetingFeature,
-    columnPinningFeature,
-    columnOrderingFeature,
-    rowSelectionFeature,
-    rowSortingFeature
-});
+import { createSvelteTable } from './create-svelte-table.svelte';
+import { renderComponent, renderSnippet } from './render-helpers';
 function oneOfFilterFn(row, columnId, filterValue) {
     return filterValue.includes(String(row.getValue(columnId)));
 }
@@ -26,33 +12,35 @@ export function createTable(options) {
         ...createColumnVisibility(options.columns),
         ...options.initialState?.columnVisibility
     };
-    const columnVisibilityAtom = options.onColumnVisibilityChange
-        ? createAtom(initialColumnVisibility)
-        : undefined;
-    const table = createTanStackTable({
-        _features: dataTableFeatures,
-        _rowModels: {
-            sortedRowModel: createSortedRowModel(sortFns),
-            filteredRowModel: createFilteredRowModel({ ...filterFns, oneOf: oneOfFilterFn })
-            // facetedRowModel: createFacetedRowModel(),
-            // facetedMinMaxValues: createFacetedMinMaxValues(),
-            // facetedUniqueValues: createFacetedUniqueValues()
+    const table = createSvelteTable({
+        get data() {
+            return options.data;
         },
+        columns: createColumns(options.columns, localeCtx),
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+        getFacetedMinMaxValues: getFacetedMinMaxValues(),
         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);
+        filterFns: {
+            oneOf: oneOfFilterFn
         },
-        ...(columnVisibilityAtom ? { atoms: { columnVisibility: columnVisibilityAtom } } : {}),
+        ...(options.onColumnVisibilityChange
+            ? {
+                onColumnVisibilityChange: (updater) => {
+                    const newVis = typeof updater === 'function' ? updater(table.getState().columnVisibility) : updater;
+                    options.onColumnVisibilityChange(newVis);
+                }
+            }
+            : {}),
         initialState: {
-            ...options.initialState,
             columnVisibility: initialColumnVisibility,
             columnSizing: {
                 ...createColumnSizing(options.columns),
@@ -63,25 +51,7 @@ export function createTable(options) {
             sorting: options.initialState?.sorting ?? [],
             columnFilters: options.initialState?.columnFilters ?? []
         }
-    }, (state) => ({
-        columnVisibility: state.columnVisibility,
-        columnSizing: state.columnSizing,
-        columnResizing: state.columnResizing,
-        rowSelection: state.rowSelection,
-        sorting: state.sorting,
-        columnFilters: state.columnFilters
-    }));
-    if (columnVisibilityAtom && options.onColumnVisibilityChange) {
-        const { onColumnVisibilityChange } = options;
-        let initialized = false;
-        columnVisibilityAtom.subscribe((value) => {
-            if (!initialized) {
-                initialized = true;
-                return;
-            }
-            onColumnVisibilityChange(value);
-        });
-    }
+    });
     return table;
 }
 function createColumnVisibility(columns) {
@@ -128,8 +98,8 @@ function createColumns(columns, localeCtx) {
             enableResizing: column.enableResizing,
             enableHiding: getColumnEnableHiding(column, columnId),
             enableSorting: column.enableSorting,
-            enableColumnFilter: column.enableColumnFilter,
             sortDescFirst: column.sortDescFirst,
+            enableColumnFilter: column.enableColumnFilter,
             ...(derivedFilterFn !== undefined ? { filterFn: derivedFilterFn } : {}),
             meta: {
                 align: column.align,

package/dist/components/data-table-v8/data-table-checkbox.css

@@ -0,0 +1,44 @@
+.table-checkbox {
+	appearance: none;
+	-webkit-appearance: none;
+	flex-shrink: 0;
+	border-radius: 2px;
+	border: 1px solid var(--compote-border);
+	background-color: transparent;
+	cursor: pointer;
+	transition:
+		border-color 150ms ease,
+		background-color 150ms ease;
+}
+
+.table-checkbox:hover:not(:disabled) {
+	border-color: color-mix(in srgb, var(--compote-primary) 50%, transparent);
+}
+
+.table-checkbox:checked {
+	border-color: var(--compote-primary);
+	background-color: var(--compote-primary);
+	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3e%3cpolyline points='216 72 104 184 48 128' fill='none' stroke='white' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 70%;
+}
+
+.table-checkbox:indeterminate {
+	border-color: var(--compote-primary);
+	background-color: var(--compote-primary);
+	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3e%3cline x1='40' y1='128' x2='216' y2='128' stroke='white' stroke-width='32' stroke-linecap='round'/%3e%3c/svg%3e");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 70%;
+}
+
+.table-checkbox:disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.table-checkbox:focus-visible {
+	outline: 2px solid var(--compote-ring);
+	outline-offset: 2px;
+}

package/dist/components/{data-table → data-table-v8}/data-table-column-filter.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" generics="T extends RowData">
 	import { onDestroy } from 'svelte';
-	import type { CellData, Column, RowData } from '@tanstack/svelte-table';
+	import type { Column, RowData } from '@tanstack/table-core';
 	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 { getReactiveTableState, type DataTableInstance } from './data-table-utils';
 	import NumberInput from '../number-input/number-input.svelte';
 	import * as Field from '../field';
 
@@ -21,21 +21,24 @@
 	let localNumMax: Record<string, number> = $state({});
 	const timers: Record<string, ReturnType<typeof setTimeout>> = {};
 
-	const columnFilters = $derived(table.store.state.columnFilters);
+	const columnFilters = $derived(getReactiveTableState(table).columnFilters);
 	const activeCount = $derived(columnFilters.length);
-	const filterableColumns = $derived(table.getAllLeafColumns().filter((col) => col.getCanFilter()));
+	const filterableColumns = $derived.by(() => {
+		getReactiveTableState(table);
+		return table.getAllLeafColumns().filter((col) => col.getCanFilter());
+	});
 
 	onDestroy(() => {
 		Object.values(timers).forEach(clearTimeout);
 	});
 
-	function getColumnType(column: Column<DataTableFeatures, T, CellData>): string | undefined {
+	function getColumnType(column: Column<T, unknown>): string | undefined {
 		return (column.columnDef.meta as Record<string, unknown> | undefined)?.type as
 			| string
 			| undefined;
 	}
 
-	function getColumnLabel(column: Column<DataTableFeatures, T, CellData>): string {
+	function getColumnLabel(column: Column<T, unknown>): string {
 		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
 	}
 
@@ -48,7 +51,7 @@
 		table.resetColumnFilters();
 	}
 
-	function handleTextInput(column: Column<DataTableFeatures, T, CellData>, value: string) {
+	function handleTextInput(column: Column<T, unknown>, value: string) {
 		localText[column.id] = value;
 		clearTimeout(timers[column.id]);
 		timers[column.id] = setTimeout(() => {
@@ -57,7 +60,7 @@
 	}
 
 	function handleNumericInput(
-		column: Column<DataTableFeatures, T, CellData>,
+		column: Column<T, unknown>,
 		which: 'min' | 'max',
 		value: number | null
 	) {
@@ -76,33 +79,27 @@
 		}, 300);
 	}
 
-	function getSelectValues(column: Column<DataTableFeatures, T, CellData>): string[] {
+	function getSelectValues(column: Column<T, unknown>): string[] {
 		return (column.getFilterValue() as string[] | undefined) ?? [];
 	}
 
-	function handleSelectChange(
-		column: Column<DataTableFeatures, T, CellData>,
-		value: string,
-		checked: boolean
-	) {
+	function handleSelectChange(column: Column<T, unknown>, 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[] {
+	function getFacetedValues(column: Column<T, unknown>): string[] {
 		return Array.from(column.getFacetedUniqueValues().keys()).map(String).sort();
 	}
 
-	function getFacetedMinMax(
-		column: Column<DataTableFeatures, T, CellData>
-	): [number | undefined, number | undefined] {
+	function getFacetedMinMax(column: Column<T, unknown>): [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>
+		column: Column<T, unknown>
 	): Intl.NumberFormatOptions | undefined {
 		return (column.columnDef.meta as Record<string, unknown> | undefined)?.formatOptions as
 			| Intl.NumberFormatOptions

package/dist/components/{data-table → data-table-v8}/data-table-column-filter.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { RowData } from '@tanstack/svelte-table';
-import type { DataTableInstance } from './create-table';
+import type { RowData } from '@tanstack/table-core';
+import { type DataTableInstance } from './data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         table: DataTableInstance<T>;

package/dist/components/{data-table → data-table-v8}/data-table-column-visibility.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" generics="T extends RowData">
-	import type { CellData, Column, RowData } from '@tanstack/svelte-table';
+	import type { RowData } from '@tanstack/table-core';
 	import * as Popover from '../popover';
 	import * as ScrollArea from '../scroll-area';
 	import Checkbox from '../checkbox/checkbox.svelte';
-	import type { DataTableFeatures, DataTableInstance } from './create-table';
+	import { getReactiveTableState, type DataTableInstance } from './data-table-utils';
 
 	type Props = {
 		table: DataTableInstance<T>;
@@ -12,23 +12,24 @@
 
 	let { table, triggerLabel = 'Columns' }: Props = $props();
 
-	const columnVisibility = $derived(table.store.state.columnVisibility);
-	const allColumnsVisible = $derived(table.getIsAllColumnsVisible());
+	const columnVisibility = $derived(getReactiveTableState(table).columnVisibility);
+	const allLeafColumns = $derived.by(() => {
+		getReactiveTableState(table);
+		return table.getAllLeafColumns();
+	});
+	const allColumnsVisible = $derived(
+		allLeafColumns.every((c) => !c.getCanHide() || columnVisibility[c.id] !== false)
+	);
 	const someColumnsVisible = $derived(
-		table.getAllLeafColumns().some((column) => column.getCanHide() && column.getIsVisible())
+		allLeafColumns.some((c) => c.getCanHide() && columnVisibility[c.id] !== false)
 	);
 	const allColumnsVisibilityState = $derived(
-		allColumnsVisible ? true : someColumnsVisible ? 'indeterminate' : false
+		allColumnsVisible ? true : someColumnsVisible ? ('indeterminate' as const) : false
 	);
 
-	function getColumnLabel(column: Column<DataTableFeatures, T, CellData>) {
+	function getColumnLabel(column: { columnDef: { header?: unknown }; id: string }) {
 		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
 	}
-
-	function getColumnIsVisible(column: Column<DataTableFeatures, T, CellData>, state: unknown) {
-		void state;
-		return column.getIsVisible();
-	}
 </script>
 
 <Popover.Root positioning={{ placement: 'bottom-end' }}>
@@ -52,12 +53,12 @@
 			<ScrollArea.Viewport>
 				<ScrollArea.Content class="py-1 pe-3">
 					<div class="flex flex-col">
-						{#each table.getAllLeafColumns() as column (column.id)}
+						{#each allLeafColumns as column (column.id)}
 							<Checkbox
 								size="md"
 								label={getColumnLabel(column)}
 								class="min-h-8 rounded-sm px-2 hover:bg-surface-2"
-								checked={getColumnIsVisible(column, columnVisibility)}
+								checked={columnVisibility[column.id] !== false}
 								disabled={!column.getCanHide()}
 								onCheckedChange={({ checked }) => column.toggleVisibility(checked === true)}
 							/>

package/dist/components/{data-table → data-table-v8}/data-table-column-visibility.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { RowData } from '@tanstack/svelte-table';
-import type { DataTableInstance } from './create-table';
+import type { RowData } from '@tanstack/table-core';
+import { type DataTableInstance } from './data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         table: DataTableInstance<T>;

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

@@ -0,0 +1,200 @@
+<script lang="ts" generics="T extends RowData">
+	import type { HeaderGroup, RowData } from '@tanstack/table-core';
+	import { cn } from 'tailwind-variants';
+	import { PhCaretDown, PhCaretUp } from '../../icons';
+	import type { DataTableInstance } from './data-table-utils';
+	import FlexRender from './flex-render.svelte';
+	import {
+		alignClass,
+		getColumnMeta,
+		getHeaderAriaSort,
+		getHeaderSortDirection,
+		getHeaderSortLabel,
+		getPinningStyle,
+		joinStyles,
+		justifyClass,
+		resizeHandleClass,
+		resizeHandleStyle,
+		sortButtonDirectionClass,
+		virtualColumnSizeStyle,
+		virtualGroupWithGrowSizeStyle,
+		virtualGrowColumnSizeStyle,
+		virtualSelectionColumnSizeStyle
+	} from './data-table-utils';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		headerGroups: HeaderGroup<T>[];
+		headerGroupCount: number;
+		isRowSelectionEnabled: boolean;
+		isMultiRowSelectionEnabled: boolean;
+		allRowsSelectionState: boolean | 'indeterminate';
+		isVirtual?: boolean;
+		hasGrowColumn?: boolean;
+	};
+
+	let {
+		table,
+		headerGroups,
+		headerGroupCount,
+		isRowSelectionEnabled,
+		isMultiRowSelectionEnabled,
+		allRowsSelectionState,
+		isVirtual = false,
+		hasGrowColumn = false
+	}: Props = $props();
+
+	type Header = HeaderGroup<T>['headers'][number];
+
+	function findGrowLeafHeader(header: Header): Header | undefined {
+		if (header.subHeaders.length === 0) {
+			return getColumnMeta(header.column.columnDef)?.grow ? header : undefined;
+		}
+		for (const sub of header.subHeaders) {
+			const found = findGrowLeafHeader(sub);
+			if (found) return found;
+		}
+		return undefined;
+	}
+
+	function headerCellStyle(header: Header) {
+		const canPinHeader = header.subHeaders.length === 0;
+
+		let virtualSizeStyle: string | undefined;
+		if (isVirtual) {
+			const isGrowLeaf = canPinHeader && getColumnMeta(header.column.columnDef)?.grow;
+			if (isGrowLeaf) {
+				virtualSizeStyle = virtualGrowColumnSizeStyle();
+			} else {
+				const growLeaf = findGrowLeafHeader(header);
+				virtualSizeStyle = growLeaf
+					? virtualGroupWithGrowSizeStyle(header.getSize() - growLeaf.getSize())
+					: virtualColumnSizeStyle(header.getSize());
+			}
+		}
+
+		return joinStyles(
+			virtualSizeStyle,
+			canPinHeader ? getPinningStyle(header.column, table, true, isRowSelectionEnabled) : undefined
+		);
+	}
+
+	function selectionHeaderStyle() {
+		return isVirtual
+			? joinStyles(
+					virtualSelectionColumnSizeStyle(),
+					'min-width: 40px',
+					'max-width: 40px',
+					'position: sticky',
+					'left: 0',
+					'z-index: 30'
+				)
+			: 'width: 40px; min-width: 40px; max-width: 40px; position: sticky; left: 0; z-index: 15';
+	}
+
+	function headerRowStyle() {
+		if (!isVirtual) return undefined;
+		return joinStyles('display: flex', 'width: 100%');
+	}
+
+	function shouldRenderSelectionCheckbox(headerGroupIndex: number) {
+		if (!isMultiRowSelectionEnabled) return false;
+		return headerGroupIndex === headerGroupCount - 1;
+	}
+</script>
+
+<thead
+	class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim"
+	style={isVirtual ? 'display: grid; position: sticky; top: 0; z-index: 20' : undefined}
+>
+	{#each headerGroups as headerGroup, headerGroupIndex (headerGroup.id)}
+		{@const visibleHeaders = headerGroup.headers.filter((header) => header.colSpan > 0)}
+		<tr class="h-9" style={headerRowStyle()}>
+			{#if isRowSelectionEnabled}
+				<th
+					class={cn(
+						'h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 text-center align-middle leading-5 font-medium',
+						isVirtual && 'items-center justify-center'
+					)}
+					style={selectionHeaderStyle()}
+				>
+					{#if shouldRenderSelectionCheckbox(headerGroupIndex)}
+						<input
+							type="checkbox"
+							aria-label="Select all rows"
+							class="table-checkbox mx-auto block size-4"
+							checked={allRowsSelectionState === true}
+							indeterminate={allRowsSelectionState === 'indeterminate'}
+							onchange={(e) => table.toggleAllRowsSelected(e.currentTarget.checked)}
+						/>
+					{/if}
+				</th>
+			{/if}
+			{#each visibleHeaders as header, headerIndex (header.id)}
+				{@const columnDef = getColumnMeta(header.column.columnDef)}
+				{@const sortDirection = getHeaderSortDirection(header)}
+				<th
+					class={cn(
+						'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(columnDef?.align),
+						alignClass(columnDef?.align)
+					)}
+					colspan={header.colSpan}
+					aria-sort={header.column.getCanSort() ? getHeaderAriaSort(sortDirection) : undefined}
+					style={headerCellStyle(header)}
+				>
+					{#if !header.isPlaceholder}
+						{#if header.column.getCanSort()}
+							<button
+								type="button"
+								class={cn(
+									'inline-flex max-w-full appearance-none items-center gap-1 rounded-sm border-0 bg-transparent p-0 align-middle text-sm leading-5 text-inherit outline-none hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring',
+									justifyClass(columnDef?.align),
+									sortButtonDirectionClass(columnDef?.align)
+								)}
+								aria-label={`${getHeaderSortLabel(sortDirection)}. Toggle sorting.`}
+								onclick={header.column.getToggleSortingHandler()}
+							>
+								<span class="min-w-0 truncate">
+									<FlexRender
+										content={header.column.columnDef.header}
+										context={header.getContext()}
+									/>
+								</span>
+								<span
+									class="inline-flex size-3.5 shrink-0 items-center justify-center text-ink-dim"
+								>
+									{#if sortDirection === 'asc'}
+										<PhCaretUp class="size-3.5" />
+									{:else if sortDirection === 'desc'}
+										<PhCaretDown class="size-3.5" />
+									{/if}
+								</span>
+							</button>
+						{:else}
+							<FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+						{/if}
+					{/if}
+					{#if header.column.getCanResize()}
+						<div
+							aria-hidden="true"
+							class={resizeHandleClass(headerIndex, visibleHeaders.length)}
+							style={resizeHandleStyle(table, header)}
+							ondblclick={() => header.column.resetSize()}
+							onmousedown={header.getResizeHandler()}
+							ontouchstart={header.getResizeHandler()}
+						></div>
+					{/if}
+				</th>
+			{/each}
+			{#if !isVirtual && !hasGrowColumn}
+				<th aria-hidden="true" class="h-9 border-b border-surface-3 bg-surface-2 p-0"></th>
+			{/if}
+		</tr>
+	{/each}
+</thead>
+
+<style>
+	@import './data-table-checkbox.css';
+</style>

package/dist/components/{data-table → data-table-v8}/data-table-head.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { HeaderGroup, RowData } from '@tanstack/svelte-table';
-import type { DataTableFeatures, DataTableInstance } from './create-table';
+import type { HeaderGroup, RowData } from '@tanstack/table-core';
+import type { DataTableInstance } from './data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         table: DataTableInstance<T>;
-        headerGroups: HeaderGroup<DataTableFeatures, T>[];
+        headerGroups: HeaderGroup<T>[];
         headerGroupCount: number;
         isRowSelectionEnabled: boolean;
         isMultiRowSelectionEnabled: boolean;