@human-kit/svelte-components 1.0.0-alpha.20 → 1.0.0-alpha.21

package/dist/table/checkbox/table-checkbox-test.svelte

@@ -6,6 +6,7 @@
 		TableSelectionKey,
 		TableSelectionMode
 	} from '../root/context';
+	import type { TableBodyVirtualizer } from '../types.js';
 
 	type DemoRow = {
 		id: string;
@@ -32,6 +33,9 @@
 		disallowEmptySelection?: boolean;
 		disabledKeys?: Iterable<TableSelectionKey>;
 		initialSelectedKeys?: Iterable<TableSelectionKey>;
+		useItemsMode?: boolean;
+		virtualizer?: TableBodyVirtualizer;
+		containerHeight?: string;
 	};
 
 	let {
@@ -41,7 +45,10 @@
 		disabledBehavior = 'all',
 		disallowEmptySelection = false,
 		disabledKeys,
-		initialSelectedKeys
+		initialSelectedKeys,
+		useItemsMode = false,
+		virtualizer,
+		containerHeight = '160px'
 	}: CheckboxTestProps = $props();
 
 	let currentSelectedKeys = $state<Set<TableSelectionKey>>(
@@ -49,80 +56,115 @@
 	);
 </script>
 
-<Table.Root
-	aria-label="Users table"
-	{selectionMode}
-	{selectionBehavior}
-	{disabledBehavior}
-	{disallowEmptySelection}
-	bind:selectedKeys={currentSelectedKeys}
-	{disabledKeys}
->
-	<Table.Header>
-		<Table.Row>
-			<Table.Column id="selection" textValue="Selection">
-				<Table.ColumnHeaderCell data-testid="selection-header-cell">
-					<Table.Checkbox style={checkboxStyle} data-testid="header-checkbox">
-						<Table.CheckboxIndicator style={indicatorStyle}>
-							<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
-								<path
-									d="M3.75 8.5 6.75 11.5 12.25 5.5"
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								/>
-							</svg>
-						</Table.CheckboxIndicator>
-					</Table.Checkbox>
-				</Table.ColumnHeaderCell>
-			</Table.Column>
-			<Table.Column id="email" isRowHeader textValue="Email">
-				<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
-			</Table.Column>
-			<Table.Column id="group" textValue="Group">
-				<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
-			</Table.Column>
-		</Table.Row>
-	</Table.Header>
-
-	<Table.Body>
-		{#each rows as row (row.id)}
-			<Table.Row
-				id={row.id}
-				isDisabled={disabledKeys ? Array.from(disabledKeys).includes(row.id) : false}
-			>
-				<Table.Cell data-testid={`selection-cell-${row.id}`}>
-					<Table.Checkbox style={checkboxStyle} data-testid={`row-checkbox-${row.id}`}>
-						<Table.CheckboxIndicator style={indicatorStyle}>
-							<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
-								<path
-									d="M3.75 8.5 6.75 11.5 12.25 5.5"
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								/>
-							</svg>
-						</Table.CheckboxIndicator>
-					</Table.Checkbox>
-				</Table.Cell>
-				<Table.Cell data-testid={`email-cell-${row.id}`}>{row.email}</Table.Cell>
-				<Table.Cell data-testid={`group-cell-${row.id}`}>{row.group}</Table.Cell>
+<div style={useItemsMode ? `max-height:${containerHeight};overflow:auto;` : undefined}>
+	<Table.Root
+		aria-label="Users table"
+		{selectionMode}
+		{selectionBehavior}
+		{disabledBehavior}
+		{disallowEmptySelection}
+		bind:selectedKeys={currentSelectedKeys}
+		{disabledKeys}
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="selection" textValue="Selection">
+					<Table.ColumnHeaderCell data-testid="selection-header-cell">
+						<Table.Checkbox style={checkboxStyle} data-testid="header-checkbox">
+							<Table.CheckboxIndicator style={indicatorStyle}>
+								<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
+									<path
+										d="M3.75 8.5 6.75 11.5 12.25 5.5"
+										fill="none"
+										stroke="currentColor"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+									/>
+								</svg>
+							</Table.CheckboxIndicator>
+						</Table.Checkbox>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="email" isRowHeader textValue="Email">
+					<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="group" textValue="Group">
+					<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
+				</Table.Column>
 			</Table.Row>
-		{/each}
-		<Table.EmptyState>No users found.</Table.EmptyState>
-	</Table.Body>
+		</Table.Header>
+
+		{#if useItemsMode}
+			<Table.Body items={rows} {virtualizer}>
+				{#snippet children(row)}
+					<Table.Row
+						id={row.id}
+						isDisabled={disabledKeys ? Array.from(disabledKeys).includes(row.id) : false}
+					>
+						<Table.Cell data-testid={`selection-cell-${row.id}`}>
+							<Table.Checkbox style={checkboxStyle} data-testid={`row-checkbox-${row.id}`}>
+								<Table.CheckboxIndicator style={indicatorStyle}>
+									<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
+										<path
+											d="M3.75 8.5 6.75 11.5 12.25 5.5"
+											fill="none"
+											stroke="currentColor"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+										/>
+									</svg>
+								</Table.CheckboxIndicator>
+							</Table.Checkbox>
+						</Table.Cell>
+						<Table.Cell data-testid={`email-cell-${row.id}`}>{row.email}</Table.Cell>
+						<Table.Cell data-testid={`group-cell-${row.id}`}>{row.group}</Table.Cell>
+					</Table.Row>
+				{/snippet}
+				{#snippet empty()}
+					<Table.EmptyState>No users found.</Table.EmptyState>
+				{/snippet}
+			</Table.Body>
+		{:else}
+			<Table.Body>
+				{#each rows as row (row.id)}
+					<Table.Row
+						id={row.id}
+						isDisabled={disabledKeys ? Array.from(disabledKeys).includes(row.id) : false}
+					>
+						<Table.Cell data-testid={`selection-cell-${row.id}`}>
+							<Table.Checkbox style={checkboxStyle} data-testid={`row-checkbox-${row.id}`}>
+								<Table.CheckboxIndicator style={indicatorStyle}>
+									<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
+										<path
+											d="M3.75 8.5 6.75 11.5 12.25 5.5"
+											fill="none"
+											stroke="currentColor"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+										/>
+									</svg>
+								</Table.CheckboxIndicator>
+							</Table.Checkbox>
+						</Table.Cell>
+						<Table.Cell data-testid={`email-cell-${row.id}`}>{row.email}</Table.Cell>
+						<Table.Cell data-testid={`group-cell-${row.id}`}>{row.group}</Table.Cell>
+					</Table.Row>
+				{/each}
+				<Table.EmptyState>No users found.</Table.EmptyState>
+			</Table.Body>
+		{/if}
 
-	<Table.Footer>
-		<Table.Row>
-			<Table.Cell />
-			<Table.Cell>Total</Table.Cell>
-			<Table.Cell>{rows.length} users</Table.Cell>
-		</Table.Row>
-	</Table.Footer>
-</Table.Root>
+		<Table.Footer>
+			<Table.Row>
+				<Table.Cell />
+				<Table.Cell>Total</Table.Cell>
+				<Table.Cell>{rows.length} users</Table.Cell>
+			</Table.Row>
+		</Table.Footer>
+	</Table.Root>
+</div>
 
 <output data-testid="selected-keys">{JSON.stringify([...currentSelectedKeys])}</output>

package/dist/table/checkbox/table-checkbox-test.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { TableDisabledBehavior, TableSelectionBehavior, TableSelectionKey, TableSelectionMode } from '../root/context';
+import type { TableBodyVirtualizer } from '../types.js';
 type DemoRow = {
     id: string;
     email: string;
@@ -12,6 +13,9 @@ type CheckboxTestProps = {
     disallowEmptySelection?: boolean;
     disabledKeys?: Iterable<TableSelectionKey>;
     initialSelectedKeys?: Iterable<TableSelectionKey>;
+    useItemsMode?: boolean;
+    virtualizer?: TableBodyVirtualizer;
+    containerHeight?: string;
 };
 declare const TableCheckboxTest: import("svelte").Component<CheckboxTestProps, {}, "">;
 type TableCheckboxTest = ReturnType<typeof TableCheckboxTest>;

package/dist/table/empty-state/table-empty-state.svelte

@@ -13,7 +13,7 @@
 	const layoutVersion = table.layoutVersion;
 	const isVisible = $derived.by(() => {
 		void $layoutVersion;
-		return table.getBodyRowCount() === 0;
+		return table.getLogicalBodyRowCount() === 0;
 	});
 	const columnCount = $derived.by(() => {
 		void $layoutVersion;

package/dist/table/index.d.ts

@@ -1,5 +1,5 @@
 export * as Table from './index.parts.js';
-export type { TableBodyProps, TableCellProps, TableCheckboxIndicatorProps, TableCheckboxProps, TableColumnHeaderCellProps, TableColumnProps, TableColumnResizerProps, TableSortTriggerRenderState, TableSortTriggerProps, TableEmptyStateProps, TableFooterProps, TableHeaderProps, TableRowProps, TableRootProps } from './types.js';
+export type { TableBodyProps, TableBodyVirtualizer, TableCellProps, TableCheckboxIndicatorProps, TableCheckboxProps, TableColumnHeaderCellProps, TableColumnProps, TableColumnResizerProps, TableSortTriggerRenderState, TableSortTriggerProps, TableEmptyStateProps, TableFooterProps, TableHeaderProps, TableRowProps, TableRootProps } from './types.js';
 export { default as TableRoot } from './root/table-root.svelte';
 export { default as TableColumn } from './column/table-column.svelte';
 export { default as TableHeader } from './header/table-header.svelte';

package/dist/table/root/context.d.ts

@@ -1,5 +1,8 @@
 import { type Readable } from 'svelte/store';
 export type TableSelectionKey = string | number;
+export type TableRowItem = Record<string, unknown> & {
+    id: TableSelectionKey;
+};
 export type TableSelectionMode = 'none' | 'single' | 'multiple';
 export type TableSelectionBehavior = 'toggle' | 'replace';
 export type TableDisabledBehavior = 'selection' | 'all';
@@ -132,9 +135,11 @@ export type TableContext = {
     hasResizableColumns: () => boolean;
     registerRow: (row: TableRowRegistration) => void;
     unregisterRow: (token: string) => void;
+    setLogicalBodyRows: (ids?: Iterable<TableSelectionKey>) => void;
     markBodyRowsInitialized: () => void;
     getHeaderRowCount: () => number;
     getBodyRowCount: () => number;
+    getLogicalBodyRowCount: () => number;
     isRowSelected: (id: TableSelectionKey | undefined) => boolean;
     isRowFocused: (token: string) => boolean;
     isRowFocusTarget: (token: string) => boolean;

package/dist/table/root/context.js

@@ -75,6 +75,7 @@ export function createTableContext(options = {}) {
     const bodyRowOrder = [];
     let bodyRowsInitialized = false;
     let selectableBodyRowCount = 0;
+    let logicalBodyRowIds = null;
     const cells = new Map();
     const cellOrder = [];
     let orderedRowTokensCache = {
@@ -86,6 +87,8 @@ export function createTableContext(options = {}) {
     let columnWidthsCache = null;
     let visibleColumnWidthsCache = null;
     let resolvedVisibleColumnWidthsCache = null;
+    let measuredTableWidthCache;
+    let hasMeasuredTableWidthCache = false;
     let navigableCellsCache = null;
     let rowsWithCellsCache = null;
     const layoutVersion = writable(0);
@@ -109,6 +112,8 @@ export function createTableContext(options = {}) {
         columnWidthsCache = null;
         visibleColumnWidthsCache = null;
         resolvedVisibleColumnWidthsCache = null;
+        measuredTableWidthCache = undefined;
+        hasMeasuredTableWidthCache = false;
         navigableCellsCache = null;
         rowsWithCellsCache = null;
     }
@@ -153,6 +158,8 @@ export function createTableContext(options = {}) {
         columnWidthsCache = null;
         visibleColumnWidthsCache = null;
         resolvedVisibleColumnWidthsCache = null;
+        measuredTableWidthCache = undefined;
+        hasMeasuredTableWidthCache = false;
         if (!widthNotifyScheduled) {
             widthNotifyScheduled = true;
             queueMicrotask(() => {
@@ -165,6 +172,8 @@ export function createTableContext(options = {}) {
         columnWidthsCache = null;
         visibleColumnWidthsCache = null;
         resolvedVisibleColumnWidthsCache = null;
+        measuredTableWidthCache = undefined;
+        hasMeasuredTableWidthCache = false;
         flushSync(() => {
             widthVersion.update((value) => value + 1);
         });
@@ -259,6 +268,9 @@ export function createTableContext(options = {}) {
         return resizerLayoutReady && columnsWithResizers.size > 0 ? '1fr' : undefined;
     }
     function getMeasuredTableWidth() {
+        if (hasMeasuredTableWidthCache) {
+            return measuredTableWidthCache;
+        }
         const tableCell = Array.from(cells.values()).find((cell) => cell.element)?.element;
         const tableElement = tableCell?.closest('table');
         const tableWidth = tableElement?.getBoundingClientRect().width;
@@ -277,9 +289,13 @@ export function createTableContext(options = {}) {
         // the actual available space the table should fill.
         const width = containerWidth ?? tableWidth;
         if (width === undefined || width <= 0 || !Number.isFinite(width)) {
+            hasMeasuredTableWidthCache = true;
+            measuredTableWidthCache = undefined;
             return undefined;
         }
-        return Math.round(width);
+        measuredTableWidthCache = Math.round(width);
+        hasMeasuredTableWidthCache = true;
+        return measuredTableWidthCache;
     }
     function getColumnWidthBounds(columnId) {
         const registration = getColumnRegistrationById(columnId);
@@ -1066,6 +1082,27 @@ export function createTableContext(options = {}) {
         }
         notifyLayout();
     }
+    function hasSameLogicalBodyRows(nextIds) {
+        if (logicalBodyRowIds === nextIds)
+            return true;
+        if (logicalBodyRowIds === null || nextIds === null)
+            return false;
+        if (logicalBodyRowIds.length !== nextIds.length)
+            return false;
+        for (let index = 0; index < logicalBodyRowIds.length; index += 1) {
+            if (logicalBodyRowIds[index] !== nextIds[index])
+                return false;
+        }
+        return true;
+    }
+    function setLogicalBodyRows(ids) {
+        const nextIds = ids ? [...ids] : null;
+        if (hasSameLogicalBodyRows(nextIds))
+            return;
+        logicalBodyRowIds = nextIds;
+        notifyLayout();
+        notifySelection();
+    }
     function unregisterRow(token) {
         const row = rows.get(token);
         const previousSelectableBodyRowCount = selectableBodyRowCount;
@@ -1107,7 +1144,7 @@ export function createTableContext(options = {}) {
             return;
         const optimisticHasSelectableRows = selectionMode === 'multiple' || selectedKeys.size > 0;
         bodyRowsInitialized = true;
-        const actualHasSelectableRows = selectableBodyRowCount > 0 || selectedKeys.size > 0;
+        const actualHasSelectableRows = hasSelectableRows();
         if (optimisticHasSelectableRows !== actualHasSelectableRows) {
             notifySelection();
         }
@@ -1115,6 +1152,9 @@ export function createTableContext(options = {}) {
     function getBodyRowCount() {
         return getOrderedRowTokens('body').length;
     }
+    function getLogicalBodyRowCount() {
+        return logicalBodyRowIds?.length ?? getBodyRowCount();
+    }
     function getHeaderRowCount() {
         return getOrderedRowTokens('header').length;
     }
@@ -1143,6 +1183,9 @@ export function createTableContext(options = {}) {
         return sorted;
     }
     function getOrderedSelectableRowIds() {
+        if (logicalBodyRowIds) {
+            return logicalBodyRowIds.filter((id) => !isRowSelectionDisabled(id));
+        }
         const rowIds = [];
         for (const token of getOrderedRowTokens('body')) {
             const row = rows.get(token);
@@ -1213,6 +1256,9 @@ export function createTableContext(options = {}) {
         if (!bodyRowsInitialized) {
             return selectionMode === 'multiple' || selectedKeys.size > 0;
         }
+        if (logicalBodyRowIds) {
+            return getOrderedSelectableRowIds().length > 0 || selectedKeys.size > 0;
+        }
         return selectableBodyRowCount > 0 || selectedKeys.size > 0;
     }
     function isRowFocused(token) {
@@ -1811,13 +1857,7 @@ export function createTableContext(options = {}) {
     function selectAllRows() {
         if (selectionMode !== 'multiple')
             return;
-        const next = new Set();
-        for (const token of getOrderedRowTokens('body')) {
-            const row = rows.get(token);
-            if (!row?.id || isRowSelectionDisabled(row.id, row.disabled))
-                continue;
-            next.add(row.id);
-        }
+        const next = new Set(getOrderedSelectableRowIds());
         setSelectedKeys(next, next.values().next().value ?? null);
         emitSelectionChange();
     }
@@ -1992,9 +2032,11 @@ export function createTableContext(options = {}) {
         hasResizableColumns,
         registerRow,
         unregisterRow,
+        setLogicalBodyRows,
         markBodyRowsInitialized,
         getHeaderRowCount,
         getBodyRowCount,
+        getLogicalBodyRowCount,
         isRowSelected,
         isRowFocused,
         isRowFocusTarget,

package/dist/table/root/table-root.svelte

@@ -159,7 +159,7 @@
 	});
 	const ariaRowCount = $derived.by(() => {
 		void $layoutVersion;
-		const rowCount = ctx.getHeaderRowCount() + ctx.getBodyRowCount();
+		const rowCount = ctx.getHeaderRowCount() + ctx.getLogicalBodyRowCount();
 		return rowCount > 0 ? rowCount : undefined;
 	});
 
@@ -313,27 +313,35 @@
 		if (!tableElement) return;
 
 		const resizeTarget = tableElement.parentElement ?? tableElement;
-		const refreshMeasuredLayout = () => {
-			ctx.refreshMeasuredLayout();
+		let refreshFrame = 0;
+		const scheduleMeasuredLayoutRefresh = () => {
+			if (refreshFrame !== 0) return;
+			refreshFrame = window.requestAnimationFrame(() => {
+				refreshFrame = 0;
+				ctx.refreshMeasuredLayout();
+			});
 		};
 
-		refreshMeasuredLayout();
+		scheduleMeasuredLayoutRefresh();
 
-		window.addEventListener('resize', refreshMeasuredLayout);
-		window.visualViewport?.addEventListener('resize', refreshMeasuredLayout);
+		window.addEventListener('resize', scheduleMeasuredLayoutRefresh);
+		window.visualViewport?.addEventListener('resize', scheduleMeasuredLayoutRefresh);
 
 		const resizeObserver =
 			typeof ResizeObserver !== 'undefined'
 				? new ResizeObserver(() => {
-						refreshMeasuredLayout();
+						scheduleMeasuredLayoutRefresh();
 					})
 				: null;
 
 		resizeObserver?.observe(resizeTarget);
 
 		return () => {
-			window.removeEventListener('resize', refreshMeasuredLayout);
-			window.visualViewport?.removeEventListener('resize', refreshMeasuredLayout);
+			if (refreshFrame !== 0) {
+				window.cancelAnimationFrame(refreshFrame);
+			}
+			window.removeEventListener('resize', scheduleMeasuredLayoutRefresh);
+			window.visualViewport?.removeEventListener('resize', scheduleMeasuredLayoutRefresh);
 			resizeObserver?.disconnect();
 		};
 	});

package/dist/table/root/table-ssr-wrapper-column.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import {
+		useTableSsrWrapperRegistry,
+		type TableSsrWrapperColumn
+	} from './table-ssr-wrapper-context';
+
+	let { id, header }: TableSsrWrapperColumn = $props();
+
+	const registry = useTableSsrWrapperRegistry();
+
+	function getToken() {
+		return `ssr-column-${id}`;
+	}
+
+	let registeredToken = getToken();
+
+	function getColumn() {
+		return { id, header };
+	}
+
+	function syncRegistration() {
+		const nextToken = getToken();
+
+		if (nextToken !== registeredToken) {
+			registry.removeColumn(registeredToken);
+			registeredToken = nextToken;
+		}
+
+		registry.upsertColumn(registeredToken, getColumn());
+	}
+
+	untrack(() => {
+		syncRegistration();
+	});
+
+	$effect(() => {
+		untrack(() => {
+			syncRegistration();
+		});
+	});
+
+	onDestroy(() => {
+		registry.removeColumn(registeredToken);
+	});
+</script>
+
+<span hidden aria-hidden="true" data-ssr-wrapper-column={id}></span>

package/dist/table/root/table-ssr-wrapper-column.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type TableSsrWrapperColumn } from './table-ssr-wrapper-context';
+declare const TableSsrWrapperColumn: any;
+type TableSsrWrapperColumn = ReturnType<typeof TableSsrWrapperColumn>;
+export default TableSsrWrapperColumn;

package/dist/table/root/table-ssr-wrapper-context.d.ts

@@ -0,0 +1,11 @@
+export type TableSsrWrapperColumn = {
+    id: string;
+    header: string;
+};
+type TableSsrWrapperRegistry = {
+    upsertColumn: (token: string, column: TableSsrWrapperColumn) => void;
+    removeColumn: (token: string) => void;
+};
+export declare function setTableSsrWrapperRegistry(registry: TableSsrWrapperRegistry): TableSsrWrapperRegistry;
+export declare function useTableSsrWrapperRegistry(): TableSsrWrapperRegistry;
+export {};

package/dist/table/root/table-ssr-wrapper-context.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+const TABLE_SSR_WRAPPER_KEY = Symbol('table-ssr-wrapper');
+export function setTableSsrWrapperRegistry(registry) {
+    setContext(TABLE_SSR_WRAPPER_KEY, registry);
+    return registry;
+}
+export function useTableSsrWrapperRegistry() {
+    const registry = getContext(TABLE_SSR_WRAPPER_KEY);
+    if (!registry) {
+        throw new Error('Table SSR wrapper registry is not available.');
+    }
+    return registry;
+}

package/dist/table/root/table-ssr-wrapper-test.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import TableSsrWrapperColumn from './table-ssr-wrapper-column.svelte';
+	import {
+		setTableSsrWrapperRegistry,
+		type TableSsrWrapperColumn as RegisteredColumn
+	} from './table-ssr-wrapper-context';
+
+	type DemoRow = {
+		id: string;
+		email: string;
+		group: string;
+	};
+
+	const rows: DemoRow[] = [{ id: 'danilo', email: 'danilo@example.com', group: 'Developer' }];
+	let registeredColumns = $state<Array<{ token: string; column: RegisteredColumn }>>([]);
+
+	setTableSsrWrapperRegistry({
+		upsertColumn(token, column) {
+			const index = registeredColumns.findIndex((entry) => entry.token === token);
+
+			if (index === -1) {
+				registeredColumns = [...registeredColumns, { token, column }];
+				return;
+			}
+
+			registeredColumns = registeredColumns.map((entry) =>
+				entry.token === token ? { token, column } : entry
+			);
+		},
+		removeColumn(token) {
+			registeredColumns = registeredColumns.filter((entry) => entry.token !== token);
+		}
+	});
+
+	function getResolvedColumns() {
+		return registeredColumns.map((entry) => entry.column);
+	}
+</script>
+
+<TableSsrWrapperColumn id="email" header="Email" />
+<TableSsrWrapperColumn id="group" header="Group" />
+
+<div data-testid="ssr-column-count">{(() => getResolvedColumns().length)()}</div>
+
+<div data-testid="ssr-headers">
+	{#each (() => getResolvedColumns())() as column (column.id)}
+		<span>{column.header}</span>
+	{/each}
+</div>
+
+<div data-testid="ssr-body-cells">
+	{#each rows as row (row.id)}
+		{#each (() => getResolvedColumns())() as column (column.id)}
+			<span>{row[column.id as keyof DemoRow]}</span>
+		{/each}
+	{/each}
+</div>

package/dist/table/root/table-ssr-wrapper-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TableSsrWrapperTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TableSsrWrapperTest = ReturnType<typeof TableSsrWrapperTest>;
+export default TableSsrWrapperTest;

package/dist/table/types.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { TableColumnWidth, TableContext, TableDisabledBehavior, TableRowActionHandler, TableSelectionBehavior, TableSelectionKey, TableSelectionMode, TableSortDirection, TableSortDescriptor } from './root/context.js';
+import type { TableColumnWidth, TableContext, TableDisabledBehavior, TableRowActionHandler, TableRowItem, TableSelectionBehavior, TableSelectionKey, TableSelectionMode, TableSortDirection, TableSortDescriptor } from './root/context.js';
 export type TableColumnProps = {
     id: string;
     isRowHeader?: boolean;
@@ -15,10 +15,26 @@ export type TableHeaderProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'ch
     children?: Snippet;
     class?: string;
 };
-export type TableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
-    children?: Snippet;
+export type TableBodyVirtualizer = {
+    rowHeight: number;
+    overscan?: number;
+};
+type TableBodyBaseProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
     class?: string;
 };
+export type TableBodyManualProps = TableBodyBaseProps & {
+    items?: undefined;
+    virtualizer?: undefined;
+    children?: Snippet;
+    empty?: undefined;
+};
+export type TableBodyItemsProps<T extends TableRowItem = TableRowItem> = TableBodyBaseProps & {
+    items: readonly T[];
+    virtualizer?: TableBodyVirtualizer;
+    children?: Snippet<[T]>;
+    empty?: Snippet;
+};
+export type TableBodyProps<T extends TableRowItem = TableRowItem> = TableBodyManualProps | TableBodyItemsProps<T>;
 export type TableFooterProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
     children?: Snippet;
     class?: string;
@@ -93,3 +109,4 @@ export type TableCheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>,
     children?: Snippet;
     class?: string;
 };
+export {};