compote-ui 0.42.7 → 0.43.0

package/dist/components/{data-table → data-table-v8}/data-table-utils.d.ts

@@ -1,13 +1,7 @@
-import type { CellData, ColumnPinningPosition, Header, RowData } from '@tanstack/svelte-table';
-import type { DataTableFeatures, DataTableInstance } from './create-table';
+import type { Column, Header, Row, RowData, Table, TableState, VisibilityState } from '@tanstack/table-core';
 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 type DataTableInstance<T extends RowData> = Table<T>;
+export declare function getReactiveTableState<T extends RowData>(table: DataTableInstance<T>): TableState;
 export declare function alignClass(align: DataTableColumnMeta['align']): "text-right" | "text-center" | "text-left";
 export declare function justifyClass(align: DataTableColumnMeta['align']): "justify-end" | "justify-center" | "justify-start";
 export declare function sortButtonDirectionClass(align: DataTableColumnMeta['align']): "flex-row-reverse" | "flex-row";
@@ -18,16 +12,17 @@ export declare function virtualSelectionColumnSizeStyle(): string;
 export declare function tableSizeStyle<T extends RowData>(table: DataTableInstance<T>, isRowSelectionEnabled: boolean): string;
 export declare function virtualGrowColumnSizeStyle(): string;
 export declare function virtualGroupWithGrowSizeStyle(fixedPortion: number): string;
-export declare function resizeHandleStyle<T extends RowData>(table: DataTableInstance<T>, header: Header<DataTableFeatures, T, CellData>): string | undefined;
+export declare function resizeHandleStyle<T extends RowData>(table: DataTableInstance<T>, header: Header<T, unknown>): string | undefined;
 export declare function resizeHandleClass(headerIndex: number, headerCount: number): import("tailwind-variants").CnReturn;
-export declare function getHeaderSortDirection<T extends RowData>(header: Header<DataTableFeatures, T, CellData>, sortingState: unknown): false | import("@tanstack/table-core").SortDirection;
+export declare function getHeaderSortDirection<T extends RowData>(header: Header<T, unknown>): false | import("@tanstack/table-core").SortDirection;
 export declare function getHeaderSortLabel(sortDirection: false | 'asc' | 'desc'): "Sorted ascending" | "Sorted descending" | "Not sorted";
 export declare function getHeaderAriaSort(sortDirection: false | 'asc' | 'desc'): "none" | "ascending" | "descending";
-export declare function getAllRowsSelectionState<T extends RowData>(table: DataTableInstance<T>, rowSelection: unknown): boolean | "indeterminate";
-export declare function getRowSelectionState<T extends RowData>(table: DataTableInstance<T>, rowSelection: unknown, rowId: string): boolean;
-export declare function getSelectedRowCount<T extends RowData>(table: DataTableInstance<T>, rowSelection: unknown): number;
+export declare function getAllRowsSelectionState<T extends RowData>(table: DataTableInstance<T>): boolean | 'indeterminate';
+export declare function getRowSelectionState<T extends RowData>(table: DataTableInstance<T>, rowId: string): boolean;
+export declare function getReactiveCells<T extends RowData>(row: Row<T>, columnVisibility: VisibilityState): import("@tanstack/table-core").Cell<T, unknown>[];
+export declare function getSelectedRowCount<T extends RowData>(table: DataTableInstance<T>): number;
 export declare function getBooleanCellValue(value: unknown): boolean | undefined;
-export declare function getPinningStyle(column: DataTablePinnableColumn, isHeader?: boolean, isRowSelectionEnabled?: boolean): string | undefined;
+export declare function getPinningStyle<T extends RowData>(column: Column<T, unknown>, table: DataTableInstance<T>, isHeader?: boolean, isRowSelectionEnabled?: boolean): string | undefined;
 export declare function getUrlCellValue(value: unknown): string | undefined;
 export declare function openUrlCell(value: string): void;
 export declare function getColumnMeta(columnDef: {

package/dist/components/{data-table → data-table-v8}/data-table-utils.js

@@ -1,4 +1,7 @@
 import { cn } from 'tailwind-variants';
+export function getReactiveTableState(table) {
+    return table._svelteState ?? table.getState();
+}
 export function alignClass(align) {
     return align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
 }
@@ -36,7 +39,7 @@ export function virtualGroupWithGrowSizeStyle(fixedPortion) {
 export function resizeHandleStyle(table, header) {
     if (table.options.columnResizeMode !== 'onEnd')
         return undefined;
-    const deltaOffset = table.store.state.columnResizing.deltaOffset;
+    const deltaOffset = table.getState().columnSizingInfo.deltaOffset;
     if (!header.column.getIsResizing() || deltaOffset === null)
         return undefined;
     return `transform: translateX(${deltaOffset}px)`;
@@ -44,8 +47,7 @@ export function resizeHandleStyle(table, header) {
 export function resizeHandleClass(headerIndex, headerCount) {
     return cn('absolute top-0 z-10 flex h-full w-2 cursor-col-resize touch-none items-center justify-center select-none before:h-4 before:w-px before:bg-border before:content-[""]', headerIndex === headerCount - 1 ? 'right-0' : '-right-1');
 }
-export function getHeaderSortDirection(header, sortingState) {
-    void sortingState;
+export function getHeaderSortDirection(header) {
     return header.column.getIsSorted();
 }
 export function getHeaderSortLabel(sortDirection) {
@@ -62,18 +64,18 @@ export function getHeaderAriaSort(sortDirection) {
         return 'descending';
     return 'none';
 }
-export function getAllRowsSelectionState(table, rowSelection) {
-    void rowSelection;
+export function getAllRowsSelectionState(table) {
     const allRowsSelected = table.getIsAllRowsSelected();
     const someRowsSelected = table.getIsSomeRowsSelected();
     return allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false;
 }
-export function getRowSelectionState(table, rowSelection, rowId) {
-    void rowSelection;
+export function getRowSelectionState(table, rowId) {
     return table.getRow(rowId).getIsSelected();
 }
-export function getSelectedRowCount(table, rowSelection) {
-    void rowSelection;
+export function getReactiveCells(row, columnVisibility) {
+    return row.getAllCells().filter((cell) => columnVisibility[cell.column.id] !== false);
+}
+export function getSelectedRowCount(table) {
     return table.getSelectedRowModel().rows.length;
 }
 export function getBooleanCellValue(value) {
@@ -83,7 +85,7 @@ export function getBooleanCellValue(value) {
         return false;
     return undefined;
 }
-export function getPinningStyle(column, isHeader = false, isRowSelectionEnabled = false) {
+export function getPinningStyle(column, table, isHeader = false, isRowSelectionEnabled = false) {
     const isPinned = column.getIsPinned();
     if (!isPinned)
         return undefined;
@@ -91,7 +93,9 @@ export function getPinningStyle(column, isHeader = false, isRowSelectionEnabled
     const selectionOffset = isRowSelectionEnabled ? 40 : 0;
     if (isPinned === 'left') {
         const left = column.getStart('left') + selectionOffset;
-        const shadow = !isHeader && column.getIsLastColumn('left')
+        const leftCols = table.getLeftLeafColumns();
+        const isLastLeft = leftCols[leftCols.length - 1]?.id === column.id;
+        const shadow = !isHeader && isLastLeft
             ? 'box-shadow: -4px 0 4px -4px var(--compote-border) inset'
             : undefined;
         return ['position: sticky', `z-index: ${zIndex}`, `left: ${left}px`, shadow]
@@ -100,7 +104,9 @@ export function getPinningStyle(column, isHeader = false, isRowSelectionEnabled
     }
     else {
         const right = column.getAfter('right');
-        const shadow = !isHeader && column.getIsFirstColumn('right')
+        const rightCols = table.getRightLeafColumns();
+        const isFirstRight = rightCols[0]?.id === column.id;
+        const shadow = !isHeader && isFirstRight
             ? 'box-shadow: 4px 0 4px -4px var(--compote-border) inset'
             : undefined;
         return ['position: sticky', `z-index: ${zIndex}`, `right: ${right}px`, shadow]

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

@@ -0,0 +1,170 @@
+<script lang="ts" generics="T extends RowData">
+	import type { Row, RowData } from '@tanstack/table-core';
+	import { createVirtualizer } from '@tanstack/svelte-virtual';
+	import { cn } from 'tailwind-variants';
+	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
+	import type { DataTableInstance } from './data-table-utils';
+	import FlexRender from './flex-render.svelte';
+	import {
+		alignClass,
+		getBooleanCellValue,
+		getColumnMeta,
+		getPinningStyle,
+		getReactiveCells,
+		getReactiveTableState,
+		getUrlCellValue,
+		joinStyles,
+		justifyClass,
+		openUrlCell,
+		virtualColumnSizeStyle,
+		virtualGrowColumnSizeStyle,
+		virtualSelectionColumnSizeStyle
+	} from './data-table-utils';
+
+	type Props = {
+		rows: Row<T>[];
+		scrollContainer: HTMLDivElement;
+		isRowSelectionEnabled: boolean;
+		table: DataTableInstance<T>;
+		emptyMessage: string;
+		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
+		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
+	};
+
+	let {
+		rows,
+		scrollContainer,
+		isRowSelectionEnabled,
+		table,
+		emptyMessage,
+		onRowClick,
+		onRowDoubleClick
+	}: Props = $props();
+
+	const rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+		get count() {
+			return rows.length;
+		},
+		estimateSize: () => 37,
+		getScrollElement: () => scrollContainer,
+		measureElement:
+			typeof window !== 'undefined' && !navigator.userAgent.includes('Firefox')
+				? (element) => element.getBoundingClientRect().height
+				: undefined,
+		overscan: 5
+	});
+
+	function measureRowElement(node: HTMLTableRowElement) {
+		$rowVirtualizer.measureElement(node);
+	}
+</script>
+
+<tbody style="display: grid; height: {$rowVirtualizer.getTotalSize()}px; position: relative">
+	{#if rows.length === 0}
+		<tr style="display: flex; position: absolute; width: 100%; top: 0">
+			<td class="px-3 py-10 text-center text-sm text-ink-dim" style="flex: 1">
+				{emptyMessage}
+			</td>
+		</tr>
+	{:else}
+		{#each $rowVirtualizer.getVirtualItems() as virtualRow (virtualRow.index)}
+			{@const row = rows[virtualRow.index]}
+			{@const rowSelected = getReactiveTableState(table).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 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'
+						)}
+					>
+						<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 getReactiveCells(row, getReactiveTableState(table).columnVisibility) as cell (cell.id)}
+					{@const columnDef = getColumnMeta(cell.column.columnDef)}
+					<td
+						class={cn(
+							'items-center truncate px-3 py-2',
+							alignClass(columnDef?.align),
+							justifyClass(columnDef?.align),
+							cell.column.getIsPinned() && 'bg-(--row-bg)'
+						)}
+						style={joinStyles(
+							getColumnMeta(cell.column.columnDef)?.grow
+								? virtualGrowColumnSizeStyle()
+								: virtualColumnSizeStyle(cell.column.getSize()),
+							getPinningStyle(cell.column, table, 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 content={cell.column.columnDef.cell} context={cell.getContext()} />
+						{/if}
+					</td>
+				{/each}
+			</tr>
+		{/each}
+	{/if}
+</tbody>
+
+<style>
+	@import './data-table-checkbox.css';
+</style>

package/dist/components/{data-table → data-table-v8}/data-table-virtual-rows.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Row, RowData } from '@tanstack/svelte-table';
-import type { DataTableFeatures, DataTableInstance } from './create-table';
+import type { Row, RowData } from '@tanstack/table-core';
+import type { DataTableInstance } from './data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
-        rows: Row<DataTableFeatures, T>[];
+        rows: Row<T>[];
         scrollContainer: HTMLDivElement;
         isRowSelectionEnabled: boolean;
         table: DataTableInstance<T>;

package/dist/components/{data-table → data-table-v8}/data-table-virtualized.svelte

@@ -1,12 +1,13 @@
 <script lang="ts" generics="T extends RowData">
-	import type { RowData } from '@tanstack/svelte-table';
+	import type { RowData } from '@tanstack/table-core';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type ClassValue } from 'tailwind-variants';
-	import { type DataTableInstance } from './create-table';
+	import type { DataTableInstance } from './data-table-utils';
 	import DataTableHead from './data-table-head.svelte';
 	import DataTableVirtualRows from './data-table-virtual-rows.svelte';
 	import {
 		getAllRowsSelectionState,
+		getReactiveTableState,
 		getSelectedRowCount,
 		tableSizeStyle
 	} from './data-table-utils';
@@ -32,27 +33,27 @@
 
 	let scrollContainerRef = $state<HTMLDivElement | undefined>(undefined);
 
-	const tableStateKey = $derived(JSON.stringify(table.store.state));
-	function trackTableState() {
-		return tableStateKey;
-	}
-
+	const tableState = $derived(getReactiveTableState(table));
 	const rowModel = $derived.by(() => {
-		trackTableState();
+		getReactiveTableState(table);
 		return table.getRowModel();
 	});
 	const headerGroups = $derived.by(() => {
-		trackTableState();
+		getReactiveTableState(table);
 		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);
+	const allRowsSelectionState = $derived.by(() => {
+		getReactiveTableState(table);
+		return getAllRowsSelectionState(table);
+	});
+	const selectedRowCount = $derived.by(() => {
+		getReactiveTableState(table);
+		return getSelectedRowCount(table);
+	});
+	const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
 </script>
 
 <div

package/dist/components/{data-table → data-table-v8}/data-table-virtualized.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { RowData } from '@tanstack/svelte-table';
+import type { RowData } from '@tanstack/table-core';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type ClassValue } from 'tailwind-variants';
-import { type DataTableInstance } from './create-table';
+import type { DataTableInstance } from './data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
         table: DataTableInstance<T>;

package/dist/components/{data-table → data-table-v8}/data-table.svelte

@@ -1,21 +1,21 @@
 <script lang="ts" generics="T extends RowData">
-	import { FlexRender } from '@tanstack/svelte-table';
-	import type { RowData } from '@tanstack/svelte-table';
+	import type { RowData } from '@tanstack/table-core';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type ClassValue } from 'tailwind-variants';
 	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import { type DataTableInstance } from './create-table';
+	import type { DataTableInstance } from './data-table-utils';
 	import DataTableHead from './data-table-head.svelte';
+	import FlexRender from './flex-render.svelte';
 	import {
 		alignClass,
 		columnSizeStyle,
-		//		getAllRowsSelectionState,
 		getBooleanCellValue,
 		getColumnMeta,
 		getPinningStyle,
-		getRowSelectionState,
-		//		getSelectedRowCount,
+		getAllRowsSelectionState,
+		getReactiveCells,
+		getReactiveTableState,
+		getSelectedRowCount,
 		getUrlCellValue,
 		justifyClass,
 		openUrlCell,
@@ -42,9 +42,19 @@
 		...rest
 	}: Props = $props();
 
-	const rowModel = $derived(table.getRowModel());
-	const headerGroups = $derived(table.getHeaderGroups());
-	const visibleLeafColumns = $derived(table.getVisibleLeafColumns());
+	const tableState = $derived(getReactiveTableState(table));
+	const rowModel = $derived.by(() => {
+		getReactiveTableState(table);
+		return table.getRowModel();
+	});
+	const headerGroups = $derived.by(() => {
+		getReactiveTableState(table);
+		return table.getHeaderGroups();
+	});
+	const visibleLeafColumns = $derived.by(() => {
+		getReactiveTableState(table);
+		return table.getVisibleLeafColumns();
+	});
 	const growColumn = $derived(visibleLeafColumns.find((col) => getColumnMeta(col.columnDef)?.grow));
 	const hasGrowColumn = $derived(growColumn !== undefined);
 	const visibleColumnCount = $derived(visibleLeafColumns.length);
@@ -53,14 +63,15 @@
 	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);
+	const allRowsSelectionState = $derived.by(() => {
+		getReactiveTableState(table);
+		return getAllRowsSelectionState(table);
+	});
+	const selectedRowCount = $derived.by(() => {
+		getReactiveTableState(table);
+		return getSelectedRowCount(table);
+	});
+	const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
 </script>
 
 <div
@@ -108,7 +119,7 @@
 			/>
 			<tbody>
 				{#each rowModel.rows as row (row.id)}
-					{@const rowSelected = getRowSelectionState(table, table.store.state.rowSelection, row.id)}
+					{@const rowSelected = getReactiveTableState(table).rowSelection[row.id] === true}
 					<tr
 						class={cn(
 							'group/row',
@@ -125,17 +136,17 @@
 								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"
+								<input
+									type="checkbox"
 									aria-label="Select row"
-									class="mx-auto size-4"
+									class="table-checkbox mx-auto block size-4"
 									checked={rowSelected}
 									disabled={!row.getCanSelect()}
-									onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}
+									onchange={(e) => row.toggleSelected(e.currentTarget.checked)}
 								/>
 							</td>
 						{/if}
-						{#each row.getVisibleCells() as cell (cell.id)}
+						{#each getReactiveCells(row, getReactiveTableState(table).columnVisibility) as cell (cell.id)}
 							{@const columnDef = getColumnMeta(cell.column.columnDef)}
 							<td
 								class={cn(
@@ -143,7 +154,7 @@
 									alignClass(columnDef?.align),
 									cell.column.getIsPinned() && 'bg-(--row-bg)'
 								)}
-								style={getPinningStyle(cell.column, false, isRowSelectionEnabled)}
+								style={getPinningStyle(cell.column, table, false, isRowSelectionEnabled)}
 							>
 								{#if columnDef?.type === 'boolean'}
 									{@const value = getBooleanCellValue(cell.getValue())}
@@ -183,7 +194,7 @@
 										-
 									{/if}
 								{:else}
-									<FlexRender {cell} />
+									<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
 								{/if}
 							</td>
 						{/each}
@@ -211,3 +222,7 @@
 		{/if}
 	</div>
 </div>
+
+<style>
+	@import './data-table-checkbox.css';
+</style>

package/dist/components/{data-table → data-table-v8}/data-table.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { RowData } from '@tanstack/svelte-table';
+import type { RowData } from '@tanstack/table-core';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type ClassValue } from 'tailwind-variants';
-import { type DataTableInstance } from './create-table';
+import type { DataTableInstance } from './data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
         table: DataTableInstance<T>;

package/dist/components/data-table-v8/flex-render.svelte

@@ -0,0 +1,35 @@
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+	import { RenderComponentConfig, RenderSnippetConfig } from './render-helpers.js';
+
+	type Props = {
+		content?:
+			| (TContext extends HeaderContext<TData, TValue>
+					? ColumnDefTemplate<HeaderContext<TData, TValue>>
+					: TContext extends CellContext<TData, TValue>
+						? ColumnDefTemplate<CellContext<TData, TValue>>
+						: never)
+			| undefined;
+		context: TContext;
+	};
+
+	let { content, context }: Props = $props();
+</script>
+
+{#if typeof content === 'string'}
+	{content}
+{:else if content instanceof Function}
+	{@const result = content(context as never)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet(params)}
+	{:else}
+		{result}
+	{/if}
+{/if}

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

@@ -0,0 +1,28 @@
+import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+declare function $$render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(): {
+    props: {
+        content?: (TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never) | undefined;
+        context: TContext;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> {
+    props(): ReturnType<typeof $$render<TData, TValue, TContext>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue, TContext>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue, TContext>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const FlexRender: $$IsomorphicComponent;
+type FlexRender<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> = InstanceType<typeof FlexRender<TData, TValue, TContext>>;
+export default FlexRender;

package/dist/components/{data-table → data-table-v8}/index.d.ts

@@ -1,9 +1,11 @@
 export { createDataTableColumnHelper } from './column-helper';
-export { createTable } from './create-table';
+export { createTable } from './create-table.svelte';
+export { renderComponent, renderSnippet } from './render-helpers';
+export { default as FlexRender } from './flex-render.svelte';
 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 { CreateDataTableOptions, DataTableInstance } from './create-table.svelte';
 export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';

package/dist/components/{data-table → data-table-v8}/index.js

@@ -1,5 +1,7 @@
 export { createDataTableColumnHelper } from './column-helper';
-export { createTable } from './create-table';
+export { createTable } from './create-table.svelte';
+export { renderComponent, renderSnippet } from './render-helpers';
+export { default as FlexRender } from './flex-render.svelte';
 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';

package/dist/components/data-table-v8/render-helpers.d.ts

@@ -0,0 +1,13 @@
+import type { Component, ComponentProps, Snippet } from 'svelte';
+export declare class RenderComponentConfig<TComponent extends Component> {
+    component: TComponent;
+    props: ComponentProps<TComponent> | Record<string, never>;
+    constructor(component: TComponent, props?: ComponentProps<TComponent> | Record<string, never>);
+}
+export declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params: TProps;
+    constructor(snippet: Snippet<[TProps]>, params: TProps);
+}
+export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props?: Props): RenderComponentConfig<T>;
+export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;

package/dist/components/data-table-v8/render-helpers.js

@@ -0,0 +1,23 @@
+export class RenderComponentConfig {
+    component;
+    props;
+    constructor(component, props = {}) {
+        this.component = component;
+        this.props = props;
+    }
+}
+export class RenderSnippetConfig {
+    snippet;
+    params;
+    constructor(snippet, params) {
+        this.snippet = snippet;
+        this.params = params;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function renderComponent(component, props = {}) {
+    return new RenderComponentConfig(component, props);
+}
+export function renderSnippet(snippet, params = {}) {
+    return new RenderSnippetConfig(snippet, params);
+}