compote-ui 0.33.1 → 0.35.0

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

@@ -1,126 +1,43 @@
-<script lang="ts" generics="TData extends RowData, TSelected = object">
-	import { useLocaleContext } from '@ark-ui/svelte/locale';
+<script lang="ts" generics="T extends RowData">
 	import { FlexRender } from '@tanstack/svelte-table';
+	import type { CellData, Header, RowData } from '@tanstack/svelte-table';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type ClassValue } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCaretDown, PhCaretUp } from '../../icons';
+	import { PhArrowSquareOut, PhCaretDown, PhCaretUp, PhCheck, PhX } 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';
+	import { getColumnId, type DataTableFeatures, type DataTableInstance } from './create-table';
+	import type { DataTableColumn, DataTableGroupColumn, DataTableLeafColumn } from './types';
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		table: DataTable<TData, TSelected>;
+		table: DataTableInstance<T>;
+		columns: DataTableColumn<T>[];
+		caption?: string;
+		emptyMessage?: string;
 		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;
-	}
+	let {
+		table,
+		columns,
+		caption,
+		emptyMessage = 'No rows found',
+		class: className,
+		...rest
+	}: Props = $props();
 
-	function getHeaderMeta(header: Header<DataTableFeatures, TData, unknown>) {
-		return header.column.columnDef.meta as DataTableColumnMeta<TData> | undefined;
+	function alignClass(align: DataTableColumn<T>['align']) {
+		return align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
 	}
 
-	function getColumnAlign(
-		align: DataTableColumnAlign | undefined,
-		cellConfig: DataTableCellConfig<TData> | undefined
-	) {
-		return align ?? (isNumericCellConfig(cellConfig) ? 'right' : 'left');
+	function justifyClass(align: DataTableColumn<T>['align']) {
+		return align === 'right'
+			? 'justify-end'
+			: align === 'center'
+				? 'justify-center'
+				: 'justify-start';
 	}
 
-	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) {
+	function sortButtonDirectionClass(align: DataTableColumn<T>['align']) {
 		return align === 'right' ? 'flex-row-reverse' : 'flex-row';
 	}
 
@@ -128,19 +45,30 @@
 		return `width: ${size}px`;
 	}
 
+	function selectionColumnSizeStyle() {
+		return 'width: 40px';
+	}
+
 	function tableSizeStyle() {
-		return `width: max(100%, ${tableSize}px)`;
+		return `width: max(100%, ${table.getTotalSize() + (isRowSelectionEnabled ? 40 : 0)}px)`;
 	}
 
-	function resizeHandleStyle(header: Header<DataTableFeatures, TData, unknown>) {
+	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, TData, unknown>,
+		header: Header<DataTableFeatures, T, CellData>,
 		sortingState: unknown
 	) {
 		void sortingState;
@@ -158,185 +86,280 @@
 		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;
+	}
+
+	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 isGroupColumn(column: DataTableColumn<T>): column is DataTableGroupColumn<T> {
+		return Array.isArray(column.columns);
+	}
+
+	function isLeafColumn(column: DataTableColumn<T>): column is DataTableLeafColumn<T> {
+		return !isGroupColumn(column);
+	}
+
+	function findColumnById(
+		columnId: string,
+		candidates: DataTableColumn<T>[]
+	): DataTableColumn<T> | undefined {
+		for (const column of candidates) {
+			if (isGroupColumn(column)) {
+				if ((column.id ?? column.header) === columnId) return column;
+
+				const found = findColumnById(columnId, column.columns);
+				if (found) return found;
+
+				continue;
+			}
+
+			if (isLeafColumn(column) && getColumnId(column) === columnId) return column;
+		}
+	}
+
+	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 visibleLeafColumns = $derived.by(() => {
+		trackTableState();
+		return table.getVisibleLeafColumns();
+	});
+	const visibleColumnCount = $derived(visibleLeafColumns.length);
+	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
+	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
+	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 isColumnResizing = $derived(table.store.state.columnResizing.isResizingColumn !== false);
 </script>
 
 <div
-	class={cn('max-h-full min-h-0 overflow-auto rounded-lg border border-surface-3', className)}
+	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}
 
-	<table class={cn('table-fixed border-collapse text-sm', tableClass)} style={tableSizeStyle()}>
-		<colgroup>
-			{#if isRowSelectionEnabled}
-				<col style={columnSizeStyle(rowSelectionColumnSize)} />
+	<div class="min-h-0 flex-1 overflow-auto">
+		<table class="table-fixed border-collapse text-sm" style={tableSizeStyle()}>
+			<colgroup>
+				{#if isRowSelectionEnabled}
+					<col style={selectionColumnSizeStyle()} />
+				{/if}
+				{#each visibleLeafColumns as column (column.id)}
+					<col style={columnSizeStyle(column.getSize())} />
+				{/each}
+				<col />
+			</colgroup>
+			{#if caption}
+				<caption class="sr-only">{caption}</caption>
 			{/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}
+			<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>
+						{#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 visibleHeaders as header, headerIndex (header.id)}
+							{@const columnDef = findColumnById(header.column.id, columns)}
+							{@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(columnDef?.align)
+								)}
+								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(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="border-b border-surface-3 bg-surface-2 p-0"></th>
+					</tr>
+				{/each}
+			</thead>
+			<tbody>
+				{#each rowModel.rows as row (row.id)}
+					{@const rowSelected = getRowSelectionState(table.store.state.rowSelection, row.id)}
+					<tr
+						class={cn(
+							'border-b border-surface-3 last:border-b-0 hover:bg-well/60',
+							rowSelected && 'bg-well/60'
+						)}
+					>
+						{#if isRowSelectionEnabled}
+							<td class="px-3 py-2 text-center align-middle">
 								<Checkbox
 									size="sm"
-									aria-label="Select all rows"
+									aria-label="Select row"
 									class="mx-auto size-4"
-									checked={allRowsSelectionState}
-									onCheckedChange={({ checked }) => table.toggleAllRowsSelected(checked === true)}
+									checked={rowSelected}
+									disabled={!row.getCanSelect()}
+									onCheckedChange={({ checked }) => row.toggleSelected(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} />
+							</td>
+						{/if}
+						{#each row.getVisibleCells() as cell (cell.id)}
+							{@const columnDef = findColumnById(cell.column.id, columns)}
+							<td class={cn('px-3 py-2 text-ink-dim', alignClass(columnDef?.align))}>
+								{#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-3.5 shrink-0 items-center justify-center text-ink-dim"
+											class="inline-flex size-5 items-center justify-center text-danger"
+											role="img"
+											aria-label="No"
 										>
-											{#if sortDirection === 'asc'}
-												<PhCaretUp class="size-3.5" />
-											{:else if sortDirection === 'desc'}
-												<PhCaretDown class="size-3.5" />
-											{/if}
+											<PhX class="size-4" />
 										</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)}
+									{:else}
+										-
+									{/if}
+								{:else if columnDef?.type === 'url'}
+									{@const value = getUrlCellValue(cell.getValue())}
+									{#if value}
+										<button
+											type="button"
+											class={cn(
+												'inline-flex max-w-full items-center gap-1.5 rounded-sm 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-4" />
-										</a>
+											<PhArrowSquareOut class="size-3.5 shrink-0" />
+										</button>
 									{:else}
-										{formatTextValue(value, cellConfig.fallback)}
+										-
 									{/if}
 								{:else}
-									{formatTextValue(value, cellConfig.fallback)}
+									<FlexRender {cell} />
 								{/if}
-							{:else}
-								<FlexRender {cell} />
-							{/if}
+							</td>
+						{/each}
+						<td aria-hidden="true" class="p-0"></td>
+					</tr>
+				{:else}
+					<tr>
+						<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
+							{emptyMessage}
 						</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>
+					</tr>
+				{/each}
+			</tbody>
+		</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>