compote-ui 0.42.7 → 0.43.0

package/dist/components/data-table/data-table-utils.ts.md

@@ -0,0 +1,179 @@
+import type { CellData, ColumnPinningPosition, Header, RowData } from '@tanstack/svelte-table';
+import { cn } from 'tailwind-variants';
+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 function alignClass(align: DataTableColumnMeta['align']) {
+return align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+}
+
+export function justifyClass(align: DataTableColumnMeta['align']) {
+return align === 'right'
+? 'justify-end'
+: align === 'center'
+? 'justify-center'
+: 'justify-start';
+}
+
+export function sortButtonDirectionClass(align: DataTableColumnMeta['align']) {
+return align === 'right' ? 'flex-row-reverse' : 'flex-row';
+}
+
+export function columnSizeStyle(size: number) {
+return `width: ${size}px`;
+}
+
+export function selectionColumnSizeStyle() {
+return 'width: 40px';
+}
+
+export function virtualColumnSizeStyle(size: number) {
+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<T extends RowData>(
+table: DataTableInstance<T>,
+isRowSelectionEnabled: boolean
+) {
+return `width: max(100%, ${table.getTotalSize() + (isRowSelectionEnabled ? 40 : 0)}px)`;
+}
+
+export function virtualGrowColumnSizeStyle() {
+return 'display: flex; flex: 1; min-width: 0';
+}
+
+export function virtualGroupWithGrowSizeStyle(fixedPortion: number) {
+return `display: flex; flex: 1 0 ${fixedPortion}px; width: ${fixedPortion}px`;
+}
+
+export function resizeHandleStyle<T extends RowData>(
+table: DataTableInstance<T>,
+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)`;
+}
+
+export 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'
+);
+}
+
+export function getHeaderSortDirection<T extends RowData>(
+header: Header<DataTableFeatures, T, CellData>,
+sortingState: unknown
+) {
+void sortingState;
+return header.column.getIsSorted();
+}
+
+export function getHeaderSortLabel(sortDirection: false | 'asc' | 'desc') {
+if (sortDirection === 'asc') return 'Sorted ascending';
+if (sortDirection === 'desc') return 'Sorted descending';
+return 'Not sorted';
+}
+
+export function getHeaderAriaSort(sortDirection: false | 'asc' | 'desc') {
+if (sortDirection === 'asc') return 'ascending';
+if (sortDirection === 'desc') return 'descending';
+return 'none';
+}
+
+export function getAllRowsSelectionState<T extends RowData>(
+table: DataTableInstance<T>,
+rowSelection: unknown
+) {
+void rowSelection;
+const allRowsSelected = table.getIsAllRowsSelected();
+const someRowsSelected = table.getIsSomeRowsSelected();
+return allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false;
+}
+
+export function getRowSelectionState<T extends RowData>(
+table: DataTableInstance<T>,
+rowSelection: unknown,
+rowId: string
+) {
+void rowSelection;
+return table.getRow(rowId).getIsSelected();
+}
+
+export function getSelectedRowCount<T extends RowData>(
+table: DataTableInstance<T>,
+rowSelection: unknown
+) {
+void rowSelection;
+return table.getSelectedRowModel().rows.length;
+}
+
+export function getBooleanCellValue(value: unknown) {
+if (value === true) return true;
+if (value === false) return false;
+return undefined;
+}
+
+export function getPinningStyle(
+column: DataTablePinnableColumn,
+isHeader = false,
+isRowSelectionEnabled = 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('; ');
+    }
+
+}
+
+export function getUrlCellValue(value: unknown) {
+if (typeof value !== 'string' || value.trim() === '') return undefined;
+return value;
+}
+
+export function openUrlCell(value: string) {
+window.open(value, '\_blank', 'noopener,noreferrer');
+}
+
+export function getColumnMeta(columnDef: { meta?: unknown }): DataTableColumnMeta | undefined {
+return columnDef.meta as DataTableColumnMeta | undefined;
+}
+
+export function joinStyles(...styles: Array<string | undefined>) {
+return styles.filter(Boolean).join('; ');
+}

package/dist/components/data-table/{data-table-virtual-rows.svelte → data-table-virtual-rows.svelte.md}

@@ -4,7 +4,7 @@
 	import { createVirtualizer } from '@tanstack/svelte-virtual';
 	import { get } from 'svelte/store';
 	import { cn } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
+	import { PhArrowSquareOut, PhCheck, PhX } from '$lib/icons';
 	import Checkbox from '../checkbox/checkbox.svelte';
 	import type { DataTableFeatures, DataTableInstance } from './create-table';
 	import {

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

@@ -0,0 +1,108 @@
+<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;
+		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 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}
+    				{onRowClick}
+    				{onRowDoubleClick}
+    			/>
+    		{/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.svelte.md

@@ -0,0 +1,214 @@
+<script lang="ts" generics="T extends RowData">
+	import { FlexRender } 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, PhCheck, PhX } from '$lib/icons';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	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>;
+		caption?: string;
+		emptyMessage?: string;
+		class?: ClassValue;
+		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
+		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
+	};
+
+	let {
+		table,
+		caption,
+		emptyMessage = 'No rows found',
+		class: className,
+		onRowClick,
+		onRowDoubleClick,
+		...rest
+	}: Props = $props();
+
+	const rowModel = $derived(table.getRowModel());
+	const headerGroups = $derived(table.getHeaderGroups());
+	const visibleLeafColumns = $derived(table.getVisibleLeafColumns());
+	const growColumn = $derived(visibleLeafColumns.find((col) => getColumnMeta(col.columnDef)?.grow));
+	const hasGrowColumn = $derived(growColumn !== undefined);
+	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, table.store.state.rowSelection)
+	//	);
+	//	const selectedRowCount = $derived(getSelectedRowCount(table, table.store.state.rowSelection));
+	//	const isColumnResizing = $derived(table.store.state.columnResizing.isResizingColumn !== false);
+	const allRowsSelectionState = $derived<boolean | 'indeterminate'>(false);
+	const selectedRowCount = $derived(0);
+	const isColumnResizing = $derived(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">
+    	<table
+    		class="table-fixed border-separate border-spacing-0 text-sm"
+    		style={tableSizeStyle(table, isRowSelectionEnabled)}
+    	>
+    		<colgroup>
+    			{#if isRowSelectionEnabled}
+    				<col style={selectionColumnSizeStyle()} />
+    			{/if}
+    			{#each visibleLeafColumns as column (column.id)}
+    				<col
+    					style={getColumnMeta(column.columnDef)?.grow
+    						? undefined
+    						: columnSizeStyle(column.getSize())}
+    				/>
+    			{/each}
+    			{#if !hasGrowColumn}
+    				<col />
+    			{/if}
+    		</colgroup>
+    		{#if caption}
+    			<caption class="sr-only">{caption}</caption>
+    		{/if}
+    		<DataTableHead
+    			{table}
+    			{headerGroups}
+    			{headerGroupCount}
+    			{isRowSelectionEnabled}
+    			{isMultiRowSelectionEnabled}
+    			{allRowsSelectionState}
+    			{hasGrowColumn}
+    		/>
+    		<tbody>
+    			{#each rowModel.rows as row (row.id)}
+    				{@const rowSelected = getRowSelectionState(table, table.store.state.rowSelection, row.id)}
+    				<tr
+    					class={cn(
+    						'group/row',
+    						'[--row-bg:var(--compote-surface-1)]',
+    						'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
+    						rowSelected &&
+    							'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
+    					)}
+    					onclick={(event) => onRowClick?.({ row: row.original, event })}
+    					ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
+    				>
+    					{#if isRowSelectionEnabled}
+    						<td
+    							class="border-b border-surface-2 bg-(--row-bg) px-3 py-2 text-center align-middle group-last/row:border-b-0"
+    							style="position: sticky; left: 0; z-index: 1"
+    						>
+    							<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(
+    								'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, 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}
+    					{#if !hasGrowColumn}
+    						<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
+    						></td>
+    					{/if}
+    				</tr>
+    			{:else}
+    				<tr>
+    					<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
+    						{emptyMessage}
+    					</td>
+    				</tr>
+    			{/each}
+    		</tbody>
+    	</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/index.ts.md

@@ -0,0 +1,22 @@
+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 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/types.ts.md

@@ -0,0 +1,101 @@
+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'
+| '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> = 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 | Intl.DateTimeFormatOptions;
+formatLocale?: string;
+pinned?: 'left' | 'right';
+grow?: boolean;
+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;
+};

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

@@ -0,0 +1,26 @@
+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 → data-table-v8}/column-helper.d.ts

@@ -1,4 +1,4 @@
-import type { RowData } from '@tanstack/svelte-table';
+import type { RowData } from '@tanstack/table-core';
 import type { DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableGroupColumn } from './types';
 type AccessorKeyColumnOptions<T extends RowData> = Omit<DataTableAccessorKeyColumn<T>, 'accessorKey' | 'accessorFn' | 'columns'>;
 type AccessorFnColumnOptions<T extends RowData> = Omit<DataTableAccessorFnColumn<T>, 'accessorFn' | 'accessorKey' | 'columns'>;

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

@@ -0,0 +1,8 @@
+import { type RowData, type TableOptions } from '@tanstack/table-core';
+export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
+type MaybeThunk<T extends object> = T | (() => T | null | undefined);
+type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R] ? H & Intersection<R> : unknown) & {};
+export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
+    [K in keyof Sources]: Sources[K];
+}>;
+export {};