@human-kit/svelte-components 1.0.0-alpha.13 → 1.0.0-alpha.15

package/dist/table/root/context.js

@@ -8,6 +8,9 @@ const TABLE_CELL_KEY = Symbol('table-cell');
 export function createTableContext(options = {}) {
     let selectionMode = options.selectionMode ?? 'none';
     let selectionBehavior = options.selectionBehavior ?? 'toggle';
+    let disabledBehavior = options.disabledBehavior ?? 'all';
+    let disallowEmptySelection = options.disallowEmptySelection ?? false;
+    let onRowAction = options.onRowAction;
     let sortDescriptor = options.initialSortDescriptor;
     let focusedCellKey = null;
     let focusedRowTarget = null;
@@ -35,6 +38,7 @@ export function createTableContext(options = {}) {
     let orderedColumnTokensCache = null;
     let visibleOrderedColumnTokensCache = null;
     let columnWidthsCache = null;
+    let visibleColumnWidthsCache = null;
     let navigableCellsCache = null;
     let rowsWithCellsCache = null;
     const layoutVersion = writable(0);
@@ -44,6 +48,7 @@ export function createTableContext(options = {}) {
     const widthVersion = writable(0);
     const resizeVersion = writable(0);
     const instanceCounters = new Map();
+    const selectionUnavailableDescriptionId = createInstanceToken('selection-unavailable');
     function createInstanceToken(prefix) {
         const nextCount = (instanceCounters.get(prefix) ?? 0) + 1;
         instanceCounters.set(prefix, nextCount);
@@ -54,6 +59,7 @@ export function createTableContext(options = {}) {
         orderedColumnTokensCache = null;
         visibleOrderedColumnTokensCache = null;
         columnWidthsCache = null;
+        visibleColumnWidthsCache = null;
         navigableCellsCache = null;
         rowsWithCellsCache = null;
     }
@@ -81,6 +87,7 @@ export function createTableContext(options = {}) {
     }
     function notifyWidth() {
         columnWidthsCache = null;
+        visibleColumnWidthsCache = null;
         if (!widthNotifyScheduled) {
             widthNotifyScheduled = true;
             queueMicrotask(() => {
@@ -136,7 +143,7 @@ export function createTableContext(options = {}) {
         for (const column of columns.values()) {
             if (isColumnHidden(column.id))
                 continue;
-            if (column.allowsResizing || columnsWithResizers.has(column.token))
+            if (columnsWithResizers.has(column.token))
                 return true;
         }
         return false;
@@ -152,11 +159,10 @@ export function createTableContext(options = {}) {
             return;
         notifyLayout();
     }
-    function sameColumnRegistration(left, right) {
+    function sameColumnMetadata(left, right) {
         return (left.token === right.token &&
             left.id === right.id &&
             left.allowsSorting === right.allowsSorting &&
-            left.allowsResizing === right.allowsResizing &&
             left.isRowHeader === right.isRowHeader &&
             left.textValue === right.textValue &&
             left.width === right.width &&
@@ -183,7 +189,7 @@ export function createTableContext(options = {}) {
     function registerColumn(column) {
         const existing = columns.get(column.token);
         const alreadyOrdered = columnOrder.includes(column.token);
-        if (existing && sameColumnRegistration(existing, column) && alreadyOrdered)
+        if (existing && sameColumnMetadata(existing, column) && alreadyOrdered)
             return;
         if (existing && existing.id !== column.id && columnIds.get(existing.id) === column.token) {
             columnIds.delete(existing.id);
@@ -281,7 +287,7 @@ export function createTableContext(options = {}) {
             return false;
         if (isColumnHidden(columnId))
             return false;
-        return column.allowsResizing || columnsWithResizers.has(column.token);
+        return columnsWithResizers.has(column.token);
     }
     function getColumnWidths() {
         if (columnWidthsCache)
@@ -300,12 +306,15 @@ export function createTableContext(options = {}) {
         return widths;
     }
     function getVisibleColumnWidths() {
+        if (visibleColumnWidthsCache)
+            return visibleColumnWidthsCache;
         const widths = new Map();
         for (const [columnId, width] of getColumnWidths()) {
             if (isColumnHidden(columnId))
                 continue;
             widths.set(columnId, width);
         }
+        visibleColumnWidthsCache = widths;
         return widths;
     }
     function getMeasuredHeaderWidth(columnToken) {
@@ -444,6 +453,33 @@ export function createTableContext(options = {}) {
         focusedRowTarget = null;
         notifyFocus();
     }
+    function reconcileFocusAfterDisabledStateChange() {
+        if (focusedCellKey) {
+            const focusedCell = cells.get(focusedCellKey);
+            if (focusedCell &&
+                focusedCell.section === 'body' &&
+                isRowDisabled(rows.get(focusedCell.rowToken)?.id, rows.get(focusedCell.rowToken)?.disabled)) {
+                moveFocus('down');
+                const nextFocusedCell = cells.get(focusedCellKey ?? '');
+                if (nextFocusedCell?.section === 'body' &&
+                    isRowDisabled(rows.get(nextFocusedCell.rowToken)?.id, rows.get(nextFocusedCell.rowToken)?.disabled)) {
+                    moveFocus('up');
+                }
+            }
+        }
+        if (focusedRowTarget) {
+            const focusedRow = rows.get(focusedRowTarget.rowToken);
+            if (focusedRow && isRowDisabled(focusedRow.id, focusedRow.disabled)) {
+                const nextToken = getFocusableBodyRowToken('start');
+                if (nextToken) {
+                    setFocusedRow(nextToken, focusedRowTarget.edge);
+                }
+                else {
+                    setFocusedRow(null);
+                }
+            }
+        }
+    }
     function setHiddenColumns(columnIds) {
         const next = new Set(columnIds ?? []);
         let changed = next.size !== hiddenColumnIds.size;
@@ -635,19 +671,28 @@ export function createTableContext(options = {}) {
             const row = rows.get(token);
             if (!row?.id)
                 continue;
-            if (disabledKeys.has(row.id) || row.disabled)
+            if (isRowSelectionDisabled(row.id, row.disabled))
                 continue;
             rowIds.push(row.id);
         }
         return rowIds;
     }
-    function isRowDisabled(id, localDisabled = false) {
+    function isRowSelectionDisabled(id, localDisabled = false) {
         if (localDisabled)
             return true;
         if (id === undefined)
             return false;
         return disabledKeys.has(id);
     }
+    function isRowDisabled(id, localDisabled = false) {
+        return disabledBehavior === 'all' && isRowSelectionDisabled(id, localDisabled);
+    }
+    function isRowActionDisabled(id, localDisabled = false) {
+        return disabledBehavior === 'all' && isRowSelectionDisabled(id, localDisabled);
+    }
+    function isRowActionable(id, localDisabled = false) {
+        return Boolean(onRowAction) && id !== undefined && !isRowActionDisabled(id, localDisabled);
+    }
     function isRowSelected(id) {
         if (id === undefined)
             return false;
@@ -919,12 +964,25 @@ export function createTableContext(options = {}) {
         return true;
     }
     function setSelectedKeys(next, anchor) {
+        const previousSelectedKeys = new Set(selectedKeys);
         selectedKeys =
             selectionMode === 'none'
                 ? new Set()
                 : selectionMode === 'single' && next.size > 1
                     ? new Set([next.values().next().value])
                     : next;
+        if (selectionMode !== 'none' && disallowEmptySelection && selectedKeys.size === 0) {
+            const fallbackKey = (anchor !== undefined && anchor !== null && !isRowSelectionDisabled(anchor)
+                ? anchor
+                : previousSelectedKeys.values().next().value) ??
+                getFocusedRowId() ??
+                getOrderedSelectableRowIds()[0];
+            if (fallbackKey !== undefined &&
+                fallbackKey !== null &&
+                !isRowSelectionDisabled(fallbackKey)) {
+                selectedKeys = new Set([fallbackKey]);
+            }
+        }
         const fallbackAnchor = selectedKeys.values().next().value ?? null;
         if (anchor === undefined) {
             selectionAnchorKey = fallbackAnchor;
@@ -933,18 +991,35 @@ export function createTableContext(options = {}) {
         selectionAnchorKey = anchor === null || selectedKeys.has(anchor) ? anchor : fallbackAnchor;
     }
     function replaceSelectionWithRow(id) {
-        if (id === undefined || disabledKeys.has(id))
+        if (id === undefined || isRowSelectionDisabled(id))
+            return;
+        const next = new Set([id]);
+        if (hasSameSelection(selectedKeys, next)) {
+            setSelectedKeys(next, id);
+            notifySelection();
             return;
-        setSelectedKeys(new Set([id]), id);
+        }
+        setSelectedKeys(next, id);
         emitSelectionChange();
     }
+    function applySelectionChange(next, anchor) {
+        const previousSelection = new Set(selectedKeys);
+        const previousAnchor = selectionAnchorKey;
+        setSelectedKeys(next, anchor);
+        if (!hasSameSelection(previousSelection, selectedKeys)) {
+            emitSelectionChange();
+            return;
+        }
+        if (!hasSameSelection(next, selectedKeys) || previousAnchor !== selectionAnchorKey) {
+            notifySelection();
+        }
+    }
     function toggleSelectionForRow(id) {
-        if (id === undefined || disabledKeys.has(id))
+        if (id === undefined || isRowSelectionDisabled(id))
             return;
         if (selectionMode === 'single') {
             const wasSelected = selectedKeys.has(id);
-            setSelectedKeys(selectionBehavior === 'toggle' && wasSelected ? new Set() : new Set([id]), selectionBehavior === 'toggle' && wasSelected ? null : id);
-            emitSelectionChange();
+            applySelectionChange(selectionBehavior === 'toggle' && wasSelected ? new Set() : new Set([id]), selectionBehavior === 'toggle' && wasSelected ? null : id);
             return;
         }
         const next = new Set(selectedKeys);
@@ -954,11 +1029,10 @@ export function createTableContext(options = {}) {
         else {
             next.add(id);
         }
-        setSelectedKeys(next, id);
-        emitSelectionChange();
+        applySelectionChange(next, id);
     }
     function extendSelectionToRow(id, anchorOverride) {
-        if (id === undefined || disabledKeys.has(id))
+        if (id === undefined || isRowSelectionDisabled(id))
             return;
         if (selectionMode !== 'multiple') {
             replaceSelectionWithRow(id);
@@ -979,11 +1053,18 @@ export function createTableContext(options = {}) {
         }
         const start = Math.min(anchorIndex, targetIndex);
         const end = Math.max(anchorIndex, targetIndex);
-        setSelectedKeys(new Set(orderedIds.slice(start, end + 1)), anchor);
-        emitSelectionChange();
+        applySelectionChange(new Set(orderedIds.slice(start, end + 1)), anchor);
     }
-    function pressRow(id, interaction = {}) {
-        if (selectionMode === 'none' || id === undefined || disabledKeys.has(id))
+    function performRowAction(id) {
+        if (!onRowAction || id === undefined || isRowActionDisabled(id))
+            return;
+        onRowAction(id);
+    }
+    function hasActiveSelection() {
+        return selectedKeys.size > 0;
+    }
+    function pressRowSelection(id, interaction = {}) {
+        if (selectionMode === 'none' || id === undefined || isRowSelectionDisabled(id))
             return;
         if (selectionBehavior === 'replace' && selectionMode === 'multiple') {
             if (interaction.shiftKey) {
@@ -999,6 +1080,55 @@ export function createTableContext(options = {}) {
         }
         toggleSelectionForRow(id);
     }
+    function pressRow(id, source, interaction = {}, localDisabled = false) {
+        if (id === undefined)
+            return;
+        if (isRowDisabled(id, localDisabled))
+            return;
+        if (source === 'keyboard-enter') {
+            if (onRowAction) {
+                performRowAction(id);
+                return;
+            }
+            pressRowSelection(id, interaction);
+            return;
+        }
+        if (source === 'keyboard-space') {
+            if (interaction.shiftKey) {
+                extendSelectionToRow(id);
+                return;
+            }
+            if (interaction.ctrlKey || interaction.metaKey) {
+                toggleSelectionForRow(id);
+                return;
+            }
+            toggleRowSelection(id);
+            return;
+        }
+        if (source === 'pointer-double') {
+            if (onRowAction && selectionMode !== 'none' && selectionBehavior === 'replace') {
+                performRowAction(id);
+            }
+            return;
+        }
+        if (!onRowAction) {
+            pressRowSelection(id, interaction);
+            return;
+        }
+        if (selectionMode === 'none') {
+            performRowAction(id);
+            return;
+        }
+        if (selectionBehavior === 'replace') {
+            pressRowSelection(id, interaction);
+            return;
+        }
+        if (hasActiveSelection()) {
+            pressRowSelection(id, interaction);
+            return;
+        }
+        performRowAction(id);
+    }
     function moveFocus(direction, interaction = {}) {
         const rowMap = getRowsWithCells();
         const currentCoord = getFocusedCoord();
@@ -1166,12 +1296,11 @@ export function createTableContext(options = {}) {
         notifySelection();
     }
     function toggleRowSelection(id) {
-        if (selectionMode === 'none' || id === undefined || disabledKeys.has(id))
+        if (selectionMode === 'none' || id === undefined || isRowSelectionDisabled(id))
             return;
         if (selectionMode === 'single') {
             const wasSelected = selectedKeys.has(id);
-            setSelectedKeys(wasSelected ? new Set() : new Set([id]), wasSelected ? null : id);
-            emitSelectionChange();
+            applySelectionChange(wasSelected ? new Set() : new Set([id]), wasSelected ? null : id);
             return;
         }
         const next = new Set(selectedKeys);
@@ -1181,8 +1310,7 @@ export function createTableContext(options = {}) {
         else {
             next.add(id);
         }
-        setSelectedKeys(next, id);
-        emitSelectionChange();
+        applySelectionChange(next, id);
     }
     function selectAllRows() {
         if (selectionMode !== 'multiple')
@@ -1190,7 +1318,7 @@ export function createTableContext(options = {}) {
         const next = new Set();
         for (const token of getOrderedRowTokens('body')) {
             const row = rows.get(token);
-            if (!row?.id || disabledKeys.has(row.id) || row.disabled)
+            if (!row?.id || isRowSelectionDisabled(row.id, row.disabled))
                 continue;
             next.add(row.id);
         }
@@ -1200,14 +1328,21 @@ export function createTableContext(options = {}) {
     function deselectAllRows() {
         if (selectedKeys.size === 0)
             return;
-        setSelectedKeys(new Set(), null);
-        emitSelectionChange();
+        applySelectionChange(new Set(), null);
     }
     function setSelection(keys) {
+        const previousSelection = new Set(selectedKeys);
+        const previousAnchor = selectionAnchorKey;
         const next = new Set(keys);
         const preservedAnchor = selectionAnchorKey !== null && next.has(selectionAnchorKey) ? selectionAnchorKey : undefined;
         setSelectedKeys(next, preservedAnchor);
-        notifySelection();
+        if (!hasSameSelection(previousSelection, selectedKeys)) {
+            emitSelectionChange();
+            return;
+        }
+        if (previousAnchor !== selectionAnchorKey) {
+            notifySelection();
+        }
     }
     function setSelectionMode(mode) {
         const previousSelectedKeys = new Set(selectedKeys);
@@ -1225,6 +1360,23 @@ export function createTableContext(options = {}) {
         selectionBehavior = behavior;
         notifySelection();
     }
+    function setDisabledBehavior(behavior) {
+        disabledBehavior = behavior;
+        invalidateLayoutCaches();
+        reconcileFocusAfterDisabledStateChange();
+        notifyLayout();
+        notifySelection();
+    }
+    function setDisallowEmptySelection(disallow) {
+        disallowEmptySelection = disallow;
+        const previousSelection = new Set(selectedKeys);
+        setSelectedKeys(new Set(selectedKeys), selectionAnchorKey);
+        if (!hasSameSelection(previousSelection, selectedKeys)) {
+            emitSelectionChange();
+            return;
+        }
+        notifySelection();
+    }
     function setDisabledKeys(keys) {
         disabledKeys.clear();
         if (keys) {
@@ -1232,6 +1384,13 @@ export function createTableContext(options = {}) {
                 disabledKeys.add(key);
             }
         }
+        invalidateLayoutCaches();
+        reconcileFocusAfterDisabledStateChange();
+        notifyLayout();
+        notifySelection();
+    }
+    function setRowActionHandler(handler) {
+        onRowAction = handler;
         notifySelection();
     }
     function setSortDescriptor(descriptor) {
@@ -1240,7 +1399,7 @@ export function createTableContext(options = {}) {
         notifySort();
     }
     function isColumnSortable(columnId) {
-        return Array.from(columns.values()).some((column) => column.id === columnId && column.allowsSorting);
+        return getColumnRegistrationById(columnId)?.allowsSorting ?? false;
     }
     function toggleSort(columnId) {
         if (!isColumnSortable(columnId))
@@ -1273,6 +1432,15 @@ export function createTableContext(options = {}) {
         get selectionBehavior() {
             return selectionBehavior;
         },
+        get disabledBehavior() {
+            return disabledBehavior;
+        },
+        get disallowEmptySelection() {
+            return disallowEmptySelection;
+        },
+        get selectionUnavailableDescriptionId() {
+            return selectionUnavailableDescriptionId;
+        },
         disabledKeys,
         get focusedCellKey() {
             return focusedCellKey;
@@ -1321,6 +1489,9 @@ export function createTableContext(options = {}) {
         isRowFocusTarget,
         getRowFocusEdge,
         isRowDisabled,
+        isRowSelectionDisabled,
+        isRowActionDisabled,
+        isRowActionable,
         hasSelectableRows,
         getSelectionCheckboxState,
         registerCell,
@@ -1347,7 +1518,10 @@ export function createTableContext(options = {}) {
         setSelection,
         setSelectionMode,
         setSelectionBehavior,
+        setDisabledBehavior,
+        setDisallowEmptySelection,
         setDisabledKeys,
+        setRowActionHandler,
         setSortDescriptor,
         toggleSort,
         isColumnSortable,

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

@@ -12,49 +12,23 @@
 
 <script lang="ts">
 	import { tick } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+	import type { TableRootProps } from '../types.js';
 	import {
 		createTableContext,
 		setTableContext,
-		type TableContext,
-		type TableSelectionBehavior,
 		type TableSelectionKey,
-		type TableSelectionMode,
 		type TableSortDescriptor
 	} from './context';
-	import {
-		shouldShowFocusVisible,
-		trackInteractionModality
-	} from '../../primitives/input-modality';
-
-	type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
-		selectionMode?: TableSelectionMode;
-		selectionBehavior?: TableSelectionBehavior;
-		hiddenColumns?: Iterable<string>;
-		defaultHiddenColumns?: Iterable<string>;
-		selectedKeys?: Iterable<TableSelectionKey>;
-		defaultSelectedKeys?: Iterable<TableSelectionKey>;
-		sortDescriptor?: TableSortDescriptor;
-		defaultSortDescriptor?: TableSortDescriptor;
-		columnWidths?: Map<string, number>;
-		defaultColumnWidths?: Iterable<readonly [string, number]>;
-		disabledKeys?: Iterable<TableSelectionKey>;
-		onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
-		onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
-		onColumnWidthsChange?: (widths: Map<string, number>) => void;
-		onHiddenColumnsChange?: (columnIds: string[]) => void;
-		onColumnResizeStart?: (columnId: string) => void;
-		onColumnResizeEnd?: (widths: Map<string, number>) => void;
-		children?: Snippet;
-		class?: string;
-		context?: TableContext;
-		element?: HTMLTableElement;
-	};
 
 	let {
 		selectionMode = 'none',
 		selectionBehavior = 'toggle',
+		disabledBehavior = 'all',
+		disallowEmptySelection = false,
 		hiddenColumns = $bindable(),
 		defaultHiddenColumns,
 		selectedKeys = $bindable(),
@@ -66,6 +40,7 @@
 		'aria-label': ariaLabel,
 		'aria-labelledby': ariaLabelledby,
 		disabledKeys,
+		onRowAction,
 		onSelectionChange,
 		onSortChange,
 		onColumnWidthsChange,
@@ -94,11 +69,14 @@
 		createTableContext({
 			selectionMode: (() => selectionMode)(),
 			selectionBehavior: (() => selectionBehavior)(),
+			disabledBehavior: (() => disabledBehavior)(),
+			disallowEmptySelection: (() => disallowEmptySelection)(),
 			initialHiddenColumns: (() => hiddenColumns ?? defaultHiddenColumns)(),
 			initialSelectedKeys: (() => selectedKeys ?? defaultSelectedKeys)(),
 			initialSortDescriptor: (() => sortDescriptor ?? defaultSortDescriptor)(),
 			initialColumnWidths: (() => columnWidths ?? defaultColumnWidths)(),
 			disabledKeys: (() => disabledKeys)(),
+			onRowAction: (() => onRowAction)(),
 			onHiddenColumnsChange: (columnIds) => {
 				pendingControlledHiddenColumns = [...columnIds];
 				hiddenColumns = [...columnIds];
@@ -270,10 +248,22 @@
 		ctx.setSelectionBehavior(selectionBehavior);
 	});
 
+	$effect(() => {
+		ctx.setDisabledBehavior(disabledBehavior);
+	});
+
+	$effect(() => {
+		ctx.setDisallowEmptySelection(disallowEmptySelection);
+	});
+
 	$effect(() => {
 		ctx.setDisabledKeys(disabledKeys);
 	});
 
+	$effect(() => {
+		ctx.setRowActionHandler(onRowAction);
+	});
+
 	$effect(() => {
 		if (selectedKeys !== undefined) {
 			const nextSelection = parseSelection(selectedKeys);
@@ -388,6 +378,7 @@
 	aria-multiselectable={selectionMode === 'multiple' ? true : undefined}
 	data-selection-mode={selectionMode}
 	data-selection-behavior={selectionBehavior}
+	data-disabled-behavior={disabledBehavior}
 	data-focus-within={focusWithin || undefined}
 	data-focus-visible={focusVisible || undefined}
 	onfocusin={handleFocusIn}
@@ -408,3 +399,9 @@
 	style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
 	>{sortAnnouncement}</span
 >
+
+<span
+	id={ctx.selectionUnavailableDescriptionId}
+	style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+	>Selection unavailable for this row.</span
+>

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

@@ -1,29 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import { type TableContext, type TableSelectionBehavior, type TableSelectionKey, type TableSelectionMode, type TableSortDescriptor } from './context';
-type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
-    selectionMode?: TableSelectionMode;
-    selectionBehavior?: TableSelectionBehavior;
-    hiddenColumns?: Iterable<string>;
-    defaultHiddenColumns?: Iterable<string>;
-    selectedKeys?: Iterable<TableSelectionKey>;
-    defaultSelectedKeys?: Iterable<TableSelectionKey>;
-    sortDescriptor?: TableSortDescriptor;
-    defaultSortDescriptor?: TableSortDescriptor;
-    columnWidths?: Map<string, number>;
-    defaultColumnWidths?: Iterable<readonly [string, number]>;
-    disabledKeys?: Iterable<TableSelectionKey>;
-    onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
-    onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
-    onColumnWidthsChange?: (widths: Map<string, number>) => void;
-    onHiddenColumnsChange?: (columnIds: string[]) => void;
-    onColumnResizeStart?: (columnId: string) => void;
-    onColumnResizeEnd?: (widths: Map<string, number>) => void;
-    children?: Snippet;
-    class?: string;
-    context?: TableContext;
-    element?: HTMLTableElement;
-};
+import type { TableRootProps } from '../types.js';
 declare const TableRoot: import("svelte").Component<TableRootProps, {}, "element" | "context" | "hiddenColumns" | "selectedKeys" | "sortDescriptor" | "columnWidths">;
 type TableRoot = ReturnType<typeof TableRoot>;
 export default TableRoot;