compote-ui 0.55.4 → 0.56.0

package/dist/components/{data-table/data-table-head.svelte.md → data-table-v9/data-table-head.svelte}

@@ -1,15 +1,16 @@
 <script lang="ts" generics="T extends RowData">
-	import { FlexRender } from '@tanstack/svelte-table';
 	import type { HeaderGroup, RowData } from '@tanstack/svelte-table';
+	import { FlexRender } from '@tanstack/svelte-table';
 	import { cn } from 'tailwind-variants';
-	import { PhCaretDown, PhCaretUp } from '$lib/icons';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import type { DataTableFeatures, DataTableInstance } from './create-table';
+	import { PhCaretDown, PhCaretUp } from '../../icons';
+	import type { DataTableInstance } from './data-table-utils';
+	import type { DataTableViewState } from './table-view-state.svelte';
+	import type { DataTableFeatures } from './features';
 	import {
 		alignClass,
 		getColumnMeta,
+		getGroupPinningStyle,
 		getHeaderAriaSort,
-		getHeaderSortDirection,
 		getHeaderSortLabel,
 		getPinningStyle,
 		joinStyles,
@@ -25,25 +26,12 @@
 
 	type Props = {
 		table: DataTableInstance<T>;
-		headerGroups: HeaderGroup<DataTableFeatures, T>[];
-		headerGroupCount: number;
-		isRowSelectionEnabled: boolean;
-		isMultiRowSelectionEnabled: boolean;
-		allRowsSelectionState: boolean | 'indeterminate';
+		view: DataTableViewState<T>;
 		isVirtual?: boolean;
 		hasGrowColumn?: boolean;
 	};
 
-	let {
-		table,
-		headerGroups,
-		headerGroupCount,
-		isRowSelectionEnabled,
-		isMultiRowSelectionEnabled,
-		allRowsSelectionState,
-		isVirtual = false,
-		hasGrowColumn = false
-	}: Props = $props();
+	let { table, view, isVirtual = false, hasGrowColumn = false }: Props = $props();
 
 	type Header = HeaderGroup<DataTableFeatures, T>['headers'][number];
 
@@ -58,11 +46,17 @@
 		return undefined;
 	}
 
+	function headerSortDirection(header: Header) {
+		void view.sorting;
+		return header.column.getIsSorted();
+	}
+
 	function headerCellStyle(header: Header) {
 		const canPinHeader = header.subHeaders.length === 0;
 
 		let virtualSizeStyle: string | undefined;
 		if (isVirtual) {
+			void view.columnSizing;
 			const isGrowLeaf = canPinHeader && getColumnMeta(header.column.columnDef)?.grow;
 			if (isGrowLeaf) {
 				virtualSizeStyle = virtualGrowColumnSizeStyle();
@@ -76,7 +70,14 @@
 
 		return joinStyles(
 			virtualSizeStyle,
-			canPinHeader ? getPinningStyle(header.column, true, isRowSelectionEnabled) : undefined
+			canPinHeader
+				? getPinningStyle(header.column, table, view, true, view.isRowSelectionEnabled)
+				: getGroupPinningStyle(
+						header,
+						view.getHeaderSection(header),
+						view,
+						view.isRowSelectionEnabled
+					)
 		);
 	}
 
@@ -99,8 +100,8 @@
 	}
 
 	function shouldRenderSelectionCheckbox(headerGroupIndex: number) {
-		if (!isMultiRowSelectionEnabled) return false;
-		return headerGroupIndex === headerGroupCount - 1;
+		if (!view.isMultiRowSelectionEnabled) return false;
+		return headerGroupIndex === view.headerGroups.length - 1;
 	}
 </script>
 
@@ -108,11 +109,12 @@
 	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)}
+	{#each view.headerGroups as headerGroup, headerGroupIndex (`${headerGroup.id}:${headerGroup.headers.map((header) => `${header.id}:${header.colSpan}`).join('|')}`)}
 		{@const visibleHeaders = headerGroup.headers.filter((header) => header.colSpan > 0)}
 		<tr class="h-9" style={headerRowStyle()}>
-			{#if isRowSelectionEnabled}
+			{#if view.isRowSelectionEnabled}
 				<th
+					scope="col"
 					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'
@@ -120,25 +122,29 @@
 					style={selectionHeaderStyle()}
 				>
 					{#if shouldRenderSelectionCheckbox(headerGroupIndex)}
-						<Checkbox
-							size="sm"
+						<input
+							type="checkbox"
 							aria-label="Select all rows"
-							class="mx-auto size-4"
-							checked={allRowsSelectionState}
-							onCheckedChange={({ checked }) => table.toggleAllRowsSelected(checked === true)}
+							class="table-checkbox mx-auto block size-4"
+							checked={view.allRowsSelectionState === true}
+							indeterminate={view.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, table.store.state.sorting)}
+			{#each visibleHeaders as header, headerIndex (`${header.id}:${view.getHeaderSection(header) ?? ''}:${header.colSpan}:${header.column.getIsVisible()}`)}
+				{@const meta = getColumnMeta(header.column.columnDef)}
+				{@const sortDirection = headerSortDirection(header)}
+				{@const continuesInNextFragment =
+					visibleHeaders[headerIndex + 1]?.column.id === header.column.id}
 				<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',
 						isVirtual && 'items-center',
-						isVirtual && justifyClass(columnDef?.align),
-						alignClass(columnDef?.align)
+						isVirtual && justifyClass(meta?.align),
+						alignClass(meta?.align)
 					)}
 					colspan={header.colSpan}
 					aria-sort={header.column.getCanSort() ? getHeaderAriaSort(sortDirection) : undefined}
@@ -150,8 +156,8 @@
 								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)
+									justifyClass(meta?.align),
+									sortButtonDirectionClass(meta?.align)
 								)}
 								aria-label={`${getHeaderSortLabel(sortDirection)}. Toggle sorting.`}
 								onclick={header.column.getToggleSortingHandler()}
@@ -173,11 +179,13 @@
 							<FlexRender {header} />
 						{/if}
 					{/if}
-					{#if header.column.getCanResize()}
+					<!-- 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}
 						<div
 							aria-hidden="true"
 							class={resizeHandleClass(headerIndex, visibleHeaders.length)}
-							style={resizeHandleStyle(table, header)}
+							style={resizeHandleStyle(table, header, view.columnResizing)}
 							ondblclick={() => header.column.resetSize()}
 							onmousedown={header.getResizeHandler()}
 							ontouchstart={header.getResizeHandler()}

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

@@ -0,0 +1,32 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTableInstance } from './data-table-utils';
+import type { DataTableViewState } from './table-view-state.svelte';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        view: DataTableViewState<T>;
+        isVirtual?: boolean;
+        hasGrowColumn?: boolean;
+    };
+    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 DataTableHead: $$IsomorphicComponent;
+type DataTableHead<T extends RowData> = InstanceType<typeof DataTableHead<T>>;
+export default DataTableHead;

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ClassValue } from 'tailwind-variants';
+type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> & {
+    class?: ClassValue;
+    children?: Snippet;
+};
+declare const DataTableTitle: import("svelte").Component<Props, {}, "">;
+type DataTableTitle = ReturnType<typeof DataTableTitle>;
+export default DataTableTitle;

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

@@ -0,0 +1,53 @@
+import type { Column, ColumnPinningState, ColumnSizingState, ColumnVisibilityState, Header, Row, RowData, SvelteTable, TableState } from '@tanstack/svelte-table';
+import type { DataTableColumnMeta } from './types';
+import type { DataTableFeatures } from './features';
+export type DataTableInstance<T extends RowData> = SvelteTable<DataTableFeatures, T>;
+export type DataTableTrackedState = {
+    columnPinning: ColumnPinningState;
+    columnResizing: TableState<DataTableFeatures>['columnResizing'];
+    columnSizing: ColumnSizingState;
+    columnVisibility: ColumnVisibilityState;
+};
+export declare function alignClass(align: DataTableColumnMeta['align']): "text-right" | "text-center" | "text-left";
+export declare function justifyClass(align: DataTableColumnMeta['align']): "justify-end" | "justify-center" | "justify-start";
+export declare function sortButtonDirectionClass(align: DataTableColumnMeta['align']): "flex-row-reverse" | "flex-row";
+export declare function columnSizeStyle(size: number): string;
+export declare function selectionColumnSizeStyle(): string;
+export declare function virtualColumnSizeStyle(size: number): string;
+export declare function virtualSelectionColumnSizeStyle(): string;
+export declare function tableSizeStyle<T extends RowData>(table: DataTableInstance<T>, isRowSelectionEnabled: boolean, state: DataTableTrackedState): string;
+export declare function virtualGrowColumnSizeStyle(): string;
+export declare function virtualGroupWithGrowSizeStyle(fixedPortion: number): string;
+export declare function resizeHandleStyle<T extends RowData>(table: DataTableInstance<T>, header: Header<DataTableFeatures, T, unknown>, columnResizing: TableState<DataTableFeatures>['columnResizing']): string | undefined;
+export declare function resizeHandleClass(headerIndex: number, headerCount: number): import("tailwind-variants").CnReturn;
+export declare function getHeaderSortLabel(sortDirection: false | 'asc' | 'desc'): "Sorted ascending" | "Sorted descending" | "Not sorted";
+export declare function getHeaderAriaSort(sortDirection: false | 'asc' | 'desc'): "none" | "ascending" | "descending";
+export declare function getRowCells<T extends RowData>(row: Row<DataTableFeatures, T>, state: DataTableTrackedState): import("@tanstack/svelte-table").Cell_Core<{
+    rowSortingFeature: import("@tanstack/svelte-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/svelte-table").TableFeature;
+    columnFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+    columnFacetingFeature: import("@tanstack/svelte-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/svelte-table").TableFeature;
+    columnPinningFeature: import("@tanstack/svelte-table").TableFeature;
+    columnSizingFeature: import("@tanstack/svelte-table").TableFeature;
+    columnResizingFeature: import("@tanstack/svelte-table").TableFeature;
+}, T, unknown>[];
+export declare function getBooleanCellValue(value: unknown): boolean | undefined;
+export declare function getPinningStyle<T extends RowData>(column: Column<DataTableFeatures, T, unknown>, table: DataTableInstance<T>, state: DataTableTrackedState, isHeader?: boolean, isRowSelectionEnabled?: boolean): string | undefined;
+/**
+ * Sticky positioning for a group header whose leaf columns are pinned.
+ *
+ * A split fragment's subHeaders contain only its own section's children, so the
+ * fragment over the pinned columns sticks at the first/last pinned leaf's offset
+ * while the fragment over the scrolling columns gets no style.
+ */
+export declare function getGroupPinningStyle<T extends RowData>(header: Header<DataTableFeatures, T, unknown>, section: 'left' | 'center' | 'right' | undefined, state: DataTableTrackedState, isRowSelectionEnabled?: boolean): string | undefined;
+export declare function getUrlCellValue(value: unknown): string | undefined;
+export declare function openUrlCell(value: string): void;
+export declare function getColumnMeta(columnDef: {
+    meta?: unknown;
+}): DataTableColumnMeta | undefined;
+export declare function joinStyles(...styles: Array<string | undefined>): string;
+export declare const TYPE_NUMBER_FORMAT_DEFAULTS: Partial<Record<string, Intl.NumberFormatOptions>>;
+export declare function formatColumnFooter(meta: DataTableColumnMeta, values: unknown[], locale: string): string | undefined;

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

@@ -0,0 +1,181 @@
+import { cn } from 'tailwind-variants';
+export function alignClass(align) {
+    return align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+}
+export function justifyClass(align) {
+    return align === 'right'
+        ? 'justify-end'
+        : align === 'center'
+            ? 'justify-center'
+            : 'justify-start';
+}
+export function sortButtonDirectionClass(align) {
+    return align === 'right' ? 'flex-row-reverse' : 'flex-row';
+}
+export function columnSizeStyle(size) {
+    return `width: ${size}px`;
+}
+export function selectionColumnSizeStyle() {
+    return 'width: 40px';
+}
+export function virtualColumnSizeStyle(size) {
+    return `display: flex; flex: 0 0 ${size}px; width: ${size}px`;
+}
+export function virtualSelectionColumnSizeStyle() {
+    return 'display: flex; flex: 0 0 40px; width: 40px';
+}
+export function tableSizeStyle(table, isRowSelectionEnabled, state) {
+    void state.columnSizing;
+    void state.columnVisibility;
+    return `width: max(100%, ${table.getTotalSize() + (isRowSelectionEnabled ? 40 : 0)}px)`;
+}
+export function virtualGrowColumnSizeStyle() {
+    return 'display: flex; flex: 1; min-width: 0';
+}
+export function virtualGroupWithGrowSizeStyle(fixedPortion) {
+    return `display: flex; flex: 1 0 ${fixedPortion}px; width: ${fixedPortion}px`;
+}
+export function resizeHandleStyle(table, header, columnResizing) {
+    if (table.options.columnResizeMode !== 'onEnd')
+        return undefined;
+    const deltaOffset = columnResizing.deltaOffset;
+    if (!header.column.getIsResizing() || deltaOffset === null)
+        return undefined;
+    return `transform: translateX(${deltaOffset}px)`;
+}
+export function resizeHandleClass(headerIndex, headerCount) {
+    return cn('absolute top-0 z-10 flex h-full w-2 cursor-col-resize touch-none items-center justify-center select-none before:h-4 before:w-px before:bg-border before:content-[""]', headerIndex === headerCount - 1 ? 'right-0' : '-right-1');
+}
+export function getHeaderSortLabel(sortDirection) {
+    if (sortDirection === 'asc')
+        return 'Sorted ascending';
+    if (sortDirection === 'desc')
+        return 'Sorted descending';
+    return 'Not sorted';
+}
+export function getHeaderAriaSort(sortDirection) {
+    if (sortDirection === 'asc')
+        return 'ascending';
+    if (sortDirection === 'desc')
+        return 'descending';
+    return 'none';
+}
+export function getRowCells(row, state) {
+    void state.columnVisibility;
+    void state.columnPinning;
+    void state.columnSizing;
+    return [
+        ...row.getLeftVisibleCells(),
+        ...row.getCenterVisibleCells(),
+        ...row.getRightVisibleCells()
+    ];
+}
+export function getBooleanCellValue(value) {
+    if (value === true)
+        return true;
+    if (value === false)
+        return false;
+    return undefined;
+}
+export function getPinningStyle(column, table, state, isHeader = false, isRowSelectionEnabled = false) {
+    void state.columnPinning;
+    void state.columnSizing;
+    const isPinned = column.getIsPinned();
+    if (!isPinned)
+        return undefined;
+    const zIndex = isHeader ? 15 : 1;
+    const selectionOffset = isRowSelectionEnabled ? 40 : 0;
+    if (isPinned === 'left') {
+        const left = column.getStart('left') + selectionOffset;
+        const leftCols = table.getLeftLeafColumns();
+        const isLastLeft = leftCols[leftCols.length - 1]?.id === column.id;
+        const shadow = !isHeader && isLastLeft
+            ? 'box-shadow: -4px 0 4px -4px var(--compote-border) inset'
+            : undefined;
+        return ['position: sticky', `z-index: ${zIndex}`, `left: ${left}px`, shadow]
+            .filter(Boolean)
+            .join('; ');
+    }
+    else {
+        const right = column.getAfter('right');
+        const rightCols = table.getRightLeafColumns();
+        const isFirstRight = rightCols[0]?.id === column.id;
+        const shadow = !isHeader && isFirstRight
+            ? 'box-shadow: 4px 0 4px -4px var(--compote-border) inset'
+            : undefined;
+        return ['position: sticky', `z-index: ${zIndex}`, `right: ${right}px`, shadow]
+            .filter(Boolean)
+            .join('; ');
+    }
+}
+function collectLeafHeaders(header) {
+    if (header.subHeaders.length === 0)
+        return [header];
+    return header.subHeaders.flatMap((sub) => collectLeafHeaders(sub));
+}
+/**
+ * Sticky positioning for a group header whose leaf columns are pinned.
+ *
+ * A split fragment's subHeaders contain only its own section's children, so the
+ * fragment over the pinned columns sticks at the first/last pinned leaf's offset
+ * while the fragment over the scrolling columns gets no style.
+ */
+export function getGroupPinningStyle(header, section, state, isRowSelectionEnabled = false) {
+    void state.columnPinning;
+    void state.columnSizing;
+    if (section !== 'left' && section !== 'right')
+        return undefined;
+    const leafHeaders = collectLeafHeaders(header);
+    if (section === 'left') {
+        const first = leafHeaders[0];
+        if (first?.column.getIsPinned() !== 'left')
+            return undefined;
+        const left = first.column.getStart('left') + (isRowSelectionEnabled ? 40 : 0);
+        return `position: sticky; z-index: 15; left: ${left}px`;
+    }
+    const last = leafHeaders[leafHeaders.length - 1];
+    if (last?.column.getIsPinned() !== 'right')
+        return undefined;
+    return `position: sticky; z-index: 15; right: ${last.column.getAfter('right')}px`;
+}
+export function getUrlCellValue(value) {
+    if (typeof value !== 'string' || value.trim() === '')
+        return undefined;
+    return value;
+}
+export function openUrlCell(value) {
+    window.open(value, '_blank', 'noopener,noreferrer');
+}
+export function getColumnMeta(columnDef) {
+    return columnDef.meta;
+}
+export function joinStyles(...styles) {
+    return styles.filter(Boolean).join('; ');
+}
+// Shared with the cell formatter in create-table.svelte.ts — keep number-typed
+// columns and their footer sums formatted identically.
+export const TYPE_NUMBER_FORMAT_DEFAULTS = {
+    currency: { style: 'currency', currency: 'USD' },
+    percent: { style: 'percent' },
+    number: {}
+};
+export function formatColumnFooter(meta, values, locale) {
+    if (meta.footer) {
+        const result = meta.footer(values);
+        if (result === null || result === undefined)
+            return undefined;
+        return String(result);
+    }
+    if (meta.sum) {
+        const sum = values.reduce((acc, val) => acc + (typeof val === 'number' ? val : Number(val) || 0), 0);
+        const numDefaults = meta.type ? TYPE_NUMBER_FORMAT_DEFAULTS[meta.type] : undefined;
+        if (numDefaults !== undefined) {
+            return new Intl.NumberFormat(meta.formatLocale ?? locale, {
+                ...numDefaults,
+                ...meta.formatOptions
+            }).format(sum);
+        }
+        return String(sum);
+    }
+    return undefined;
+}

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

@@ -0,0 +1,151 @@
+<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(
+									'truncate border-b border-b-surface-2 px-3 py-2 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

@@ -0,0 +1,41 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ClassValue } from 'tailwind-variants';
+import type { DataTableInstance } from './data-table-utils';
+declare function $$render<T extends RowData>(): {
+    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;
+    };
+    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 DataTable: $$IsomorphicComponent;
+type DataTable<T extends RowData> = InstanceType<typeof DataTable<T>>;
+export default DataTable;

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

@@ -0,0 +1,12 @@
+export declare const dataTableFeatures: {
+    rowSortingFeature: import("@tanstack/svelte-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/svelte-table").TableFeature;
+    columnFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+    columnFacetingFeature: import("@tanstack/svelte-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/svelte-table").TableFeature;
+    columnPinningFeature: import("@tanstack/svelte-table").TableFeature;
+    columnSizingFeature: import("@tanstack/svelte-table").TableFeature;
+    columnResizingFeature: import("@tanstack/svelte-table").TableFeature;
+};
+export type DataTableFeatures = typeof dataTableFeatures;