compote-ui 0.55.4 → 0.56.0

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

@@ -0,0 +1,29 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTableInstance } from '../data-table-utils';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        triggerLabel?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableColumnFilter: $$IsomorphicComponent;
+type DataTableColumnFilter<T extends RowData> = InstanceType<typeof DataTableColumnFilter<T>>;
+export default DataTableColumnFilter;

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

@@ -0,0 +1,73 @@
+<script lang="ts" generics="T extends RowData">
+	import type { RowData } from '@tanstack/svelte-table';
+	import * as Popover from '../../popover';
+	import * as ScrollArea from '../../scroll-area';
+	import Checkbox from '../../checkbox/checkbox.svelte';
+	import type { DataTableInstance } from '../data-table-utils';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		triggerLabel?: string;
+	};
+
+	let { table, triggerLabel = 'Columns' }: Props = $props();
+
+	const columnVisibility = $derived.by(() => table.atoms.columnVisibility.get());
+	const allLeafColumns = $derived.by(() => {
+		void columnVisibility;
+		return table.getAllLeafColumns();
+	});
+	const allColumnsVisible = $derived(
+		allLeafColumns.every((c) => !c.getCanHide() || columnVisibility[c.id] !== false)
+	);
+	const someColumnsVisible = $derived(
+		allLeafColumns.some((c) => c.getCanHide() && columnVisibility[c.id] !== false)
+	);
+	const allColumnsVisibilityState = $derived(
+		allColumnsVisible ? true : someColumnsVisible ? ('indeterminate' as const) : false
+	);
+
+	function getColumnLabel(column: { columnDef: { header?: unknown }; id: string }) {
+		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+	}
+</script>
+
+<Popover.Root positioning={{ placement: 'bottom-end' }}>
+	<Popover.Trigger
+		class="flex h-9 cursor-pointer items-center rounded-md border border-surface-3 bg-surface-1 px-3 text-sm font-medium text-ink shadow-sm outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+	>
+		{triggerLabel}
+	</Popover.Trigger>
+
+	<Popover.Content class="w-56 p-2" showArrow={false}>
+		<div class="border-b border-surface-3 px-2 pb-2">
+			<Checkbox
+				label="All columns"
+				checked={allColumnsVisibilityState}
+				onCheckedChange={({ checked }) => table.toggleAllColumnsVisible(checked === true)}
+			/>
+		</div>
+
+		<ScrollArea.Root class="h-72">
+			<ScrollArea.Viewport>
+				<ScrollArea.Content class="py-1 pe-3">
+					<div class="flex flex-col">
+						{#each allLeafColumns as column (column.id)}
+							<Checkbox
+								label={getColumnLabel(column)}
+								class="min-h-8 rounded-sm px-2 hover:bg-surface-2"
+								checked={columnVisibility[column.id] !== false}
+								disabled={!column.getCanHide()}
+								onCheckedChange={({ checked }) => column.toggleVisibility(checked === true)}
+							/>
+						{/each}
+					</div>
+				</ScrollArea.Content>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar orientation="vertical">
+				<ScrollArea.Thumb />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner />
+		</ScrollArea.Root>
+	</Popover.Content>
+</Popover.Root>

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

@@ -0,0 +1,29 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTableInstance } from '../data-table-utils';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        triggerLabel?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableColumnVisibility: $$IsomorphicComponent;
+type DataTableColumnVisibility<T extends RowData> = InstanceType<typeof DataTableColumnVisibility<T>>;
+export default DataTableColumnVisibility;

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

@@ -0,0 +1,58 @@
+<script lang="ts" generics="T extends RowData">
+	import { onDestroy } from 'svelte';
+	import type { RowData } from '@tanstack/svelte-table';
+	import { cn, type ClassValue } from 'tailwind-variants';
+	import { PhMagnifyingGlass, PhX } from '../../../icons';
+	import * as Field from '../../field';
+	import type { DataTableInstance } from '../data-table-utils';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		placeholder?: string;
+		class?: ClassValue;
+		debounceMs?: number;
+	};
+
+	let { table, placeholder = 'Search...', class: className, debounceMs = 300 }: Props = $props();
+
+	const globalFilter = $derived.by(
+		() => (table.atoms.globalFilter.get() as string | undefined) ?? ''
+	);
+
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	onDestroy(() => clearTimeout(timer));
+
+	function handleInput(e: Event) {
+		const value = (e.currentTarget as HTMLInputElement).value;
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			table.setGlobalFilter(value || undefined);
+		}, debounceMs);
+	}
+
+	function clearFilter() {
+		clearTimeout(timer);
+		table.setGlobalFilter(undefined);
+	}
+</script>
+
+<Field.Root class={cn(className)}>
+	<Field.Input {placeholder} value={globalFilter} oninput={handleInput}>
+		{#snippet startIcon()}
+			<PhMagnifyingGlass class="size-4" />
+		{/snippet}
+		{#snippet endIcon()}
+			{#if globalFilter}
+				<button
+					type="button"
+					onclick={clearFilter}
+					aria-label="Clear search"
+					class="flex size-5 items-center justify-center rounded text-ink-dim hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
+				>
+					<PhX class="size-3.5" />
+				</button>
+			{/if}
+		{/snippet}
+	</Field.Input>
+</Field.Root>

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

@@ -0,0 +1,32 @@
+import type { RowData } from '@tanstack/svelte-table';
+import { type ClassValue } from 'tailwind-variants';
+import type { DataTableInstance } from '../data-table-utils';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        placeholder?: string;
+        class?: ClassValue;
+        debounceMs?: number;
+    };
+    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 DataTableSearch: $$IsomorphicComponent;
+type DataTableSearch<T extends RowData> = InstanceType<typeof DataTableSearch<T>>;
+export default DataTableSearch;

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

@@ -21,20 +21,19 @@
 		{@render children?.()}
 	</div>
 
-    {#if center}
-    	<div
-    		class="col-start-2 row-start-1 flex min-w-0 flex-wrap items-center justify-center gap-3 justify-self-center"
-    	>
-    		{@render center()}
-    	</div>
-    {/if}
-
-    {#if right}
-    	<div
-    		class="col-start-3 row-start-1 flex min-w-0 flex-wrap items-center justify-end gap-3 justify-self-end"
-    	>
-    		{@render right()}
-    	</div>
-    {/if}
+	{#if center}
+		<div
+			class="col-start-2 row-start-1 flex min-w-0 flex-wrap items-center justify-center gap-3 justify-self-center"
+		>
+			{@render center()}
+		</div>
+	{/if}
 
+	{#if right}
+		<div
+			class="col-start-3 row-start-1 flex min-w-0 flex-wrap items-center justify-end gap-3 justify-self-end"
+		>
+			{@render right()}
+		</div>
+	{/if}
 </div>

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

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

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

@@ -0,0 +1,74 @@
+import type { FilterFnOption, RowData } from '@tanstack/svelte-table';
+import type { Component, Snippet } from 'svelte';
+import type { DataTableFeatures } from './features';
+export type DataTableAlign = 'left' | 'center' | 'right';
+export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url' | 'date' | 'time' | 'date-time';
+export type DataTableCellRenderer<T extends RowData> = (value: unknown, row: T) => string | number | boolean | null | undefined;
+export type DataTableCellRenderProps<T extends RowData> = {
+    value: unknown;
+    row: T;
+};
+export type DataTableCellPropsResolver<T extends RowData> = (value: unknown, row: T) => Record<string, unknown>;
+export type DataTableColumnOptions<T extends RowData> = {
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    enableResizing?: boolean;
+    enableHiding?: boolean;
+    enableSorting?: boolean;
+    sortDescFirst?: boolean;
+    enableColumnFilter?: boolean;
+    filterFn?: FilterFnOption<DataTableFeatures, T>;
+};
+export type DataTableColumnBase = {
+    header: string;
+    align?: DataTableAlign;
+};
+export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<T> & DataTableColumnBase & {
+    cell?: DataTableCellRenderer<T>;
+    cellComponent?: Component<DataTableCellRenderProps<T>> | Component<never>;
+    cellProps?: DataTableCellPropsResolver<T>;
+    cellSnippet?: Snippet<[DataTableCellRenderProps<T>]>;
+    type?: DataTableColumnType;
+    formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
+    formatLocale?: string;
+    pinned?: 'left' | 'right';
+    grow?: boolean;
+    sum?: boolean;
+    footer?: (values: unknown[]) => string | number | undefined;
+    columns?: never;
+};
+export type DataTableAccessorKeyColumn<T extends RowData> = DataTableLeafColumnBase<T> & {
+    accessorKey: Extract<keyof T, string>;
+    id?: string;
+    accessorFn?: never;
+};
+export type DataTableAccessorFnColumn<T extends RowData> = DataTableLeafColumnBase<T> & {
+    accessorFn: (row: T) => unknown;
+    id: string;
+    accessorKey?: never;
+};
+export type DataTableLeafColumn<T extends RowData> = DataTableAccessorKeyColumn<T> | DataTableAccessorFnColumn<T>;
+export type DataTableGroupColumn<T extends RowData> = DataTableColumnBase & {
+    id?: string;
+    columns: DataTableColumn<T>[];
+    accessorKey?: never;
+    accessorFn?: never;
+    cell?: never;
+    cellComponent?: never;
+    cellProps?: never;
+    cellSnippet?: never;
+    type?: never;
+    formatOptions?: never;
+    formatLocale?: never;
+};
+export type DataTableColumn<T extends RowData> = DataTableLeafColumn<T> | DataTableGroupColumn<T>;
+export type DataTableColumnMeta = {
+    align?: DataTableAlign;
+    type?: DataTableColumnType;
+    formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
+    formatLocale?: string;
+    grow?: boolean;
+    sum?: boolean;
+    footer?: (values: unknown[]) => string | number | undefined;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,131 @@
+<script lang="ts" generics="T extends RowData">
+	import type { RowData } from '@tanstack/svelte-table';
+	import { createVirtualizer } from '@tanstack/svelte-virtual';
+	import { untrack } from 'svelte';
+	import { cn } from 'tailwind-variants';
+	import type { DataTableInstance } from '../data-table-utils';
+	import type { DataTableViewState } from '../table-view-state.svelte';
+	import DataTableCellContent from '../data-table-cell-content.svelte';
+	import {
+		alignClass,
+		getColumnMeta,
+		getPinningStyle,
+		getRowCells,
+		joinStyles,
+		justifyClass,
+		virtualColumnSizeStyle,
+		virtualGrowColumnSizeStyle,
+		virtualSelectionColumnSizeStyle
+	} from '../data-table-utils';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		view: DataTableViewState<T>;
+		scrollContainer: HTMLDivElement;
+		emptyMessage: string;
+		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
+		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
+	};
+
+	let { table, view, scrollContainer, emptyMessage, onRowClick, onRowDoubleClick }: Props =
+		$props();
+
+	const rows = $derived(view.rowModel.rows);
+
+	const rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+		get count() {
+			return rows.length;
+		},
+		estimateSize: () => 37,
+		getScrollElement: () => scrollContainer,
+		// Upstream-recommended workaround: dynamic measurement is skipped on
+		// Firefox because its sub-pixel row heights make the virtualizer jitter.
+		measureElement:
+			typeof window !== 'undefined' && !navigator.userAgent.includes('Firefox')
+				? (element) => element.getBoundingClientRect().height
+				: undefined,
+		overscan: 5
+	});
+
+	function measureRowElement(node: HTMLTableRowElement) {
+		$rowVirtualizer.measureElement(node);
+	}
+
+	$effect(() => {
+		const count = rows.length;
+		untrack(() => {
+			$rowVirtualizer.setOptions({ ...$rowVirtualizer.options, count });
+		});
+	});
+</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]}
+			{#if row}
+				{@const rowSelected = view.rowSelection[row.id] === true}
+				<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%"
+					onclick={(event) => onRowClick?.({ row: row.original, event })}
+					ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
+				>
+					{#if view.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'
+							)}
+							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(
+								'items-center truncate px-3 py-2',
+								alignClass(meta?.align),
+								justifyClass(meta?.align),
+								cell.column.getIsPinned() && 'bg-(--row-bg)'
+							)}
+							style={joinStyles(
+								meta?.grow
+									? virtualGrowColumnSizeStyle()
+									: virtualColumnSizeStyle(cell.column.getSize()),
+								getPinningStyle(cell.column, table, view, false, view.isRowSelectionEnabled)
+							)}
+						>
+							<DataTableCellContent {cell} />
+						</td>
+					{/each}
+				</tr>
+			{/if}
+		{/each}
+	{/if}
+</tbody>

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

@@ -0,0 +1,40 @@
+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>;
+        scrollContainer: HTMLDivElement;
+        emptyMessage: string;
+        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 DataTableVirtualRows: $$IsomorphicComponent;
+type DataTableVirtualRows<T extends RowData> = InstanceType<typeof DataTableVirtualRows<T>>;
+export default DataTableVirtualRows;

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

@@ -0,0 +1,79 @@
+<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 DataTableVirtualRows from './data-table-virtual-rows.svelte';
+	import { 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();
+
+	let scrollContainerRef = $state<HTMLDivElement | undefined>(undefined);
+
+	const view = createTableViewState(() => table);
+</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" bind:this={scrollContainerRef}>
+		<table
+			class="table-fixed border-separate border-spacing-0 text-sm"
+			style="display: grid; {tableSizeStyle(table, view.isRowSelectionEnabled, view)}"
+		>
+			{#if caption}
+				<caption class="sr-only">{caption}</caption>
+			{/if}
+			<DataTableHead {table} {view} isVirtual />
+			{#if scrollContainerRef}
+				<DataTableVirtualRows
+					{table}
+					{view}
+					scrollContainer={scrollContainerRef}
+					{emptyMessage}
+					{onRowClick}
+					{onRowDoubleClick}
+				/>
+			{/if}
+			{#if view.hasFooter}
+				<DataTableFoot {table} {view} hasGrowColumn={false} isVirtual />
+			{/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/virtual/data-table-virtualized.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 DataTableVirtualized: $$IsomorphicComponent;
+type DataTableVirtualized<T extends RowData> = InstanceType<typeof DataTableVirtualized<T>>;
+export default DataTableVirtualized;

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

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

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

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

package/dist/index.d.ts

@@ -23,6 +23,10 @@ export type { DatePickerProps } from './components/date-picker/types';
 export * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
 export type { AlertDialogProps } from './components/dialog/dialog.types';
+export * as DataTable from './components/data-table-v9';
+export * as VirtualDataTable from './components/data-table-v9/virtual';
+export * as DataTableV8 from './components/data-table-v8';
+export * as VirtualDataTableV8 from './components/data-table-v8/virtual';
 export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';