@choice-ui/react 1.4.3 → 1.4.5

package/dist/components/table/src/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './use-column-order';
+export * from './use-column-resize';
+export * from './use-consecutive-selection-style';
+export * from './use-table';

package/dist/components/table/src/hooks/use-column-order.d.ts

@@ -0,0 +1,26 @@
+import { ColumnOrderState } from '../types';
+interface UseColumnOrderOptions {
+    columnOrder?: ColumnOrderState;
+    defaultColumnOrder?: ColumnOrderState;
+    onColumnOrderChange?: (order: ColumnOrderState) => void;
+}
+export interface DragState {
+    columnId: string;
+    targetIndex: number;
+    /** Mouse X position relative to table */
+    mouseX: number;
+    /** Source column left offset */
+    sourceLeft: number;
+    /** Source column width */
+    sourceWidth: number;
+}
+export declare function useColumnOrder(options: UseColumnOrderOptions): {
+    columnOrder: ColumnOrderState;
+    dragState: DragState | null;
+    startDrag: (columnId: string, mouseX: number, sourceLeft: number, sourceWidth: number) => void;
+    updateDragTarget: (targetIndex: number) => void;
+    updateDragPosition: (mouseX: number) => void;
+    endDrag: () => void;
+    cancelDrag: () => void;
+};
+export {};

package/dist/components/table/src/hooks/use-column-order.js

@@ -0,0 +1,95 @@
+import { useState, useRef, useCallback } from "react";
+function useColumnOrder(options) {
+  const { columnOrder: controlledOrder, defaultColumnOrder = [], onColumnOrderChange } = options;
+  const isControlled = controlledOrder !== void 0;
+  const [internalOrder, setInternalOrder] = useState(defaultColumnOrder);
+  const columnOrder = isControlled ? controlledOrder : internalOrder;
+  const [dragState, setDragState] = useState(null);
+  const dragStateRef = useRef(null);
+  const columnOrderRef = useRef(columnOrder);
+  columnOrderRef.current = columnOrder;
+  const updateOrder = useCallback(
+    (newOrder) => {
+      if (!isControlled) {
+        setInternalOrder(newOrder);
+      }
+      onColumnOrderChange == null ? void 0 : onColumnOrderChange(newOrder);
+    },
+    [isControlled, onColumnOrderChange]
+  );
+  const startDrag = useCallback(
+    (columnId, mouseX, sourceLeft, sourceWidth) => {
+      const state = { columnId, targetIndex: -1, mouseX, sourceLeft, sourceWidth };
+      dragStateRef.current = state;
+      setDragState(state);
+    },
+    []
+  );
+  const updateDragTarget = useCallback((targetIndex) => {
+    if (dragStateRef.current) {
+      dragStateRef.current = { ...dragStateRef.current, targetIndex };
+    }
+    setDragState((prev) => prev ? { ...prev, targetIndex } : null);
+  }, []);
+  const updateDragPosition = useCallback((mouseX) => {
+    if (dragStateRef.current) {
+      dragStateRef.current = { ...dragStateRef.current, mouseX };
+    }
+    setDragState((prev) => prev ? { ...prev, mouseX } : null);
+  }, []);
+  const endDrag = useCallback(() => {
+    const currentDragState = dragStateRef.current;
+    if (!currentDragState || currentDragState.targetIndex < 0) {
+      dragStateRef.current = null;
+      setDragState(null);
+      return;
+    }
+    const { columnId, targetIndex } = currentDragState;
+    if (!columnId) {
+      dragStateRef.current = null;
+      setDragState(null);
+      return;
+    }
+    const currentOrder = columnOrderRef.current;
+    const workingOrder = currentOrder.length > 0 ? [...currentOrder] : [];
+    const currentIndex = workingOrder.indexOf(columnId);
+    if (currentIndex === -1) {
+      dragStateRef.current = null;
+      setDragState(null);
+      return;
+    }
+    if (targetIndex < 0 || targetIndex > workingOrder.length) {
+      dragStateRef.current = null;
+      setDragState(null);
+      return;
+    }
+    if (currentIndex === targetIndex || currentIndex + 1 === targetIndex) {
+      dragStateRef.current = null;
+      setDragState(null);
+      return;
+    }
+    workingOrder.splice(currentIndex, 1);
+    const adjustedTarget = targetIndex > currentIndex ? targetIndex - 1 : targetIndex;
+    const safeTarget = Math.max(0, Math.min(adjustedTarget, workingOrder.length));
+    workingOrder.splice(safeTarget, 0, columnId);
+    dragStateRef.current = null;
+    setDragState(null);
+    updateOrder(workingOrder);
+  }, [updateOrder]);
+  const cancelDrag = useCallback(() => {
+    dragStateRef.current = null;
+    setDragState(null);
+  }, []);
+  return {
+    columnOrder,
+    dragState,
+    startDrag,
+    updateDragTarget,
+    updateDragPosition,
+    endDrag,
+    cancelDrag
+  };
+}
+export {
+  useColumnOrder
+};

package/dist/components/table/src/hooks/use-column-resize.d.ts

@@ -0,0 +1,17 @@
+import { ColumnWidthState, ResizeState } from '../types';
+interface UseColumnResizeOptions {
+    columnWidths?: ColumnWidthState;
+    defaultColumnWidths?: ColumnWidthState;
+    onColumnWidthsChange?: (widths: ColumnWidthState) => void;
+    minWidth?: number;
+    maxWidth?: number;
+}
+export declare function useColumnResize(options: UseColumnResizeOptions): {
+    columnWidths: ColumnWidthState;
+    resizeState: ResizeState | null;
+    getColumnWidth: (columnId: string) => number | undefined;
+    startResize: (columnId: string, startX: number, startWidth: number) => void;
+    updateResize: (currentX: number) => void;
+    endResize: () => void;
+};
+export {};

package/dist/components/table/src/hooks/use-column-resize.js

@@ -0,0 +1,75 @@
+import { useState, useRef, useCallback } from "react";
+function useColumnResize(options) {
+  const {
+    columnWidths: controlledWidths,
+    defaultColumnWidths = {},
+    onColumnWidthsChange,
+    minWidth = 50,
+    maxWidth = 1e3
+  } = options;
+  const isControlled = controlledWidths !== void 0;
+  const [internalWidths, setInternalWidths] = useState(defaultColumnWidths);
+  const columnWidths = isControlled ? controlledWidths : internalWidths;
+  const [resizeState, setResizeState] = useState(null);
+  const resizeStateRef = useRef(null);
+  const columnWidthsRef = useRef(columnWidths);
+  columnWidthsRef.current = columnWidths;
+  const updateWidths = useCallback(
+    (newWidths) => {
+      if (!isControlled) {
+        setInternalWidths(newWidths);
+      }
+      onColumnWidthsChange == null ? void 0 : onColumnWidthsChange(newWidths);
+    },
+    [isControlled, onColumnWidthsChange]
+  );
+  const getColumnWidth = useCallback(
+    (columnId) => {
+      return columnWidths[columnId];
+    },
+    [columnWidths]
+  );
+  const startResize = useCallback((columnId, startX, startWidth) => {
+    const state = {
+      columnId,
+      startX,
+      startWidth,
+      currentX: startX
+    };
+    resizeStateRef.current = state;
+    setResizeState(state);
+  }, []);
+  const updateResize = useCallback((currentX) => {
+    if (resizeStateRef.current) {
+      resizeStateRef.current = { ...resizeStateRef.current, currentX };
+    }
+    setResizeState((prev) => prev ? { ...prev, currentX } : null);
+  }, []);
+  const endResize = useCallback(() => {
+    const currentResizeState = resizeStateRef.current;
+    if (!currentResizeState) {
+      setResizeState(null);
+      return;
+    }
+    const { columnId, startWidth, startX, currentX } = currentResizeState;
+    const deltaX = currentX - startX;
+    const clampedWidth = Math.max(minWidth, Math.min(maxWidth, Math.max(0, startWidth + deltaX)));
+    resizeStateRef.current = null;
+    setResizeState(null);
+    updateWidths({
+      ...columnWidthsRef.current,
+      [columnId]: clampedWidth
+    });
+  }, [updateWidths, minWidth, maxWidth]);
+  return {
+    columnWidths,
+    resizeState,
+    getColumnWidth,
+    startResize,
+    updateResize,
+    endResize
+  };
+}
+export {
+  useColumnResize
+};

package/dist/components/table/src/hooks/use-consecutive-selection-style.d.ts

@@ -0,0 +1,12 @@
+import { ConsecutiveStyle, InternalRow, RowKey } from '../types';
+/**
+ * Hook to determine rounded corner style for consecutive selected rows.
+ *
+ * Returns a function that takes an index and returns the appropriate rounded style:
+ * - Single selected: "rounded-md"
+ * - First of consecutive: "rounded-t-md"
+ * - Last of consecutive: "rounded-b-md"
+ * - Middle of consecutive: "rounded-none"
+ * - Not selected: ""
+ */
+export declare function useConsecutiveSelectionStyle<T>(rows: InternalRow<T>[], selectedKeys: Set<RowKey>): (index: number) => ConsecutiveStyle;

package/dist/components/table/src/hooks/use-consecutive-selection-style.js

@@ -0,0 +1,28 @@
+import { useMemo, useCallback } from "react";
+function useConsecutiveSelectionStyle(rows, selectedKeys) {
+  const selectedIndices = useMemo(() => {
+    const indices = /* @__PURE__ */ new Set();
+    rows.forEach((row, index) => {
+      if (selectedKeys.has(row.key)) {
+        indices.add(index);
+      }
+    });
+    return indices;
+  }, [rows, selectedKeys]);
+  return useCallback(
+    (index) => {
+      if (index < 0 || selectedIndices.size === 0) return "";
+      if (!selectedIndices.has(index)) return "";
+      const hasPrev = index > 0 && selectedIndices.has(index - 1);
+      const hasNext = selectedIndices.has(index + 1);
+      if (!hasPrev && !hasNext) return "rounded-md";
+      if (!hasPrev && hasNext) return "rounded-t-md";
+      if (hasPrev && !hasNext) return "rounded-b-md";
+      return "rounded-none";
+    },
+    [selectedIndices]
+  );
+}
+export {
+  useConsecutiveSelectionStyle
+};

package/dist/components/table/src/hooks/use-table.d.ts

@@ -0,0 +1,35 @@
+import { InternalRow, RowKey, SelectionMode, SortDirection, SortingState, TableColumnDef, TableInstance, TableProps } from '../types';
+interface UseTableOptions<T> {
+    data: T[];
+    getRowKey: (row: T, index: number) => RowKey;
+    selectionMode: SelectionMode;
+    selectedKeys?: RowKey[];
+    defaultSelectedKeys?: RowKey[];
+    onSelectionChange?: (keys: RowKey[]) => void;
+    sorting?: SortingState[];
+    defaultSorting?: SortingState[];
+    onSortingChange?: (sorting: SortingState[]) => void;
+    tableRef?: TableProps<T>["tableRef"];
+}
+export declare function useTable<T>(options: UseTableOptions<T>): {
+    rows: InternalRow<T>[];
+    columns: TableColumnDef<T>[];
+    registerColumn: (column: TableColumnDef<T>) => void;
+    unregisterColumn: (id: string) => void;
+    selectedKeys: Set<RowKey>;
+    selectRow: (key: RowKey) => void;
+    deselectRow: (key: RowKey) => void;
+    toggleRowSelection: (key: RowKey, index?: number) => void;
+    selectRange: (fromIndex: number, toIndex: number) => void;
+    selectAll: () => void;
+    deselectAll: () => void;
+    isRowSelected: (key: RowKey) => boolean;
+    isAllSelected: () => boolean;
+    isSomeSelected: () => boolean;
+    handleCheckboxClick: (key: RowKey, index: number, event: React.MouseEvent) => void;
+    sorting: SortingState[];
+    toggleSort: (columnId: string) => void;
+    getSortDirection: (columnId: string) => SortDirection | null;
+    tableInstance: TableInstance<T>;
+};
+export {};

package/dist/components/table/src/hooks/use-table.js

@@ -0,0 +1,245 @@
+import { useState, useCallback, useMemo, useRef, useImperativeHandle } from "react";
+function useTable(options) {
+  const {
+    data,
+    getRowKey,
+    selectionMode,
+    selectedKeys: controlledSelectedKeys,
+    defaultSelectedKeys = [],
+    onSelectionChange,
+    sorting: controlledSorting,
+    defaultSorting = [],
+    onSortingChange,
+    tableRef
+  } = options;
+  const [columns, setColumns] = useState([]);
+  const registerColumn = useCallback((column) => {
+    setColumns((prev) => {
+      const exists = prev.find((c) => c.id === column.id);
+      if (exists) return prev;
+      return [...prev, column];
+    });
+  }, []);
+  const unregisterColumn = useCallback((id) => {
+    setColumns((prev) => prev.filter((c) => c.id !== id));
+  }, []);
+  const isSelectionControlled = controlledSelectedKeys !== void 0;
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(
+    () => new Set(defaultSelectedKeys)
+  );
+  const selectedKeys = useMemo(
+    () => isSelectionControlled ? new Set(controlledSelectedKeys) : internalSelectedKeys,
+    [isSelectionControlled, controlledSelectedKeys, internalSelectedKeys]
+  );
+  const selectedKeysRef = useRef(selectedKeys);
+  selectedKeysRef.current = selectedKeys;
+  const isSortingControlled = controlledSorting !== void 0;
+  const [internalSorting, setInternalSorting] = useState(defaultSorting);
+  const sorting = isSortingControlled ? controlledSorting : internalSorting;
+  const lastSelectedIndexRef = useRef(null);
+  const rows = useMemo(
+    () => data.map((item, index) => ({
+      key: getRowKey(item, index),
+      data: item,
+      index
+    })),
+    [data, getRowKey]
+  );
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+  const updateSelection = useCallback(
+    (newKeys) => {
+      if (!isSelectionControlled) {
+        setInternalSelectedKeys(newKeys);
+      }
+      onSelectionChange == null ? void 0 : onSelectionChange(Array.from(newKeys));
+    },
+    [isSelectionControlled, onSelectionChange]
+  );
+  const selectRow = useCallback(
+    (key) => {
+      if (selectionMode === "none") return;
+      const currentKeys = selectedKeysRef.current;
+      const newKeys = new Set(currentKeys);
+      if (selectionMode === "single") {
+        newKeys.clear();
+      }
+      newKeys.add(key);
+      updateSelection(newKeys);
+    },
+    [selectionMode, updateSelection]
+  );
+  const deselectRow = useCallback(
+    (key) => {
+      const currentKeys = selectedKeysRef.current;
+      const newKeys = new Set(currentKeys);
+      newKeys.delete(key);
+      updateSelection(newKeys);
+    },
+    [updateSelection]
+  );
+  const toggleRowSelection = useCallback(
+    (key, index) => {
+      if (selectionMode === "none") return;
+      const currentKeys = selectedKeysRef.current;
+      if (currentKeys.has(key)) {
+        const newKeys = new Set(currentKeys);
+        newKeys.delete(key);
+        updateSelection(newKeys);
+      } else {
+        if (selectionMode === "single") {
+          updateSelection(/* @__PURE__ */ new Set([key]));
+        } else {
+          const newKeys = new Set(currentKeys);
+          newKeys.add(key);
+          updateSelection(newKeys);
+        }
+      }
+      if (index !== void 0) {
+        lastSelectedIndexRef.current = index;
+      }
+    },
+    [selectionMode, updateSelection]
+  );
+  const selectRange = useCallback(
+    (fromIndex, toIndex) => {
+      if (selectionMode !== "multiple") return;
+      const currentRows = rowsRef.current;
+      if (currentRows.length === 0) return;
+      if (fromIndex < 0 && toIndex < 0) return;
+      const clampedFrom = Math.max(0, Math.min(fromIndex, currentRows.length - 1));
+      const clampedTo = Math.max(0, Math.min(toIndex, currentRows.length - 1));
+      const start = Math.min(clampedFrom, clampedTo);
+      const end = Math.max(clampedFrom, clampedTo);
+      const currentKeys = selectedKeysRef.current;
+      const newKeys = new Set(currentKeys);
+      for (let i = start; i <= end; i++) {
+        const row = currentRows[i];
+        if (row) {
+          newKeys.add(row.key);
+        }
+      }
+      updateSelection(newKeys);
+    },
+    [selectionMode, updateSelection]
+  );
+  const selectAll = useCallback(() => {
+    if (selectionMode !== "multiple") return;
+    const currentRows = rowsRef.current;
+    const allKeys = new Set(currentRows.map((row) => row.key));
+    updateSelection(allKeys);
+  }, [selectionMode, updateSelection]);
+  const deselectAll = useCallback(() => {
+    updateSelection(/* @__PURE__ */ new Set());
+  }, [updateSelection]);
+  const isRowSelected = useCallback((key) => selectedKeys.has(key), [selectedKeys]);
+  const isAllSelected = useCallback(
+    () => rows.length > 0 && rows.every((row) => selectedKeys.has(row.key)),
+    [rows, selectedKeys]
+  );
+  const isSomeSelected = useCallback(
+    () => rows.some((row) => selectedKeys.has(row.key)) && !isAllSelected(),
+    [rows, selectedKeys, isAllSelected]
+  );
+  const updateSorting = useCallback(
+    (newSorting) => {
+      if (!isSortingControlled) {
+        setInternalSorting(newSorting);
+      }
+      onSortingChange == null ? void 0 : onSortingChange(newSorting);
+    },
+    [isSortingControlled, onSortingChange]
+  );
+  const toggleSort = useCallback(
+    (columnId) => {
+      const existingSort = sorting.find((s) => s.id === columnId);
+      let newSorting;
+      if (!existingSort) {
+        newSorting = [{ id: columnId, desc: false }];
+      } else if (!existingSort.desc) {
+        newSorting = [{ id: columnId, desc: true }];
+      } else {
+        newSorting = [];
+      }
+      updateSorting(newSorting);
+    },
+    [sorting, updateSorting]
+  );
+  const getSortDirection = useCallback(
+    (columnId) => {
+      const sort = sorting.find((s) => s.id === columnId);
+      if (!sort) return null;
+      return sort.desc ? "desc" : "asc";
+    },
+    [sorting]
+  );
+  const handleCheckboxClick = useCallback(
+    (key, index, event) => {
+      if (selectionMode === "none") return;
+      if (event.shiftKey && lastSelectedIndexRef.current !== null && selectionMode === "multiple") {
+        selectRange(lastSelectedIndexRef.current, index);
+      } else {
+        toggleRowSelection(key, index);
+      }
+      lastSelectedIndexRef.current = index;
+    },
+    [selectionMode, selectRange, toggleRowSelection]
+  );
+  const tableInstance = useMemo(
+    () => ({
+      getData: () => data,
+      getSelectedKeys: () => Array.from(selectedKeys),
+      getSelectedRows: () => rows.filter((row) => selectedKeys.has(row.key)).map((row) => row.data),
+      isRowSelected,
+      selectRow,
+      deselectRow,
+      toggleRowSelection,
+      selectAll,
+      deselectAll,
+      isAllSelected,
+      isSomeSelected
+    }),
+    [
+      data,
+      selectedKeys,
+      rows,
+      isRowSelected,
+      selectRow,
+      deselectRow,
+      toggleRowSelection,
+      selectAll,
+      deselectAll,
+      isAllSelected,
+      isSomeSelected
+    ]
+  );
+  useImperativeHandle(tableRef, () => tableInstance, [tableInstance]);
+  return {
+    // Data
+    rows,
+    columns,
+    registerColumn,
+    unregisterColumn,
+    // Selection
+    selectedKeys,
+    selectRow,
+    deselectRow,
+    toggleRowSelection,
+    selectRange,
+    selectAll,
+    deselectAll,
+    isRowSelected,
+    isAllSelected,
+    isSomeSelected,
+    handleCheckboxClick,
+    // Sorting
+    sorting,
+    toggleSort,
+    getSortDirection,
+    // Instance
+    tableInstance
+  };
+}
+export {
+  useTable
+};

package/dist/components/table/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from './table';
+export * from './types';
+export { useTableStatic, useTableScroll, useTableSelection, useTableColumnState, useTableDragResize, useTableRows, } from './context';
+export { tableVariants } from './tv';

package/dist/components/table/src/table.d.ts

@@ -0,0 +1,88 @@
+import { TableEmptyProps } from './components';
+import { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableProps, TableRowProps, TableValueProps } from './types';
+/**
+ * Table component with compound components pattern.
+ *
+ * Supports:
+ * - Row selection (single/multiple)
+ * - Consecutive selection rounded corners
+ * - Virtualization for large datasets
+ * - Two scroll modes: "container" (internal ScrollArea) or "window" (window scroll)
+ *
+ * @example
+ * // Container scroll (default) - Table has its own scroll area
+ * <Table
+ *   data={users}
+ *   getRowKey={(user) => user.id}
+ *   selectable
+ *   height={400}
+ * >
+ *   <Table.Header>
+ *     <Table.Column id="name" width={200}>Name</Table.Column>
+ *     <Table.Column id="email">Email</Table.Column>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     {(user, index) => (
+ *       <Table.Row rowKey={user.id} index={index}>
+ *         <Table.Cell columnId="name">{user.name}</Table.Cell>
+ *         <Table.Cell columnId="email">{user.email}</Table.Cell>
+ *       </Table.Row>
+ *     )}
+ *   </Table.Body>
+ * </Table>
+ *
+ * @example
+ * // Window scroll - Table uses window scroll for virtualization
+ * <Table
+ *   data={users}
+ *   getRowKey={(user) => user.id}
+ *   selectable
+ *   scrollMode="window"
+ * >
+ *   <Table.Header>
+ *     <Table.Column id="name">Name</Table.Column>
+ *     <Table.Column id="email">Email</Table.Column>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     {(user, index) => (
+ *       <Table.Row rowKey={user.id} index={index}>
+ *         <Table.Cell columnId="name">{user.name}</Table.Cell>
+ *         <Table.Cell columnId="email">{user.email}</Table.Cell>
+ *       </Table.Row>
+ *     )}
+ *   </Table.Body>
+ * </Table>
+ *
+ * @example
+ * // Custom scroll container - Provide your own ScrollArea
+ * const scrollRef = useRef<HTMLDivElement>(null)
+ * const containerRef = useRef<HTMLDivElement>(null)
+ *
+ * <ScrollArea>
+ *   <ScrollArea.Viewport ref={scrollRef}>
+ *     <ScrollArea.Content ref={containerRef}>
+ *       <Table
+ *         data={users}
+ *         getRowKey={(user) => user.id}
+ *         scrollRef={scrollRef}
+ *         containerRef={containerRef}
+ *       >
+ *         ...
+ *       </Table>
+ *     </ScrollArea.Content>
+ *   </ScrollArea.Viewport>
+ * </ScrollArea>
+ */
+declare function Table<T>(props: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace Table {
+    var Header: (props: TableHeaderProps) => React.ReactNode;
+    var Column: (props: TableColumnProps) => React.ReactNode;
+    var Body: <T>(props: TableBodyProps<T>) => React.ReactNode;
+    var Row: (props: TableRowProps) => React.ReactNode;
+    var Cell: (props: TableCellProps) => React.ReactNode;
+    var Value: (props: TableValueProps) => React.ReactNode;
+    var Empty: (props: TableEmptyProps) => React.ReactNode;
+    var Footer: (props: TableFooterProps) => React.ReactNode;
+}
+export { Table };
+export type { TableBodyProps, TableCellProps, TableColumnProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TableProps, TableRowProps, TableValueProps, };

package/dist/components/table/src/table.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { TableRoot } from "./components/table-root.js";
+import { TableHeader } from "./components/table-header.js";
+import { TableColumn } from "./components/table-column.js";
+import { TableBody } from "./components/table-body.js";
+import { TableRow } from "./components/table-row.js";
+import { TableCell } from "./components/table-cell.js";
+import { TableValue } from "./components/table-value.js";
+import { TableEmpty } from "./components/table-empty.js";
+import { TableFooter } from "./components/table-footer.js";
+function Table(props) {
+  return /* @__PURE__ */ jsx(TableRoot, { ...props });
+}
+Table.Header = TableHeader;
+Table.Column = TableColumn;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Value = TableValue;
+Table.Empty = TableEmpty;
+Table.Footer = TableFooter;
+export {
+  Table
+};