compote-ui 0.37.0 → 0.38.1

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

@@ -0,0 +1,164 @@
+<script lang="ts" generics="T extends RowData">
+	import { FlexRender } from '@tanstack/svelte-table';
+	import type { HeaderGroup, RowData } from '@tanstack/svelte-table';
+	import { cn } from 'tailwind-variants';
+	import { PhCaretDown, PhCaretUp } from '../../icons';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import type { DataTableFeatures, DataTableInstance } from './create-table';
+	import {
+		alignClass,
+		getColumnMeta,
+		getHeaderAriaSort,
+		getHeaderSortDirection,
+		getHeaderSortLabel,
+		getPinningStyle,
+		joinStyles,
+		justifyClass,
+		resizeHandleClass,
+		resizeHandleStyle,
+		sortButtonDirectionClass,
+		virtualColumnSizeStyle,
+		virtualSelectionColumnSizeStyle
+	} from './data-table-utils';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		headerGroups: HeaderGroup<DataTableFeatures, T>[];
+		headerGroupCount: number;
+		isRowSelectionEnabled: boolean;
+		isMultiRowSelectionEnabled: boolean;
+		allRowsSelectionState: boolean | 'indeterminate';
+		isVirtual?: boolean;
+	};
+
+	let {
+		table,
+		headerGroups,
+		headerGroupCount,
+		isRowSelectionEnabled,
+		isMultiRowSelectionEnabled,
+		allRowsSelectionState,
+		isVirtual = false
+	}: Props = $props();
+
+	function headerCellStyle(header: HeaderGroup<DataTableFeatures, T>['headers'][number]) {
+		const canPinHeader = header.subHeaders.length === 0;
+
+		return joinStyles(
+			isVirtual ? virtualColumnSizeStyle(header.getSize()) : undefined,
+			canPinHeader ? getPinningStyle(header.column, 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)}
+						<Checkbox
+							size="sm"
+							aria-label="Select all rows"
+							class="mx-auto size-4"
+							checked={allRowsSelectionState}
+							onCheckedChange={({ checked }) => table.toggleAllRowsSelected(checked === true)}
+						/>
+					{/if}
+				</th>
+			{/if}
+			{#each visibleHeaders as header, headerIndex (header.id)}
+				{@const columnDef = getColumnMeta(header.column.columnDef)}
+				{@const sortDirection = getHeaderSortDirection(header, table.store.state.sorting)}
+				<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 {header} />
+								</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 {header} />
+						{/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}
+				<th aria-hidden="true" class="h-9 border-b border-surface-3 bg-surface-2 p-0"></th>
+			{/if}
+		</tr>
+	{/each}
+</thead>

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

@@ -0,0 +1,34 @@
+import type { HeaderGroup, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures, DataTableInstance } from './create-table';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        headerGroups: HeaderGroup<DataTableFeatures, T>[];
+        headerGroupCount: number;
+        isRowSelectionEnabled: boolean;
+        isMultiRowSelectionEnabled: boolean;
+        allRowsSelectionState: boolean | "indeterminate";
+        isVirtual?: 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/data-table-utils.d.ts

@@ -0,0 +1,34 @@
+import type { CellData, ColumnPinningPosition, Header, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures, DataTableInstance } from './create-table';
+import type { DataTableColumnMeta } from './types';
+export type DataTablePinnableColumn = {
+    getIsPinned(): ColumnPinningPosition;
+    getStart(position?: ColumnPinningPosition): number;
+    getAfter(position?: ColumnPinningPosition): number;
+    getIsLastColumn(position?: ColumnPinningPosition): boolean;
+    getIsFirstColumn(position?: ColumnPinningPosition): boolean;
+};
+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): string;
+export declare function resizeHandleStyle<T extends RowData>(table: DataTableInstance<T>, header: Header<DataTableFeatures, T, CellData>): string | undefined;
+export declare function resizeHandleClass(headerIndex: number, headerCount: number): import("tailwind-variants").CnReturn;
+export declare function getHeaderSortDirection<T extends RowData>(header: Header<DataTableFeatures, T, CellData>, sortingState: unknown): false | import("@tanstack/table-core").SortDirection;
+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 getAllRowsSelectionState<T extends RowData>(table: DataTableInstance<T>, rowSelection: unknown): boolean | "indeterminate";
+export declare function getRowSelectionState<T extends RowData>(table: DataTableInstance<T>, rowSelection: unknown, rowId: string): boolean;
+export declare function getSelectedRowCount<T extends RowData>(table: DataTableInstance<T>, rowSelection: unknown): number;
+export declare function getBooleanCellValue(value: unknown): boolean | undefined;
+export declare function getPinningStyle(column: DataTablePinnableColumn, isHeader?: boolean, 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;

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

@@ -0,0 +1,118 @@
+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) {
+    return `width: max(100%, ${table.getTotalSize() + (isRowSelectionEnabled ? 40 : 0)}px)`;
+}
+export function resizeHandleStyle(table, header) {
+    if (table.options.columnResizeMode !== 'onEnd')
+        return undefined;
+    const deltaOffset = table.store.state.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 getHeaderSortDirection(header, sortingState) {
+    void sortingState;
+    return header.column.getIsSorted();
+}
+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 getAllRowsSelectionState(table, rowSelection) {
+    void rowSelection;
+    const allRowsSelected = table.getIsAllRowsSelected();
+    const someRowsSelected = table.getIsSomeRowsSelected();
+    return allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false;
+}
+export function getRowSelectionState(table, rowSelection, rowId) {
+    void rowSelection;
+    return table.getRow(rowId).getIsSelected();
+}
+export function getSelectedRowCount(table, rowSelection) {
+    void rowSelection;
+    return table.getSelectedRowModel().rows.length;
+}
+export function getBooleanCellValue(value) {
+    if (value === true)
+        return true;
+    if (value === false)
+        return false;
+    return undefined;
+}
+export function getPinningStyle(column, isHeader = false, isRowSelectionEnabled = false) {
+    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 shadow = !isHeader && column.getIsLastColumn('left')
+            ? '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 shadow = !isHeader && column.getIsFirstColumn('right')
+            ? 'box-shadow: 4px 0 4px -4px var(--compote-border) inset'
+            : undefined;
+        return ['position: sticky', `z-index: ${zIndex}`, `right: ${right}px`, shadow]
+            .filter(Boolean)
+            .join('; ');
+    }
+}
+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('; ');
+}

package/dist/components/data-table/data-table-virtual-rows.svelte

@@ -0,0 +1,156 @@
+<script lang="ts" generics="T extends RowData">
+	import { FlexRender } from '@tanstack/svelte-table';
+	import type { Row, RowData } from '@tanstack/svelte-table';
+	import { createVirtualizer } from '@tanstack/svelte-virtual';
+	import { get } from 'svelte/store';
+	import { cn } from 'tailwind-variants';
+	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import type { DataTableFeatures, DataTableInstance } from './create-table';
+	import {
+		alignClass,
+		getBooleanCellValue,
+		getColumnMeta,
+		getPinningStyle,
+		getRowSelectionState,
+		getUrlCellValue,
+		joinStyles,
+		justifyClass,
+		openUrlCell,
+		virtualColumnSizeStyle,
+		virtualSelectionColumnSizeStyle
+	} from './data-table-utils';
+
+	type Props = {
+		rows: Row<DataTableFeatures, T>[];
+		scrollContainer: HTMLDivElement;
+		isRowSelectionEnabled: boolean;
+		table: DataTableInstance<T>;
+		emptyMessage: string;
+	};
+
+	let { rows, scrollContainer, isRowSelectionEnabled, table, emptyMessage }: Props = $props();
+
+	const rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+		get count() {
+			return rows.length;
+		},
+		estimateSize: () => 37,
+		getScrollElement: () => scrollContainer,
+		measureElement:
+			typeof window !== 'undefined' && !navigator.userAgent.includes('Firefox')
+				? (element) => element.getBoundingClientRect().height
+				: undefined,
+		overscan: 5
+	});
+
+	$effect(() => {
+		get(rowVirtualizer).setOptions({ count: rows.length });
+	});
+
+	function measureRowElement(node: HTMLTableRowElement) {
+		get(rowVirtualizer).measureElement(node);
+	}
+</script>
+
+<tbody style="display: grid; height: {$rowVirtualizer.getTotalSize()}px; position: relative">
+	{#if rows.length === 0}
+		<tr style="display: flex; position: absolute; width: 100%; top: 0">
+			<td class="px-3 py-10 text-center text-sm text-ink-dim" style="flex: 1">
+				{emptyMessage}
+			</td>
+		</tr>
+	{:else}
+		{#each $rowVirtualizer.getVirtualItems() as virtualRow (virtualRow.index)}
+			{@const row = rows[virtualRow.index]}
+			{@const rowSelected = getRowSelectionState(table, table.store.state.rowSelection, row.id)}
+			<tr
+				data-index={virtualRow.index}
+				use:measureRowElement
+				class={cn(
+					'group/row border-b border-surface-2 last:border-b-0',
+					'[--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))]'
+				)}
+				style="display: flex; position: absolute; transform: translateY({virtualRow.start}px); width: 100%"
+			>
+				{#if isRowSelectionEnabled}
+					<td
+						class="items-center justify-center bg-(--row-bg) px-3 py-2 text-center align-middle"
+						style={joinStyles(
+							virtualSelectionColumnSizeStyle(),
+							'position: sticky; left: 0; z-index: 1'
+						)}
+					>
+						<Checkbox
+							size="sm"
+							aria-label="Select row"
+							class="mx-auto size-4"
+							checked={rowSelected}
+							disabled={!row.getCanSelect()}
+							onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}
+						/>
+					</td>
+				{/if}
+				{#each row.getVisibleCells() as cell (cell.id)}
+					{@const columnDef = getColumnMeta(cell.column.columnDef)}
+					<td
+						class={cn(
+							'items-center truncate px-3 py-2',
+							alignClass(columnDef?.align),
+							justifyClass(columnDef?.align),
+							cell.column.getIsPinned() && 'bg-(--row-bg)'
+						)}
+						style={joinStyles(
+							virtualColumnSizeStyle(cell.column.getSize()),
+							getPinningStyle(cell.column, false, isRowSelectionEnabled)
+						)}
+					>
+						{#if columnDef?.type === 'boolean'}
+							{@const value = getBooleanCellValue(cell.getValue())}
+							{#if value === true}
+								<span
+									class="inline-flex size-5 items-center justify-center text-success"
+									role="img"
+									aria-label="Yes"
+								>
+									<PhCheck class="size-4" />
+								</span>
+							{:else if value === false}
+								<span
+									class="inline-flex size-5 items-center justify-center text-danger"
+									role="img"
+									aria-label="No"
+								>
+									<PhX class="size-4" />
+								</span>
+							{:else}
+								-
+							{/if}
+						{:else if columnDef?.type === 'url'}
+							{@const value = getUrlCellValue(cell.getValue())}
+							{#if value}
+								<button
+									type="button"
+									class={cn(
+										'inline-flex max-w-full appearance-none items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 align-middle leading-5 font-medium text-ink underline decoration-border decoration-dotted underline-offset-4 outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+										justifyClass(columnDef.align)
+									)}
+									onclick={() => openUrlCell(value)}
+								>
+									<PhArrowSquareOut class="size-3.5 shrink-0" />
+								</button>
+							{:else}
+								-
+							{/if}
+						{:else}
+							<FlexRender {cell} />
+						{/if}
+					</td>
+				{/each}
+			</tr>
+		{/each}
+	{/if}
+</tbody>

package/dist/components/data-table/data-table-virtual-rows.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Row, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures, DataTableInstance } from './create-table';
+declare function $$render<T extends RowData>(): {
+    props: {
+        rows: Row<DataTableFeatures, T>[];
+        scrollContainer: HTMLDivElement;
+        isRowSelectionEnabled: boolean;
+        table: DataTableInstance<T>;
+        emptyMessage: 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 DataTableVirtualRows: $$IsomorphicComponent;
+type DataTableVirtualRows<T extends RowData> = InstanceType<typeof DataTableVirtualRows<T>>;
+export default DataTableVirtualRows;

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

@@ -0,0 +1,101 @@
+<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 './create-table';
+	import DataTableHead from './data-table-head.svelte';
+	import DataTableVirtualRows from './data-table-virtual-rows.svelte';
+	import {
+		getAllRowsSelectionState,
+		getSelectedRowCount,
+		tableSizeStyle
+	} from './data-table-utils';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+		table: DataTableInstance<T>;
+		caption?: string;
+		emptyMessage?: string;
+		class?: ClassValue;
+	};
+
+	let {
+		table,
+		caption,
+		emptyMessage = 'No rows found',
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let scrollContainerRef = $state<HTMLDivElement | undefined>(undefined);
+
+	const tableStateKey = $derived(JSON.stringify(table.store.state));
+	function trackTableState() {
+		return tableStateKey;
+	}
+
+	const rowModel = $derived.by(() => {
+		trackTableState();
+		return table.getRowModel();
+	});
+	const headerGroups = $derived.by(() => {
+		trackTableState();
+		return table.getHeaderGroups();
+	});
+	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
+	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
+	const headerGroupCount = $derived(headerGroups.length);
+	const allRowsSelectionState = $derived(
+		getAllRowsSelectionState(table, table.store.state.rowSelection)
+	);
+	const selectedRowCount = $derived(getSelectedRowCount(table, table.store.state.rowSelection));
+	const isColumnResizing = $derived(table.store.state.columnResizing.isResizingColumn !== false);
+</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 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" bind:this={scrollContainerRef}>
+		<table
+			class="table-fixed border-separate border-spacing-0 text-sm"
+			style="display: grid; {tableSizeStyle(table, isRowSelectionEnabled)}"
+		>
+			{#if caption}
+				<caption class="sr-only">{caption}</caption>
+			{/if}
+			<DataTableHead
+				{table}
+				{headerGroups}
+				{headerGroupCount}
+				{isRowSelectionEnabled}
+				{isMultiRowSelectionEnabled}
+				{allRowsSelectionState}
+				isVirtual
+			/>
+			{#if scrollContainerRef}
+				<DataTableVirtualRows
+					rows={rowModel.rows}
+					scrollContainer={scrollContainerRef}
+					{isRowSelectionEnabled}
+					{table}
+					{emptyMessage}
+				/>
+			{/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 isRowSelectionEnabled}
+			{selectedRowCount} of {rowModel.rows.length} rows selected
+		{:else}
+			{rowModel.rows.length} rows
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,33 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ClassValue } from 'tailwind-variants';
+import { type DataTableInstance } from './create-table';
+declare function $$render<T extends RowData>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+        table: DataTableInstance<T>;
+        caption?: string;
+        emptyMessage?: string;
+        class?: ClassValue;
+    };
+    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 DataTableVirtualized: $$IsomorphicComponent;
+type DataTableVirtualized<T extends RowData> = InstanceType<typeof DataTableVirtualized<T>>;
+export default DataTableVirtualized;

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

@@ -1,12 +1,27 @@
 <script lang="ts" generics="T extends RowData">
 	import { FlexRender } from '@tanstack/svelte-table';
-	import type { CellData, ColumnPinningPosition, Header, RowData } from '@tanstack/svelte-table';
+	import type { RowData } from '@tanstack/svelte-table';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type ClassValue } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCaretDown, PhCaretUp, PhCheck, PhX } from '../../icons';
+	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
 	import Checkbox from '../checkbox/checkbox.svelte';
-	import { type DataTableFeatures, type DataTableInstance } from './create-table';
-	import type { DataTableColumnMeta } from './types';
+	import { type DataTableInstance } from './create-table';
+	import DataTableHead from './data-table-head.svelte';
+	import {
+		alignClass,
+		columnSizeStyle,
+		getAllRowsSelectionState,
+		getBooleanCellValue,
+		getColumnMeta,
+		getPinningStyle,
+		getRowSelectionState,
+		getSelectedRowCount,
+		getUrlCellValue,
+		justifyClass,
+		openUrlCell,
+		selectionColumnSizeStyle,
+		tableSizeStyle
+	} from './data-table-utils';
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
 		table: DataTableInstance<T>;
@@ -23,142 +38,6 @@
 		...rest
 	}: Props = $props();
 
-	function alignClass(align: DataTableColumnMeta['align']) {
-		return align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
-	}
-
-	function justifyClass(align: DataTableColumnMeta['align']) {
-		return align === 'right'
-			? 'justify-end'
-			: align === 'center'
-				? 'justify-center'
-				: 'justify-start';
-	}
-
-	function sortButtonDirectionClass(align: DataTableColumnMeta['align']) {
-		return align === 'right' ? 'flex-row-reverse' : 'flex-row';
-	}
-
-	function columnSizeStyle(size: number) {
-		return `width: ${size}px`;
-	}
-
-	function selectionColumnSizeStyle() {
-		return 'width: 40px';
-	}
-
-	function tableSizeStyle() {
-		return `width: max(100%, ${table.getTotalSize() + (isRowSelectionEnabled ? 40 : 0)}px)`;
-	}
-
-	function resizeHandleStyle(header: Header<DataTableFeatures, T, CellData>) {
-		if (table.options.columnResizeMode !== 'onEnd') return undefined;
-		const deltaOffset = table.store.state.columnResizing.deltaOffset;
-		if (!header.column.getIsResizing() || deltaOffset === null) return undefined;
-		return `transform: translateX(${deltaOffset}px)`;
-	}
-
-	function resizeHandleClass(headerIndex: number, headerCount: number) {
-		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'
-		);
-	}
-
-	function getHeaderSortDirection(
-		header: Header<DataTableFeatures, T, CellData>,
-		sortingState: unknown
-	) {
-		void sortingState;
-		return header.column.getIsSorted();
-	}
-
-	function getHeaderSortLabel(sortDirection: false | 'asc' | 'desc') {
-		if (sortDirection === 'asc') return 'Sorted ascending';
-		if (sortDirection === 'desc') return 'Sorted descending';
-		return 'Not sorted';
-	}
-
-	function getHeaderAriaSort(sortDirection: false | 'asc' | 'desc') {
-		if (sortDirection === 'asc') return 'ascending';
-		if (sortDirection === 'desc') return 'descending';
-		return 'none';
-	}
-
-	function getAllRowsSelectionState(rowSelection: unknown) {
-		void rowSelection;
-		const allRowsSelected = table.getIsAllRowsSelected();
-		const someRowsSelected = table.getIsSomeRowsSelected();
-		return allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false;
-	}
-
-	function getRowSelectionState(rowSelection: unknown, rowId: string) {
-		void rowSelection;
-		return table.getRow(rowId).getIsSelected();
-	}
-
-	function getSelectedRowCount(rowSelection: unknown) {
-		void rowSelection;
-		return table.getSelectedRowModel().rows.length;
-	}
-
-	function getBooleanCellValue(value: unknown) {
-		if (value === true) return true;
-		if (value === false) return false;
-		return undefined;
-	}
-
-	//	type PinPosition = 'center' | false | 'left' | 'right';
-	function getPinningStyle(
-		column: {
-			getIsPinned(): ColumnPinningPosition;
-			getStart(position?: ColumnPinningPosition): number;
-			getAfter(position?: ColumnPinningPosition): number;
-			getIsLastColumn(position?: ColumnPinningPosition): boolean;
-			getIsFirstColumn(position?: ColumnPinningPosition): boolean;
-		},
-		isHeader = false
-	): string | undefined {
-		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 shadow =
-				!isHeader && column.getIsLastColumn('left')
-					? '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 shadow =
-				!isHeader && column.getIsFirstColumn('right')
-					? '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 getUrlCellValue(value: unknown) {
-		if (typeof value !== 'string' || value.trim() === '') return undefined;
-		return value;
-	}
-
-	function openUrlCell(value: string) {
-		window.open(value, '_blank', 'noopener,noreferrer');
-	}
-
-	function getColumnMeta(columnDef: { meta?: unknown }): DataTableColumnMeta | undefined {
-		return columnDef.meta as DataTableColumnMeta | undefined;
-	}
-
 	const tableStateKey = $derived(JSON.stringify(table.store.state));
 	function trackTableState() {
 		return tableStateKey;
@@ -182,8 +61,10 @@
 	const tableColumnCount = $derived(visibleColumnCount + (isRowSelectionEnabled ? 1 : 0));
 	const renderedColumnCount = $derived(tableColumnCount + 1);
 	const headerGroupCount = $derived(headerGroups.length);
-	const allRowsSelectionState = $derived(getAllRowsSelectionState(table.store.state.rowSelection));
-	const selectedRowCount = $derived(getSelectedRowCount(table.store.state.rowSelection));
+	const allRowsSelectionState = $derived(
+		getAllRowsSelectionState(table, table.store.state.rowSelection)
+	);
+	const selectedRowCount = $derived(getSelectedRowCount(table, table.store.state.rowSelection));
 	const isColumnResizing = $derived(table.store.state.columnResizing.isResizingColumn !== false);
 </script>
 
@@ -199,7 +80,10 @@
 	{/if}
 
 	<div class="min-h-0 flex-1 overflow-auto">
-		<table class="table-fixed border-separate border-spacing-0 text-sm" style={tableSizeStyle()}>
+		<table
+			class="table-fixed border-separate border-spacing-0 text-sm"
+			style={tableSizeStyle(table, isRowSelectionEnabled)}
+		>
 			<colgroup>
 				{#if isRowSelectionEnabled}
 					<col style={selectionColumnSizeStyle()} />
@@ -212,92 +96,20 @@
 			{#if caption}
 				<caption class="sr-only">{caption}</caption>
 			{/if}
-			<thead class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim">
-				{#each headerGroups as headerGroup, headerGroupIndex (headerGroup.id)}
-					{@const visibleHeaders = headerGroup.headers.filter((header) => header.colSpan > 0)}
-					<tr class="h-9">
-						{#if isRowSelectionEnabled && headerGroupIndex === 0}
-							<th
-								class="h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 text-center align-middle leading-5 font-medium"
-								style="position: sticky; left: 0; z-index: 15"
-								rowspan={headerGroupCount}
-							>
-								{#if isMultiRowSelectionEnabled}
-									<Checkbox
-										size="sm"
-										aria-label="Select all rows"
-										class="mx-auto size-4"
-										checked={allRowsSelectionState}
-										onCheckedChange={({ checked }) => table.toggleAllRowsSelected(checked === true)}
-									/>
-								{/if}
-							</th>
-						{/if}
-						{#each visibleHeaders as header, headerIndex (header.id)}
-							{@const columnDef = getColumnMeta(header.column.columnDef)}
-							{@const sortDirection = getHeaderSortDirection(header, table.store.state.sorting)}
-							<th
-								class={cn(
-									'relative h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 align-middle leading-5 font-medium',
-									alignClass(columnDef?.align)
-								)}
-								colspan={header.colSpan}
-								aria-sort={header.column.getCanSort()
-									? getHeaderAriaSort(sortDirection)
-									: undefined}
-								style={getPinningStyle(header.column, true)}
-							>
-								{#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 {header} />
-											</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 {header} />
-									{/if}
-								{/if}
-								{#if header.column.getCanResize()}
-									<div
-										aria-hidden="true"
-										class={resizeHandleClass(headerIndex, visibleHeaders.length)}
-										style={resizeHandleStyle(header)}
-										ondblclick={() => header.column.resetSize()}
-										onmousedown={header.getResizeHandler()}
-										ontouchstart={header.getResizeHandler()}
-									></div>
-								{/if}
-							</th>
-						{/each}
-						<th aria-hidden="true" class="h-9 border-b border-surface-3 bg-surface-2 p-0"></th>
-					</tr>
-				{/each}
-			</thead>
+			<DataTableHead
+				{table}
+				{headerGroups}
+				{headerGroupCount}
+				{isRowSelectionEnabled}
+				{isMultiRowSelectionEnabled}
+				{allRowsSelectionState}
+			/>
 			<tbody>
 				{#each rowModel.rows as row (row.id)}
-					{@const rowSelected = getRowSelectionState(table.store.state.rowSelection, row.id)}
+					{@const rowSelected = getRowSelectionState(table, table.store.state.rowSelection, row.id)}
 					<tr
 						class={cn(
-							'group/row border-b border-surface-3 last:border-b-0',
+							'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 &&
@@ -306,7 +118,7 @@
 					>
 						{#if isRowSelectionEnabled}
 							<td
-								class="bg-(--row-bg) px-3 py-2 text-center align-middle"
+								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"
 							>
 								<Checkbox
@@ -323,11 +135,11 @@
 							{@const columnDef = getColumnMeta(cell.column.columnDef)}
 							<td
 								class={cn(
-									'truncate px-3 py-2',
+									'truncate border-b border-b-surface-2 px-3 py-2 group-last/row:border-b-0',
 									alignClass(columnDef?.align),
 									cell.column.getIsPinned() && 'bg-(--row-bg)'
 								)}
-								style={getPinningStyle(cell.column)}
+								style={getPinningStyle(cell.column, false, isRowSelectionEnabled)}
 							>
 								{#if columnDef?.type === 'boolean'}
 									{@const value = getBooleanCellValue(cell.getValue())}
@@ -371,7 +183,8 @@
 								{/if}
 							</td>
 						{/each}
-						<td aria-hidden="true" class="p-0"></td>
+						<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
+						></td>
 					</tr>
 				{:else}
 					<tr>

package/dist/components/data-table/virtual/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Root } from '../data-table-virtualized.svelte';
+export { ColumnFilter, ColumnVisibility, Title, Toolbar, createDataTableColumnHelper, createTable } from '../index';
+export type { CreateDataTableOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableFeatures, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase } from '../index';

package/dist/components/data-table/virtual/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from '../data-table-virtualized.svelte';
+export { ColumnFilter, ColumnVisibility, Title, Toolbar, createDataTableColumnHelper, createTable } from '../index';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.37.0",
+	"version": "0.38.1",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -33,15 +33,23 @@
 			"types": "./dist/components/data-table/index.d.ts",
 			"svelte": "./dist/components/data-table/index.js"
 		},
+		"./data-table/virtual": {
+			"types": "./dist/components/data-table/virtual/index.d.ts",
+			"svelte": "./dist/components/data-table/virtual/index.js"
+		},
 		"./theme.css": "./dist/theme.css"
 	},
 	"peerDependencies": {
 		"@tanstack/svelte-table": "^9.0.0-alpha.45",
+		"@tanstack/svelte-virtual": ">=3.0.0",
 		"svelte": "^5.0.0"
 	},
 	"peerDependenciesMeta": {
 		"@tanstack/svelte-table": {
 			"optional": true
+		},
+		"@tanstack/svelte-virtual": {
+			"optional": true
 		}
 	},
 	"devDependencies": {
@@ -54,6 +62,7 @@
 		"@sveltejs/vite-plugin-svelte": "7.1.2",
 		"@tailwindcss/vite": "^4.2.4",
 		"@tanstack/svelte-table": "9.0.0-alpha.45",
+		"@tanstack/svelte-virtual": "^3.13.24",
 		"@types/node": "^22.19.18",
 		"eslint": "^10.2.1",
 		"eslint-config-prettier": "^10.1.8",
@@ -80,7 +89,7 @@
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@iconify/svelte": "^5.2.1",
 		"runed": "^0.37.1",
-		"tailwind-merge": "^3.5.0",
+		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2"
 	}
 }