@choice-ui/react 1.4.3 → 1.4.5

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

@@ -0,0 +1,317 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useMemo } from "react";
+import { TableStaticContext, TableScrollContext, TableSelectionContext, TableColumnStateContext, TableDragResizeContext, TableRowsContext } from "../context.js";
+import { tableVariants } from "../tv.js";
+import { DragGuide } from "./drag-guide.js";
+import { ResizeGuide } from "./resize-guide.js";
+import { useTable } from "../hooks/use-table.js";
+import { useColumnResize } from "../hooks/use-column-resize.js";
+import { useColumnOrder } from "../hooks/use-column-order.js";
+import { useConsecutiveSelectionStyle } from "../hooks/use-consecutive-selection-style.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+function TableRoot({
+  data,
+  getRowKey,
+  selectable = false,
+  selectionMode = "multiple",
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
+  virtualized = true,
+  rowHeight = 32,
+  overscan = 5,
+  scrollMode = "container",
+  scrollRef,
+  sortable = false,
+  sorting: controlledSorting,
+  defaultSorting,
+  onSortingChange,
+  resizable = false,
+  columnWidths: controlledColumnWidths,
+  defaultColumnWidths,
+  onColumnWidthsChange,
+  reorderable = false,
+  columnOrder: controlledColumnOrder,
+  defaultColumnOrder,
+  onColumnOrderChange,
+  activeRowKey,
+  onRowClick,
+  onScroll,
+  className,
+  height,
+  tableRef: instanceRef,
+  children
+}) {
+  const tv = tableVariants();
+  const tableRef = useRef(null);
+  const headerInnerRef = useRef(null);
+  const [bodyScrollRef, setBodyScrollRef] = useState(null);
+  const syncScrollLeft = useCallback((value) => {
+    if (headerInnerRef.current) {
+      headerInnerRef.current.style.transform = `translateX(-${value}px)`;
+    }
+  }, []);
+  const {
+    rows,
+    columns,
+    registerColumn,
+    unregisterColumn,
+    selectedKeys,
+    toggleRowSelection,
+    selectAll,
+    deselectAll,
+    isRowSelected,
+    isAllSelected,
+    isSomeSelected,
+    handleCheckboxClick,
+    sorting,
+    toggleSort,
+    getSortDirection,
+    tableInstance
+  } = useTable({
+    data,
+    getRowKey,
+    selectionMode: selectable ? selectionMode : "none",
+    selectedKeys: controlledSelectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    sorting: controlledSorting,
+    defaultSorting,
+    onSortingChange,
+    tableRef: instanceRef
+  });
+  const { columnWidths, resizeState, getColumnWidth, startResize, updateResize, endResize } = useColumnResize({
+    columnWidths: controlledColumnWidths,
+    defaultColumnWidths,
+    onColumnWidthsChange
+  });
+  const {
+    columnOrder,
+    dragState,
+    startDrag,
+    updateDragTarget,
+    updateDragPosition,
+    endDrag,
+    cancelDrag
+  } = useColumnOrder({
+    columnOrder: controlledColumnOrder,
+    defaultColumnOrder: defaultColumnOrder ?? columns.map((c) => c.id),
+    onColumnOrderChange
+  });
+  const getConsecutiveStyle = useConsecutiveSelectionStyle(rows, selectedKeys);
+  const dataRef = useRef(data);
+  dataRef.current = data;
+  const getRowKeyRef = useRef(getRowKey);
+  getRowKeyRef.current = getRowKey;
+  const onRowClickRef = useRef(onRowClick);
+  onRowClickRef.current = onRowClick;
+  const onScrollRef = useRef(onScroll);
+  onScrollRef.current = onScroll;
+  const stableGetData = useCallback(() => dataRef.current, []);
+  const stableGetRowKey = useCallback(
+    (row, index) => getRowKeyRef.current(row, index),
+    []
+  );
+  const stableOnRowClick = useCallback(
+    (row, event) => {
+      var _a;
+      return (_a = onRowClickRef.current) == null ? void 0 : _a.call(onRowClickRef, row, event);
+    },
+    []
+  );
+  const stableOnScroll = useCallback(
+    (event) => {
+      var _a;
+      return (_a = onScrollRef.current) == null ? void 0 : _a.call(onScrollRef, event);
+    },
+    []
+  );
+  const stableSetBodyScrollRef = useCallback((ref) => {
+    setBodyScrollRef(ref);
+  }, []);
+  const staticContextValue = useMemo(
+    () => ({
+      getData: stableGetData,
+      getRowKey: stableGetRowKey,
+      columns,
+      registerColumn,
+      unregisterColumn,
+      selectable,
+      selectionMode: selectable ? selectionMode : "none",
+      sortable,
+      resizable,
+      reorderable,
+      virtualized,
+      rowHeight,
+      overscan,
+      scrollMode,
+      scrollRef,
+      tableRef,
+      toggleSort,
+      getSortDirection,
+      onRowClick: stableOnRowClick,
+      onScroll: stableOnScroll,
+      tableInstance
+    }),
+    [
+      stableGetData,
+      stableGetRowKey,
+      columns,
+      registerColumn,
+      unregisterColumn,
+      selectable,
+      selectionMode,
+      sortable,
+      resizable,
+      reorderable,
+      virtualized,
+      rowHeight,
+      overscan,
+      scrollMode,
+      scrollRef,
+      toggleSort,
+      getSortDirection,
+      stableOnRowClick,
+      stableOnScroll,
+      tableInstance
+    ]
+  );
+  const scrollContextValue = useMemo(
+    () => ({
+      headerInnerRef,
+      syncScrollLeft,
+      bodyScrollRef,
+      setBodyScrollRef: stableSetBodyScrollRef
+    }),
+    [syncScrollLeft, bodyScrollRef, stableSetBodyScrollRef]
+  );
+  const selectionContextValue = useMemo(
+    () => ({
+      selectedKeys,
+      isRowSelected,
+      toggleRowSelection,
+      handleCheckboxClick,
+      isAllSelected,
+      isSomeSelected,
+      selectAll,
+      deselectAll,
+      getConsecutiveStyle,
+      activeRowKey: activeRowKey ?? null
+    }),
+    [
+      selectedKeys,
+      isRowSelected,
+      toggleRowSelection,
+      handleCheckboxClick,
+      isAllSelected,
+      isSomeSelected,
+      selectAll,
+      deselectAll,
+      getConsecutiveStyle,
+      activeRowKey
+    ]
+  );
+  const columnStateContextValue = useMemo(
+    () => ({
+      columnWidths,
+      columnOrder: columnOrder.length > 0 ? columnOrder : columns.map((c) => c.id),
+      sorting,
+      getColumnWidth
+    }),
+    [columnWidths, columnOrder, columns, sorting, getColumnWidth]
+  );
+  const dragResizeContextValue = useMemo(
+    () => ({
+      resizeState,
+      startResize,
+      updateResize,
+      endResize,
+      dragState,
+      startDrag,
+      updateDragTarget,
+      updateDragPosition,
+      endDrag,
+      cancelDrag
+    }),
+    [
+      resizeState,
+      startResize,
+      updateResize,
+      endResize,
+      dragState,
+      startDrag,
+      updateDragTarget,
+      updateDragPosition,
+      endDrag,
+      cancelDrag
+    ]
+  );
+  const rowsContextValue = useMemo(() => ({ rows }), [rows]);
+  const handleTableDragOver = useCallback(
+    (e) => {
+      if (!dragState || !reorderable || !tableRef.current) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      const tableRect = tableRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - tableRect.left;
+      updateDragPosition(mouseX);
+      const orderedCols = columnOrder.length > 0 ? columnOrder : columns.map((c) => c.id);
+      let leftOffset = selectable ? 40 : 0;
+      let targetIdx = 0;
+      for (let i = 0; i < orderedCols.length; i++) {
+        const colId = orderedCols[i];
+        const col = columns.find((c) => c.id === colId);
+        const colWidth = getColumnWidth(colId) ?? (typeof (col == null ? void 0 : col.width) === "number" ? col.width : 150);
+        const colMidpoint = leftOffset + colWidth / 2;
+        if (e.clientX - tableRect.left < colMidpoint) {
+          targetIdx = i;
+          break;
+        }
+        leftOffset += colWidth;
+        targetIdx = i + 1;
+      }
+      updateDragTarget(targetIdx);
+    },
+    [
+      dragState,
+      reorderable,
+      selectable,
+      columnOrder,
+      columns,
+      getColumnWidth,
+      updateDragPosition,
+      updateDragTarget
+    ]
+  );
+  const handleTableDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      endDrag();
+    },
+    [endDrag]
+  );
+  return /* @__PURE__ */ jsx(TableStaticContext.Provider, { value: staticContextValue, children: /* @__PURE__ */ jsx(TableScrollContext.Provider, { value: scrollContextValue, children: /* @__PURE__ */ jsx(TableSelectionContext.Provider, { value: selectionContextValue, children: /* @__PURE__ */ jsx(TableColumnStateContext.Provider, { value: columnStateContextValue, children: /* @__PURE__ */ jsx(TableDragResizeContext.Provider, { value: dragResizeContextValue, children: /* @__PURE__ */ jsx(TableRowsContext.Provider, { value: rowsContextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: tableRef,
+      role: "table",
+      "aria-rowcount": rows.length,
+      "aria-colcount": columns.length + (selectable ? 1 : 0),
+      className: tcx(
+        tv.root({ resizing: !!resizeState, dragging: !!dragState }),
+        className
+      ),
+      style: { height },
+      onDragOver: handleTableDragOver,
+      onDrop: handleTableDrop,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ResizeGuide, {}),
+        /* @__PURE__ */ jsx(DragGuide, {})
+      ]
+    }
+  ) }) }) }) }) }) });
+}
+export {
+  TableRoot
+};

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { ConsecutiveStyle, TableRowProps } from '../types';
+/**
+ * Internal props that include pre-computed values from context
+ * This allows the component to be properly memoized
+ */
+interface TableRowInternalProps extends TableRowProps {
+    selectable: boolean;
+    isSelected: boolean;
+    isActive: boolean;
+    consecutiveStyle: ConsecutiveStyle;
+    columnOrder: string[];
+    reorderable: boolean;
+    hasRowClick: boolean;
+    onCheckboxClick: (e: React.MouseEvent) => void;
+    onRowClickHandler: ((event: React.MouseEvent) => void) | undefined;
+    onRowKeyDown: ((event: React.KeyboardEvent) => void) | undefined;
+}
+declare function TableRowPure({ rowKey, index, children, className, selectable, isSelected, isActive, consecutiveStyle, columnOrder, reorderable, hasRowClick, onCheckboxClick, onRowClickHandler, onRowKeyDown, }: TableRowInternalProps): ReactNode;
+declare const TableRowMemo: import('react').MemoExoticComponent<typeof TableRowPure>;
+export type { TableRowProps };
+export { TableRowMemo as TableRowPure };
+export declare function TableRow({ rowKey, index, children, className, onClick, }: TableRowProps): ReactNode;

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

@@ -0,0 +1,166 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox2 } from "../../../checkbox/dist/index.js";
+import { useCallback, useMemo, memo, Children, isValidElement } from "react";
+import { tableVariants } from "../tv.js";
+import { useTableStatic, useTableSelection, useTableColumnState, useTableRows } from "../context.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const NOOP = () => {
+};
+function TableRowPure({
+  rowKey,
+  index,
+  children,
+  className,
+  // Pre-computed values
+  selectable,
+  isSelected,
+  isActive,
+  consecutiveStyle,
+  columnOrder,
+  reorderable,
+  hasRowClick,
+  // Stable handlers
+  onCheckboxClick,
+  onRowClickHandler,
+  onRowKeyDown
+}) {
+  const tv = tableVariants();
+  const orderedChildren = useMemo(() => {
+    if (!reorderable || columnOrder.length === 0) {
+      return children;
+    }
+    const childArray = Children.toArray(children);
+    const childMap = /* @__PURE__ */ new Map();
+    childArray.forEach((child) => {
+      if (isValidElement(child) && child.props.columnId) {
+        childMap.set(child.props.columnId, child);
+      }
+    });
+    const sorted = columnOrder.map((id) => childMap.get(id)).filter((child) => child !== void 0);
+    childArray.forEach((child) => {
+      if (isValidElement(child) && child.props.columnId && !columnOrder.includes(child.props.columnId)) {
+        sorted.push(child);
+      }
+    });
+    return sorted;
+  }, [children, columnOrder, reorderable]);
+  const rowClassName = useMemo(
+    () => tcx(
+      tv.rowStatic({ selected: isSelected, active: isActive }),
+      // Always use rowStatic - virtualized rows are wrapped by VirtualRowWrapper
+      consecutiveStyle,
+      className
+    ),
+    [tv, hasRowClick, isSelected, isActive, consecutiveStyle, className]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "row",
+      "aria-selected": isSelected,
+      "aria-rowindex": index + 2,
+      className: rowClassName,
+      "data-selected": isSelected,
+      "data-active": isActive,
+      "data-index": index,
+      onClick: onRowClickHandler,
+      onKeyDown: onRowKeyDown,
+      tabIndex: hasRowClick ? 0 : void 0,
+      children: [
+        selectable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "cell",
+            className: tv.cellCheckbox(),
+            style: { width: 40, minWidth: 40, flexShrink: 0 },
+            children: /* @__PURE__ */ jsx(
+              Checkbox2,
+              {
+                variant: "accent",
+                value: isSelected,
+                onChange: NOOP,
+                onClick: onCheckboxClick
+              }
+            )
+          }
+        ),
+        orderedChildren
+      ]
+    }
+  );
+}
+const TableRowMemo = memo(TableRowPure, (prev, next) => {
+  return prev.rowKey === next.rowKey && prev.index === next.index && prev.className === next.className && prev.selectable === next.selectable && prev.isSelected === next.isSelected && prev.isActive === next.isActive && prev.consecutiveStyle === next.consecutiveStyle && prev.reorderable === next.reorderable && prev.hasRowClick === next.hasRowClick && prev.columnOrder === next.columnOrder;
+});
+function TableRow({
+  rowKey,
+  index,
+  children,
+  className,
+  onClick
+}) {
+  const { selectable, onRowClick, reorderable } = useTableStatic();
+  const { isRowSelected, handleCheckboxClick, activeRowKey, getConsecutiveStyle } = useTableSelection();
+  const { columnOrder } = useTableColumnState();
+  const { rows } = useTableRows();
+  const isSelected = isRowSelected(rowKey);
+  const isActive = activeRowKey === rowKey;
+  const consecutiveStyle = getConsecutiveStyle(index);
+  const hasRowClick = !!onRowClick || !!onClick;
+  const onCheckboxClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      handleCheckboxClick(rowKey, index, e);
+    },
+    [handleCheckboxClick, rowKey, index]
+  );
+  const onRowClickHandler = useMemo(() => {
+    if (!onRowClick && !onClick) return void 0;
+    return (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (index >= 0 && index < rows.length) {
+        const row = rows[index];
+        if (row && onRowClick) {
+          onRowClick(row.data, event);
+        }
+      }
+    };
+  }, [onClick, onRowClick, rows, index]);
+  const onRowKeyDown = useMemo(() => {
+    if (!onRowClick && !onClick) return void 0;
+    return (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (index >= 0 && index < rows.length) {
+          const row = rows[index];
+          if (row && onRowClick) {
+            onRowClick(row.data, event);
+          }
+        }
+      }
+    };
+  }, [onClick, onRowClick, rows, index]);
+  return /* @__PURE__ */ jsx(
+    TableRowMemo,
+    {
+      rowKey,
+      index,
+      className,
+      selectable,
+      isSelected,
+      isActive,
+      consecutiveStyle,
+      columnOrder,
+      reorderable,
+      hasRowClick,
+      onCheckboxClick,
+      onRowClickHandler,
+      onRowKeyDown,
+      children
+    }
+  );
+}
+export {
+  TableRow,
+  TableRowMemo as TableRowPure
+};

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface TableValueProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare function TableValue({ children, className }: TableValueProps): ReactNode;

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

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+function TableValue({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: tcx("flex-1 truncate", className), children });
+}
+export {
+  TableValue
+};

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

@@ -0,0 +1,121 @@
+import { ColumnOrderState, ColumnWidthsState, ConsecutiveStyle, RowKey, ScrollMode, SelectionMode, SortDirection, SortingState, TableColumnDef, TableInstance } from './types';
+import { RefObject } from 'react';
+/**
+ * Static context - rarely changes
+ * Contains: columns, config, refs, and stable handlers
+ */
+export interface TableStaticContextValue<T = unknown> {
+    getData: () => T[];
+    getRowKey: (row: T, index: number) => RowKey;
+    columns: TableColumnDef<T>[];
+    registerColumn: (column: TableColumnDef<T>) => void;
+    unregisterColumn: (id: string) => void;
+    selectable: boolean;
+    selectionMode: SelectionMode;
+    sortable: boolean;
+    resizable: boolean;
+    reorderable: boolean;
+    virtualized: boolean;
+    /** Fixed row height in pixels */
+    rowHeight: number;
+    overscan: number;
+    scrollMode: ScrollMode;
+    /** External scroll container ref (for external scroll mode) */
+    scrollRef?: RefObject<HTMLElement>;
+    tableRef: RefObject<HTMLDivElement>;
+    toggleSort: (columnId: string) => void;
+    getSortDirection: (columnId: string) => SortDirection | null;
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    onScroll?: (event: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+    }) => void;
+    tableInstance: TableInstance<T>;
+}
+/**
+ * Scroll sync context - for header/body horizontal scroll synchronization
+ * Uses refs for direct DOM manipulation to avoid React re-renders during scroll
+ */
+export interface TableScrollContextValue {
+    /** Header inner element ref for direct DOM transform */
+    headerInnerRef: RefObject<HTMLDivElement>;
+    /** Sync scroll position directly to header (bypasses React state) */
+    syncScrollLeft: (value: number) => void;
+    /** Body scroll container ref (for virtualization) */
+    bodyScrollRef: RefObject<HTMLDivElement> | null;
+    /** Set body scroll container ref */
+    setBodyScrollRef: (ref: RefObject<HTMLDivElement>) => void;
+}
+/**
+ * Selection context - changes when selection changes
+ */
+export interface TableSelectionContextValue {
+    selectedKeys: Set<RowKey>;
+    isRowSelected: (key: RowKey) => boolean;
+    toggleRowSelection: (key: RowKey, index?: number) => void;
+    handleCheckboxClick: (key: RowKey, index: number, event: React.MouseEvent) => void;
+    isAllSelected: () => boolean;
+    isSomeSelected: () => boolean;
+    selectAll: () => void;
+    deselectAll: () => void;
+    getConsecutiveStyle: (index: number) => ConsecutiveStyle;
+    activeRowKey: RowKey | null;
+}
+/**
+ * Column state context - changes during resize/reorder
+ */
+export interface TableColumnStateContextValue {
+    columnWidths: ColumnWidthsState;
+    columnOrder: ColumnOrderState;
+    sorting: SortingState[];
+    getColumnWidth: (columnId: string) => number | undefined;
+}
+/**
+ * Drag/Resize context - changes very frequently during interactions
+ */
+export interface TableDragResizeContextValue {
+    resizeState: {
+        columnId: string;
+        startX: number;
+        startWidth: number;
+        currentX: number;
+    } | null;
+    startResize: (columnId: string, startX: number, startWidth: number) => void;
+    updateResize: (currentX: number) => void;
+    endResize: () => void;
+    dragState: {
+        columnId: string;
+        targetIndex: number;
+        mouseX: number;
+        sourceLeft: number;
+        sourceWidth: number;
+    } | null;
+    startDrag: (columnId: string, mouseX: number, sourceLeft: number, sourceWidth: number) => void;
+    updateDragTarget: (targetIndex: number) => void;
+    updateDragPosition: (mouseX: number) => void;
+    endDrag: () => void;
+    cancelDrag: () => void;
+}
+/**
+ * Row data context - contains rows array
+ */
+export interface TableRowsContextValue<T = unknown> {
+    rows: Array<{
+        key: RowKey;
+        data: T;
+        index: number;
+    }>;
+}
+export declare const TableStaticContext: import('react').Context<TableStaticContextValue<unknown> | null>;
+export declare const TableScrollContext: import('react').Context<TableScrollContextValue | null>;
+export declare const TableSelectionContext: import('react').Context<TableSelectionContextValue | null>;
+export declare const TableColumnStateContext: import('react').Context<TableColumnStateContextValue | null>;
+export declare const TableDragResizeContext: import('react').Context<TableDragResizeContextValue | null>;
+export declare const TableRowsContext: import('react').Context<TableRowsContextValue<unknown> | null>;
+export declare function useTableStatic<T = unknown>(): TableStaticContextValue<T>;
+export declare function useTableScroll(): TableScrollContextValue;
+export declare function useTableSelection(): TableSelectionContextValue;
+export declare function useTableColumnState(): TableColumnStateContextValue;
+export declare function useTableDragResize(): TableDragResizeContextValue;
+export declare function useTableRows<T = unknown>(): TableRowsContextValue<T>;

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

@@ -0,0 +1,63 @@
+import { useContext, createContext } from "react";
+const TableStaticContext = createContext(null);
+const TableScrollContext = createContext(null);
+const TableSelectionContext = createContext(null);
+const TableColumnStateContext = createContext(null);
+const TableDragResizeContext = createContext(null);
+const TableRowsContext = createContext(null);
+function useTableStatic() {
+  const context = useContext(TableStaticContext);
+  if (!context) {
+    throw new Error("Table components must be used within a Table");
+  }
+  return context;
+}
+function useTableScroll() {
+  const context = useContext(TableScrollContext);
+  if (!context) {
+    throw new Error("Table components must be used within a Table");
+  }
+  return context;
+}
+function useTableSelection() {
+  const context = useContext(TableSelectionContext);
+  if (!context) {
+    throw new Error("Table components must be used within a Table");
+  }
+  return context;
+}
+function useTableColumnState() {
+  const context = useContext(TableColumnStateContext);
+  if (!context) {
+    throw new Error("Table components must be used within a Table");
+  }
+  return context;
+}
+function useTableDragResize() {
+  const context = useContext(TableDragResizeContext);
+  if (!context) {
+    throw new Error("Table components must be used within a Table");
+  }
+  return context;
+}
+function useTableRows() {
+  const context = useContext(TableRowsContext);
+  if (!context) {
+    throw new Error("Table components must be used within a Table");
+  }
+  return context;
+}
+export {
+  TableColumnStateContext,
+  TableDragResizeContext,
+  TableRowsContext,
+  TableScrollContext,
+  TableSelectionContext,
+  TableStaticContext,
+  useTableColumnState,
+  useTableDragResize,
+  useTableRows,
+  useTableScroll,
+  useTableSelection,
+  useTableStatic
+};