compote-ui 0.33.1 → 0.34.0

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

@@ -1,32 +1,35 @@
-import { type ClassValue } from 'tailwind-variants';
-import type { HTMLAttributes } from 'svelte/elements';
 import type { RowData } from '@tanstack/svelte-table';
-import { type DataTable } from './core';
-declare function $$render<TData extends RowData, TSelected = object>(): {
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ClassValue } from 'tailwind-variants';
+import { type DataTableInstance } from './create-table';
+import type { DataTableColumn } from './types';
+declare function $$render<T extends RowData>(): {
     props: Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
-        table: DataTable<TData, TSelected>;
+        table: DataTableInstance<T>;
+        columns: DataTableColumn<T>[];
+        caption?: string;
+        emptyMessage?: string;
         class?: ClassValue;
-        tableClass?: ClassValue;
     };
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<TData extends RowData, TSelected = object> {
-    props(): ReturnType<typeof $$render<TData, TSelected>>['props'];
-    events(): ReturnType<typeof $$render<TData, TSelected>>['events'];
-    slots(): ReturnType<typeof $$render<TData, TSelected>>['slots'];
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TData extends RowData, TSelected = object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TSelected>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TSelected>['props']>, ReturnType<__sveltets_Render<TData, TSelected>['events']>, ReturnType<__sveltets_Render<TData, TSelected>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TData, TSelected>['bindings']>;
-    } & ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
-    <TData extends RowData, TSelected = object>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TSelected>['props']> & {}): ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DataTable: $$IsomorphicComponent;
-type DataTable<TData extends RowData, TSelected = object> = InstanceType<typeof DataTable<TData, TSelected>>;
+type DataTable<T extends RowData> = InstanceType<typeof DataTable<T>>;
 export default DataTable;

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

@@ -1,7 +1,9 @@
+export { createDataTableColumnHelper } from './column-helper';
+export { createTable } from './create-table';
 export { default as Root } from './data-table.svelte';
 export { default as Toolbar } from './data-table-toolbar.svelte';
 export { default as Title } from './data-table-title.svelte';
 export { default as ColumnVisibility } from './data-table-column-visibility.svelte';
-export { default as Filters } from './data-table-filters.svelte';
-export * from './core';
-export * from '@tanstack/svelte-table';
+export { default as ColumnFilter } from './data-table-column-filter.svelte';
+export type { CreateDataTableOptions, DataTableFeatures, DataTableInstance } from './create-table';
+export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';

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

@@ -1,7 +1,7 @@
+export { createDataTableColumnHelper } from './column-helper';
+export { createTable } from './create-table';
 export { default as Root } from './data-table.svelte';
 export { default as Toolbar } from './data-table-toolbar.svelte';
 export { default as Title } from './data-table-title.svelte';
 export { default as ColumnVisibility } from './data-table-column-visibility.svelte';
-export { default as Filters } from './data-table-filters.svelte';
-export * from './core';
-export * from '@tanstack/svelte-table';
+export { default as ColumnFilter } from './data-table-column-filter.svelte';

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

@@ -0,0 +1,50 @@
+import type { CellData, ColumnDef, RowData, TableFeatures } from '@tanstack/svelte-table';
+import type { Snippet } from 'svelte';
+export type DataTableAlign = 'left' | 'center' | 'right';
+export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url';
+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> = Partial<Pick<ColumnDef<TableFeatures, T, CellData>, 'size' | 'minSize' | 'maxSize' | 'enableResizing' | 'enableHiding' | 'enableSorting' | 'sortDescFirst' | 'enableColumnFilter' | 'filterFn'>>;
+export type DataTableColumnBase = {
+    header: string;
+    align?: DataTableAlign;
+};
+export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<T> & DataTableColumnBase & {
+    cell?: DataTableCellRenderer<T>;
+    cellComponent?: unknown;
+    cellProps?: DataTableCellPropsResolver<T>;
+    cellSnippet?: Snippet<[DataTableCellRenderProps<T>]>;
+    type?: DataTableColumnType;
+    formatOptions?: Intl.NumberFormatOptions;
+    formatLocale?: string;
+    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>;

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

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

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

@@ -24,14 +24,6 @@ class DataTableState {
         this.#options = options;
         this.#columns = normalizeDataTableColumns(options.columns);
         const getData = () => this.#getData();
-        $effect(() => {
-            $inspect.trace('[DataTable] #options changed');
-            void this.#options;
-        });
-        $effect(() => {
-            $inspect.trace('[DataTable] getData() re-read');
-            void getData();
-        });
         this.#table = createTanStackTable({
             ...options,
             columns: this.#columns,

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

@@ -0,0 +1,79 @@
+<script lang="ts" generics="TData extends RowData, TSelected = object">
+	import * as Popover from '../popover';
+	import * as ScrollArea from '../scroll-area';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import type { DataTable, DataTableFeatures, DataTableSelectedState } from './core';
+
+	type Props = {
+		table: DataTable<TData, TSelected>;
+		triggerLabel?: string;
+	};
+
+	let { table, triggerLabel = 'Columns' }: Props = $props();
+
+	const columnVisibility = $derived(
+		(table.state as unknown as DataTableSelectedState).columnVisibility
+	);
+	const allColumnsVisible = $derived(table.getIsAllColumnsVisible());
+	const someColumnsVisible = $derived(
+		table.getAllLeafColumns().some((column) => column.getCanHide() && column.getIsVisible())
+	);
+	const allColumnsVisibilityState = $derived(
+		allColumnsVisible ? true : someColumnsVisible ? 'indeterminate' : false
+	);
+
+	function getColumnLabel(column: Column<DataTableFeatures, TData, unknown>) {
+		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+	}
+
+	function getColumnIsVisible(
+		column: Column<DataTableFeatures, TData, unknown>,
+		visibilityState: unknown
+	) {
+		void visibilityState;
+		return column.getIsVisible();
+	}
+</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
+				size="sm"
+				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 table.getAllLeafColumns() as column (column.id)}
+							<Checkbox
+								size="md"
+								label={getColumnLabel(column)}
+								class="min-h-8 rounded-sm px-2 hover:bg-surface-2"
+								checked={getColumnIsVisible(column, columnVisibility)}
+								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-old/data-table-column-visibility.svelte.d.ts

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

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn, type ClassValue } from 'tailwind-variants';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> & {
+		class?: ClassValue;
+		children?: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<h2 class={cn('text-lg font-semibold text-ink', className)} {...rest}>
+	{@render children?.()}
+</h2>

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

@@ -0,0 +1,10 @@
+import { type ClassValue } from 'tailwind-variants';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+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-old/data-table-toolbar.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn, type ClassValue } from 'tailwind-variants';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+		class?: ClassValue;
+		children?: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div class={cn('mb-4 flex flex-wrap items-center justify-between gap-3', className)} {...rest}>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,342 @@
+<script lang="ts" generics="TData extends RowData, TSelected = object">
+	import { useLocaleContext } from '@ark-ui/svelte/locale';
+	import { FlexRender } from '@tanstack/svelte-table';
+	import { cn, type ClassValue } from 'tailwind-variants';
+	import { PhArrowSquareOut, PhCaretDown, PhCaretUp } from '../../icons';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Header, RowData } from '@tanstack/svelte-table';
+	import {
+		getDataTableCellConfig,
+		hasCustomDataTableCell,
+		type DataTable,
+		type DataTableCell,
+		type DataTableCellConfig,
+		type DataTableColumnAlign,
+		type DataTableColumnMeta,
+		type DataTableFeatures
+	} from './core';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+		table: DataTable<TData, TSelected>;
+		class?: ClassValue;
+		tableClass?: ClassValue;
+	};
+
+	let { table, class: className, tableClass, ...rest }: Props = $props();
+
+	const locale = useLocaleContext();
+	const columnCount = $derived(table.getVisibleLeafColumns().length);
+	const headerGroupCount = $derived(table.getHeaderGroups().length);
+	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
+	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
+	const tableColumnCount = $derived(columnCount + (isRowSelectionEnabled ? 1 : 0));
+	const allRowsSelected = $derived(table.getIsAllRowsSelected());
+	const someRowsSelected = $derived(table.getIsSomeRowsSelected());
+	const allRowsSelectionState = $derived(
+		allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false
+	);
+	const rowSelectionColumnSize = 40;
+	const tableSize = $derived(
+		table.getTotalSize() + (isRowSelectionEnabled ? rowSelectionColumnSize : 0)
+	);
+	const isColumnResizing = $derived(table.store.state.columnResizing.isResizingColumn !== false);
+
+	function formatNumericValue(
+		value: unknown,
+		options: Intl.NumberFormatOptions & { locale?: string }
+	) {
+		if (typeof value !== 'number') return formatTextValue(value);
+		const { locale: optionLocale, ...numberFormatOptions } = options;
+		return new Intl.NumberFormat(optionLocale ?? locale().locale, numberFormatOptions).format(
+			value
+		);
+	}
+
+	function formatTextValue(value: unknown, fallback = '') {
+		if (value === null || value === undefined || value === '') return fallback;
+		return String(value);
+	}
+
+	function fractionOptions(options: { fractionDigits?: number }) {
+		if (options.fractionDigits === undefined) return {};
+
+		return {
+			minimumFractionDigits: options.fractionDigits,
+			maximumFractionDigits: options.fractionDigits
+		};
+	}
+
+	function isNumericCellConfig(cellConfig: DataTableCellConfig<TData> | undefined) {
+		return (
+			cellConfig?.type === 'number' ||
+			cellConfig?.type === 'currency' ||
+			cellConfig?.type === 'percentage'
+		);
+	}
+
+	function getLinkHref<TValue>(
+		cell: DataTableCell<TData, TValue>,
+		href: string | ((value: TValue, row: TData) => string) | undefined
+	) {
+		const value = cell.getValue();
+		if (!href) return formatTextValue(value);
+		return typeof href === 'function' ? href(value, cell.row.original) : href;
+	}
+
+	function getLinkLabel(value: unknown, fallback = 'Open link') {
+		return formatTextValue(value, fallback);
+	}
+
+	function getCellMeta<TValue>(cell: DataTableCell<TData, TValue>) {
+		return (cell.column.columnDef.meta as DataTableColumnMeta<TData, TValue> | undefined)
+			?.dataTable;
+	}
+
+	function getHeaderMeta(header: Header<DataTableFeatures, TData, unknown>) {
+		return header.column.columnDef.meta as DataTableColumnMeta<TData> | undefined;
+	}
+
+	function getColumnAlign(
+		align: DataTableColumnAlign | undefined,
+		cellConfig: DataTableCellConfig<TData> | undefined
+	) {
+		return align ?? (isNumericCellConfig(cellConfig) ? 'right' : 'left');
+	}
+
+	function alignClass(align: DataTableColumnAlign | undefined) {
+		return {
+			left: 'text-left',
+			center: 'text-center',
+			right: 'text-right'
+		}[align ?? 'left'];
+	}
+
+	function justifyClass(align: DataTableColumnAlign | undefined) {
+		return {
+			left: 'justify-start',
+			center: 'justify-center',
+			right: 'justify-end'
+		}[align ?? 'left'];
+	}
+
+	function sortButtonDirectionClass(align: DataTableColumnAlign | undefined) {
+		return align === 'right' ? 'flex-row-reverse' : 'flex-row';
+	}
+
+	function columnSizeStyle(size: number) {
+		return `width: ${size}px`;
+	}
+
+	function tableSizeStyle() {
+		return `width: max(100%, ${tableSize}px)`;
+	}
+
+	function resizeHandleStyle(header: Header<DataTableFeatures, TData, unknown>) {
+		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 getHeaderSortDirection(
+		header: Header<DataTableFeatures, TData, unknown>,
+		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';
+	}
+</script>
+
+<div
+	class={cn('max-h-full min-h-0 overflow-auto rounded-lg border border-surface-3', className)}
+	{...rest}
+>
+	{#if isColumnResizing}
+		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
+	{/if}
+
+	<table class={cn('table-fixed border-collapse text-sm', tableClass)} style={tableSizeStyle()}>
+		<colgroup>
+			{#if isRowSelectionEnabled}
+				<col style={columnSizeStyle(rowSelectionColumnSize)} />
+			{/if}
+			{#each table.getVisibleLeafColumns() as column (column.id)}
+				<col style={columnSizeStyle(column.getSize())} />
+			{/each}
+		</colgroup>
+		<thead class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim">
+			{#each table.getHeaderGroups() as headerGroup, headerGroupIndex (headerGroup.id)}
+				<tr>
+					{#if isRowSelectionEnabled && headerGroupIndex === 0}
+						<th
+							class="border-b border-surface-3 bg-surface-2 px-3 py-2 text-center align-middle font-medium"
+							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 headerGroup.headers as header (header.id)}
+						{@const headerMeta = getHeaderMeta(header)?.dataTable}
+						{@const headerAlign = getColumnAlign(headerMeta?.align, headerMeta?.cell)}
+						{@const sortDirection = getHeaderSortDirection(header, table.store.state.sorting)}
+						<th
+							class={cn(
+								'relative border-b border-surface-3 bg-surface-2 px-3 py-2 font-medium',
+								alignClass(headerAlign)
+							)}
+							colspan={header.colSpan}
+							aria-sort={header.column.getCanSort() ? getHeaderAriaSort(sortDirection) : undefined}
+						>
+							{#if !header.isPlaceholder}
+								{#if header.column.getCanSort()}
+									<button
+										type="button"
+										class={cn(
+											'inline-flex max-w-full items-center gap-1 rounded-sm outline-none hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring',
+											justifyClass(headerAlign),
+											sortButtonDirectionClass(headerAlign)
+										)}
+										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={cn(
+										'absolute top-0 -right-1 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-[""]'
+									)}
+									style={resizeHandleStyle(header)}
+									ondblclick={() => header.column.resetSize()}
+									onmousedown={header.getResizeHandler()}
+									ontouchstart={header.getResizeHandler()}
+								></div>
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			{/each}
+		</thead>
+		<tbody>
+			{#each table.getRowModel().rows as row (row.id)}
+				<tr class="border-b border-surface-3 last:border-b-0">
+					{#if isRowSelectionEnabled}
+						<td class="px-3 py-2 text-center align-middle">
+							<Checkbox
+								size="sm"
+								aria-label="Select row"
+								class="mx-auto size-4"
+								checked={row.getIsSelected()}
+								disabled={!row.getCanSelect()}
+								onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}
+							/>
+						</td>
+					{/if}
+					{#each row.getVisibleCells() as cell (cell.id)}
+						{@const cellMeta = getCellMeta(cell)}
+						{@const cellConfig = getDataTableCellConfig(cell)}
+						{@const cellAlign = getColumnAlign(cellMeta?.align, cellConfig)}
+						<td
+							class={cn(
+								'px-3 py-2',
+								alignClass(cellAlign),
+								isNumericCellConfig(cellConfig) && 'tabular-nums'
+							)}
+						>
+							{#if cellConfig && !hasCustomDataTableCell(cell)}
+								{@const value = cell.getValue()}
+								{#if cellConfig.type === 'number'}
+									{formatNumericValue(value, {
+										...cellConfig,
+										...fractionOptions(cellConfig)
+									})}
+								{:else if cellConfig.type === 'currency'}
+									{formatNumericValue(value, {
+										...cellConfig,
+										...fractionOptions(cellConfig),
+										style: 'currency'
+									})}
+								{:else if cellConfig.type === 'percentage'}
+									{formatNumericValue(value, {
+										...cellConfig,
+										...fractionOptions(cellConfig),
+										style: 'percent'
+									})}
+								{:else if cellConfig.type === 'boolean'}
+									{value === true
+										? (cellConfig.trueLabel ?? 'Yes')
+										: value === false
+											? (cellConfig.falseLabel ?? 'No')
+											: (cellConfig.nullLabel ?? '')}
+								{:else if cellConfig.type === 'link'}
+									{@const href = getLinkHref(cell, cellConfig.href)}
+									{#if href}
+										<a
+											class="inline-flex size-7 items-center justify-center rounded-md text-primary hover:bg-surface-2"
+											{href}
+											target={cellConfig.target ?? '_blank'}
+											rel="external noreferrer"
+											aria-label={getLinkLabel(value, cellConfig.fallback)}
+											title={getLinkLabel(value, cellConfig.fallback)}
+										>
+											<PhArrowSquareOut class="size-4" />
+										</a>
+									{:else}
+										{formatTextValue(value, cellConfig.fallback)}
+									{/if}
+								{:else}
+									{formatTextValue(value, cellConfig.fallback)}
+								{/if}
+							{:else}
+								<FlexRender {cell} />
+							{/if}
+						</td>
+					{/each}
+				</tr>
+			{:else}
+				<tr>
+					<td class="px-3 py-6 text-center text-ink-dim" colspan={tableColumnCount}>
+						No results.
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>