@vuu-ui/vuu-table 0.8.17-debug → 0.8.18-debug

package/esm/index.js

@@ -1,10 +1,80 @@
 // src/header-cell/GroupHeaderCellNext.tsx
-import cx3 from "classnames";
+import { OverflowContainer } from "@vuu-ui/vuu-layout";
+import { useLayoutEffectSkipFirst } from "@vuu-ui/vuu-utils";
+import cx3 from "clsx";
 import { useCallback as useCallback4, useRef as useRef3, useState as useState2 } from "react";
 
+// src/column-header-pill/ColumnHeaderPill.tsx
+import cx from "clsx";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var classBase = "vuuColumnHeaderPill";
+var ColumnHeaderPill = ({
+  children,
+  className,
+  column,
+  onRemove,
+  removable,
+  ...htmlAttributes
+}) => {
+  if (removable && typeof onRemove !== "function") {
+    throw Error(
+      "ColumnHeaderPill onRemove prop must be provided if Pill is removable"
+    );
+  }
+  const handleClickRemove = useCallback(
+    (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      onRemove == null ? void 0 : onRemove(column);
+    },
+    [column, onRemove]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    children,
+    removable ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${classBase}-removeButton`,
+        role: "button",
+        "data-icon": "cross",
+        onClick: handleClickRemove
+      }
+    ) : null
+  ] });
+};
+
+// src/column-header-pill/GroupColumnPill.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var GroupColumnPill = ({
+  column,
+  ...columnHeaderProps
+}) => {
+  const { name, sorted } = column;
+  const icon = typeof sorted === "number" ? sorted < 0 ? "arrow-down" : "arrow-up" : sorted === "A" ? "arrow-up" : sorted === "D" ? "arrow-down" : void 0;
+  return /* @__PURE__ */ jsxs2(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
+    /* @__PURE__ */ jsx2("span", { className: "vuuGroupColumnPill-label", children: name }),
+    icon !== void 0 ? /* @__PURE__ */ jsx2("span", { "data-icon": icon }) : null,
+    typeof sorted === "number" ? /* @__PURE__ */ jsx2("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
+  ] });
+};
+
+// src/column-header-pill/SortIndicator.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SortIndicator = ({ column }) => {
+  if (!column.sorted) {
+    return null;
+  }
+  const icon = typeof column.sorted === "number" ? column.sorted < 0 ? "arrow-down" : "arrow-up" : column.sorted === "A" ? "arrow-up" : "arrow-down";
+  return /* @__PURE__ */ jsxs3(ColumnHeaderPill, { column, children: [
+    /* @__PURE__ */ jsx3("span", { "data-icon": icon }),
+    typeof column.sorted === "number" ? /* @__PURE__ */ jsx3("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
+  ] });
+};
+
 // src/column-resizing/ColumnResizer.tsx
-import { useCallback, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useCallback as useCallback2, useRef } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var NOOP = () => void 0;
 var baseClass = "vuuColumnResizerNext";
 var ColumnResizer = ({
@@ -13,7 +83,7 @@ var ColumnResizer = ({
   onDragStart = NOOP
 }) => {
   const position = useRef(0);
-  const onMouseMove = useCallback(
+  const onMouseMove = useCallback2(
     (e) => {
       if (e.stopPropagation) {
         e.stopPropagation();
@@ -30,7 +100,7 @@ var ColumnResizer = ({
     },
     [onDrag]
   );
-  const onMouseUp = useCallback(
+  const onMouseUp = useCallback2(
     (e) => {
       window.removeEventListener("mouseup", onMouseUp);
       window.removeEventListener("mousemove", onMouseMove);
@@ -38,7 +108,7 @@ var ColumnResizer = ({
     },
     [onDragEnd, onMouseMove]
   );
-  const handleMouseDown = useCallback(
+  const handleMouseDown = useCallback2(
     (e) => {
       onDragStart(e);
       position.current = Math.round(e.clientX);
@@ -53,11 +123,11 @@ var ColumnResizer = ({
     },
     [onDragStart, onMouseMove, onMouseUp]
   );
-  return /* @__PURE__ */ jsx("div", { className: baseClass, onMouseDown: handleMouseDown });
+  return /* @__PURE__ */ jsx4("div", { className: baseClass, onMouseDown: handleMouseDown });
 };
 
 // src/column-resizing/useTableColumnResize.tsx
-import { useCallback as useCallback2, useRef as useRef2, useState } from "react";
+import { useCallback as useCallback3, useRef as useRef2, useState } from "react";
 var useTableColumnResize = ({
   column,
   onResize,
@@ -66,7 +136,7 @@ var useTableColumnResize = ({
   const widthRef = useRef2(0);
   const [isResizing, setResizing] = useState(false);
   const { name } = column;
-  const handleResizeStart = useCallback2(() => {
+  const handleResizeStart = useCallback3(() => {
     if (onResize && rootRef.current) {
       const { width } = rootRef.current.getBoundingClientRect();
       widthRef.current = Math.round(width);
@@ -74,7 +144,7 @@ var useTableColumnResize = ({
       onResize == null ? void 0 : onResize("begin", name);
     }
   }, [name, onResize, rootRef]);
-  const handleResize = useCallback2(
+  const handleResize = useCallback3(
     (_evt, moveBy) => {
       if (rootRef.current) {
         if (onResize) {
@@ -89,7 +159,7 @@ var useTableColumnResize = ({
     },
     [name, onResize, rootRef]
   );
-  const handleResizeEnd = useCallback2(() => {
+  const handleResizeEnd = useCallback3(() => {
     if (onResize) {
       onResize("end", name, widthRef.current);
       setTimeout(() => {
@@ -107,101 +177,29 @@ var useTableColumnResize = ({
 
 // src/useCell.ts
 import { getColumnStyle } from "@vuu-ui/vuu-utils";
-import cx from "classnames";
+import cx2 from "clsx";
 import { useMemo } from "react";
-var useCell = (column, classBase11, isHeader) => (
+var useCell = (column, classBase10, isHeader) => (
   // TODO measure perf without the memo, might not be worth the cost
   useMemo(() => {
-    const className = cx(classBase11, {
+    const className = cx2(classBase10, {
       vuuPinFloating: column.pin === "floating",
       vuuPinLeft: column.pin === "left",
       vuuPinRight: column.pin === "right",
       vuuEndPin: isHeader && column.endPin,
       // [`${classBase}-resizing`]: column.resizing,
-      [`${classBase11}-editable`]: column.editable,
-      [`${classBase11}-right`]: column.align === "right"
+      [`${classBase10}-editable`]: column.editable,
+      [`${classBase10}-right`]: column.align === "right"
     });
     const style = getColumnStyle(column);
     return {
       className,
       style
     };
-  }, [column, classBase11, isHeader])
+  }, [column, classBase10, isHeader])
 );
 
-// src/column-header-pill/ColumnHeaderPill.tsx
-import cx2 from "classnames";
-import { useCallback as useCallback3 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var classBase = "vuuColumnHeaderPill";
-var ColumnHeaderPill = ({
-  children,
-  className,
-  column,
-  onRemove,
-  removable,
-  ...htmlAttributes
-}) => {
-  if (removable && typeof onRemove !== "function") {
-    throw Error(
-      "ColumnHeaderPill onRemove prop must be provided if Pill is removable"
-    );
-  }
-  const handleClickRemove = useCallback3(
-    (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      onRemove == null ? void 0 : onRemove(column);
-    },
-    [column, onRemove]
-  );
-  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx2(classBase, className), children: [
-    children,
-    removable ? /* @__PURE__ */ jsx2(
-      "span",
-      {
-        className: `${classBase}-removeButton`,
-        role: "button",
-        "data-icon": "cross",
-        onClick: handleClickRemove
-      }
-    ) : null
-  ] });
-};
-
-// src/column-header-pill/GroupColumnPill.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var GroupColumnPill = ({
-  column,
-  ...columnHeaderProps
-}) => {
-  const { name, sorted } = column;
-  const icon = typeof sorted === "number" ? sorted < 0 ? "arrow-down" : "arrow-up" : sorted === "A" ? "arrow-up" : sorted === "D" ? "arrow-down" : void 0;
-  return /* @__PURE__ */ jsxs2(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
-    /* @__PURE__ */ jsx3("span", { className: "vuuGroupColumnPill-label", children: name }),
-    icon !== void 0 ? /* @__PURE__ */ jsx3("span", { "data-icon": icon }) : null,
-    typeof sorted === "number" ? /* @__PURE__ */ jsx3("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
-  ] });
-};
-
-// src/column-header-pill/SortIndicator.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var SortIndicator = ({ column }) => {
-  if (!column.sorted) {
-    return null;
-  }
-  const icon = typeof column.sorted === "number" ? column.sorted < 0 ? "arrow-down" : "arrow-up" : column.sorted === "A" ? "arrow-up" : "arrow-down";
-  return /* @__PURE__ */ jsxs3(ColumnHeaderPill, { column, children: [
-    /* @__PURE__ */ jsx4("span", { "data-icon": icon }),
-    typeof column.sorted === "number" ? /* @__PURE__ */ jsx4("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
-  ] });
-};
-
 // src/header-cell/GroupHeaderCellNext.tsx
-import {
-  OverflowContainer,
-  useLayoutEffectSkipFirst
-} from "@vuu-ui/vuu-layout";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 import { createElement } from "react";
 var classBase2 = "vuuTableGroupHeaderCell";
@@ -299,11 +297,12 @@ var GroupHeaderCellNext = ({
 };
 
 // src/header-cell/HeaderCell.tsx
+import cx5 from "clsx";
 import { useCallback as useCallback6, useRef as useRef5 } from "react";
 
 // src/column-menu/ColumnMenu.tsx
 import { useContextMenu } from "@vuu-ui/vuu-popups";
-import cx4 from "classnames";
+import cx4 from "clsx";
 import {
   useCallback as useCallback5,
   useRef as useRef4,
@@ -355,7 +354,6 @@ var ColumnMenu = ({
 };
 
 // src/header-cell/HeaderCell.tsx
-import cx5 from "classnames";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var classBase3 = "vuuTableHeaderCell";
 var HeaderCell = ({
@@ -406,17 +404,16 @@ var HeaderCell = ({
 
 // src/Table.tsx
 import {
-  MeasuredContainer,
-  useId
+  MeasuredContainer
 } from "@vuu-ui/vuu-layout";
 import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
-import { metadataKeys as metadataKeys7 } from "@vuu-ui/vuu-utils";
+import { metadataKeys as metadataKeys7, useId } from "@vuu-ui/vuu-utils";
 import { useForkRef } from "@salt-ds/core";
-import cx9 from "classnames";
+import cx9 from "clsx";
 import {
   forwardRef,
-  useRef as useRef14,
-  useState as useState6
+  useRef as useRef15,
+  useState as useState7
 } from "react";
 
 // src/Row.tsx
@@ -428,7 +425,7 @@ import {
   isNotHidden,
   RowSelected
 } from "@vuu-ui/vuu-utils";
-import cx7 from "classnames";
+import cx7 from "clsx";
 import { memo, useCallback as useCallback9 } from "react";
 
 // src/table-cell/TableCell.tsx
@@ -491,7 +488,7 @@ var TableCell = ({
 // src/table-cell/TableGroupCell.tsx
 import { getGroupValueAndOffset, metadataKeys } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback8 } from "react";
-import cx6 from "classnames";
+import cx6 from "clsx";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var { IS_LEAF } = metadataKeys;
 var classBase5 = "vuuTableGroupCell";
@@ -578,7 +575,7 @@ var Row = memo(
       "div",
       {
         ...htmlAttributes,
-        "aria-rowindex": row[0],
+        "aria-rowindex": row[0] + 1,
         key: `row-${row[0]}`,
         role: "row",
         className,
@@ -609,10 +606,6 @@ var Row = memo(
 Row.displayName = "Row";
 
 // src/useTable.ts
-import {
-  useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2
-} from "@vuu-ui/vuu-layout";
-import { useTableAndColumnSettings } from "@vuu-ui/vuu-table-extras";
 import {
   useDragDropNext as useDragDrop
 } from "@vuu-ui/vuu-ui-controls";
@@ -623,13 +616,14 @@ import {
   isJsonGroup as isJsonGroup2,
   isValidNumber,
   metadataKeys as metadataKeys6,
-  updateColumn
+  updateColumn,
+  useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback18,
+  useCallback as useCallback19,
   useEffect as useEffect4,
   useMemo as useMemo5,
-  useState as useState5
+  useState as useState6
 } from "react";
 
 // src/context-menu/buildContextMenuDescriptors.ts
@@ -977,7 +971,7 @@ function getRowIndex(rowEl) {
   if (rowEl) {
     const idx = rowEl.ariaRowIndex;
     if (idx !== null) {
-      return parseInt(idx, 10);
+      return parseInt(idx, 10) - 1;
     }
   }
   return -1;
@@ -1058,9 +1052,6 @@ var useCellEditing = ({ navigate }) => {
 };
 
 // src/useDataSource.ts
-import {
-  isVuuFeatureInvocation
-} from "@vuu-ui/vuu-data";
 import { getFullRange, NULL_RANGE } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback11, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState4 } from "react";
 
@@ -1126,6 +1117,7 @@ var MovingWindow = class {
 };
 
 // src/useDataSource.ts
+var isVuuFeatureInvocation = (action) => action.type === "vuu-link-created" || action.type === "vuu-link-removed";
 var useDataSource = ({
   dataSource,
   onFeatureInvocation,
@@ -1699,6 +1691,8 @@ import {
   applyGroupByToColumns,
   applySortToColumns,
   getCellRenderer,
+  getColumnHeaderContentRenderer,
+  getColumnHeaderLabelRenderer,
   getColumnLabel,
   getTableHeadings,
   getValueFormatter,
@@ -1772,7 +1766,6 @@ var useTableModel = (tableConfigProp, dataSource) => {
 };
 function init({ dataSource, tableConfig }) {
   const { columns, ...tableAttributes } = tableConfig;
-  console.log(JSON.stringify(tableAttributes, null, 2));
   const { config: dataSourceConfig, tableSchema } = dataSource;
   const runtimeColumns = columns.filter(subscribedOnly(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
     columnDescriptorToRuntimeColumDescriptor(tableAttributes, tableSchema)
@@ -1816,8 +1809,8 @@ var columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema) =>
     ...rest,
     align,
     CellRenderer: getCellRenderer(column),
-    HeaderCellLabelRenderer: getCellRenderer(column, "col-label"),
-    HeaderCellContentRenderer: getCellRenderer(column, "col-content"),
+    HeaderCellContentRenderer: getColumnHeaderContentRenderer(column),
+    HeaderCellLabelRenderer: getColumnHeaderLabelRenderer(column),
     clientSideEditValidationCheck: hasValidationRules(column.type) ? buildValidationChecker(column.type.renderer.rules) : void 0,
     label: getLabel(label, columnFormatHeader),
     key: key != null ? key : index + KEY_OFFSET,
@@ -2312,13 +2305,12 @@ var useTableViewport = ({
 // src/useVirtualViewport.ts
 import { useCallback as useCallback17, useEffect as useEffect3, useRef as useRef12 } from "react";
 var useVirtualViewport = ({
-  columns,
   getRowAtPosition,
   setRange,
   viewportMeasurements
 }) => {
   const firstRowRef = useRef12(0);
-  const { contentWidth, rowCount: viewportRowCount } = viewportMeasurements;
+  const { rowCount: viewportRowCount } = viewportMeasurements;
   const handleVerticalScroll = useCallback17(
     (scrollTop) => {
       const firstRow = getRowAtPosition(scrollTop);
@@ -2339,6 +2331,132 @@ var useVirtualViewport = ({
   };
 };
 
+// src/useTableAndColumnSettings.ts
+import { useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
+import { getCalculatedColumnType } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback18, useRef as useRef13, useState as useState5 } from "react";
+var useTableAndColumnSettings = ({
+  availableColumns: availableColumnsProps,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  onDataSourceConfigChange,
+  tableConfig
+}) => {
+  const dispatchLayoutAction = useLayoutProviderDispatch();
+  const showTableSettingsRef = useRef13();
+  const [availableColumns, setAvailableColumns] = useState5(
+    availableColumnsProps
+  );
+  const showContextPanel = useCallback18(
+    (componentType, title, props) => {
+      dispatchLayoutAction({
+        type: "set-props",
+        path: "#context-panel",
+        props: {
+          expanded: true,
+          content: {
+            type: componentType,
+            props
+          },
+          title
+        }
+      });
+    },
+    [dispatchLayoutAction]
+  );
+  const handleCancelCreateColumn = useCallback18(() => {
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
+    });
+  }, []);
+  const handleCreateCalculatedColumn = useCallback18(
+    (column) => {
+      const newAvailableColumns = availableColumns.concat({
+        name: column.name,
+        serverDataType: getCalculatedColumnType(column)
+      });
+      setAvailableColumns(newAvailableColumns);
+      onAvailableColumnsChange == null ? void 0 : onAvailableColumnsChange(newAvailableColumns);
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
+      });
+      onCreateCalculatedColumn(column);
+    },
+    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
+  );
+  const showColumnSettingsPanel = useCallback18(
+    (action) => {
+      showContextPanel("ColumnSettings", "Column Settings", {
+        column: action.column,
+        onCancelCreateColumn: handleCancelCreateColumn,
+        onConfigChange,
+        onCreateCalculatedColumn: handleCreateCalculatedColumn,
+        tableConfig,
+        vuuTable: action.vuuTable
+      });
+    },
+    [
+      handleCancelCreateColumn,
+      handleCreateCalculatedColumn,
+      onConfigChange,
+      showContextPanel,
+      tableConfig
+    ]
+  );
+  const handleAddCalculatedColumn = useCallback18(() => {
+    showColumnSettingsPanel({
+      column: {
+        name: "::",
+        serverDataType: "string"
+      },
+      type: "columnSettings",
+      vuuTable: { module: "SIMUL", table: "instruments" }
+    });
+  }, [showColumnSettingsPanel]);
+  const handleNavigateToColumn = useCallback18(
+    (columnName) => {
+      const column = tableConfig.columns.find((c) => c.name === columnName);
+      if (column) {
+        showColumnSettingsPanel({
+          type: "columnSettings",
+          column,
+          //TODO where do we get this from
+          vuuTable: { module: "SIMUL", table: "instruments" }
+        });
+      }
+    },
+    [showColumnSettingsPanel, tableConfig.columns]
+  );
+  showTableSettingsRef.current = useCallback18(() => {
+    showContextPanel("TableSettings", "DataGrid Settings", {
+      availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType }) => ({
+        name,
+        serverDataType
+      })),
+      onAddCalculatedColumn: handleAddCalculatedColumn,
+      onConfigChange,
+      onDataSourceConfigChange,
+      onNavigateToColumn: handleNavigateToColumn,
+      tableConfig
+    });
+  }, [
+    availableColumns,
+    handleAddCalculatedColumn,
+    handleNavigateToColumn,
+    onConfigChange,
+    onDataSourceConfigChange,
+    showContextPanel,
+    tableConfig
+  ]);
+  return {
+    showColumnSettingsPanel,
+    showTableSettingsPanel: showTableSettingsRef.current
+  };
+};
+
 // src/useTable.ts
 var stripInternalProperties = (tableConfig) => {
   return tableConfig;
@@ -2378,7 +2496,7 @@ var useTable = ({
   selectionModel,
   size
 }) => {
-  const [rowCount, setRowCount] = useState5(dataSource.size);
+  const [rowCount, setRowCount] = useState6(dataSource.size);
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
@@ -2387,7 +2505,7 @@ var useTable = ({
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = useCallback18((size2) => {
+  const onDataRowcountChange = useCallback19((size2) => {
     setRowCount(size2);
   }, []);
   const {
@@ -2404,7 +2522,7 @@ var useTable = ({
       tableConfig
     });
   }, [tableConfig, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = useCallback18(
+  const applyTableConfigChange = useCallback19(
     (config2) => {
       dispatchColumnAction({
         type: "init",
@@ -2415,7 +2533,7 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const [stateColumns, setStateColumns] = useState5();
+  const [stateColumns, setStateColumns] = useState6();
   const [columns, setColumnSize] = useMemo5(() => {
     const setSize = (columnName, width) => {
       const cols = updateColumn(runtimeColumns, columnName, { width });
@@ -2444,7 +2562,7 @@ var useTable = ({
     from: 0,
     to: viewportMeasurements.rowCount
   });
-  const onSubscribed = useCallback18(
+  const onSubscribed = useCallback19(
     ({ tableSchema }) => {
       if (tableSchema) {
         dispatchColumnAction({
@@ -2459,13 +2577,14 @@ var useTable = ({
   );
   const { data, dataRef, getSelectedRows, range, setRange } = useDataSource({
     dataSource,
+    // We need to factor this out of Table
     onFeatureInvocation,
     renderBufferSize,
     onSizeChange: onDataRowcountChange,
     onSubscribed,
     range: initialRange
   });
-  const handleConfigEditedInSettingsPanel = useCallback18(
+  const handleConfigEditedInSettingsPanel = useCallback19(
     (tableConfig2) => {
       console.log(`settings changed`);
       dispatchColumnAction({
@@ -2477,7 +2596,7 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = useCallback18(
+  const handleDataSourceConfigChanged = useCallback19(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2495,14 +2614,14 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchColumnAction]);
-  const handleCreateCalculatedColumn = useCallback18(
+  const handleCreateCalculatedColumn = useCallback19(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
       applyTableConfigChange(addColumn(tableConfig, column));
     },
     [dataSource, tableConfig, applyTableConfigChange]
   );
-  const hideColumns2 = useCallback18(
+  const hideColumns2 = useCallback19(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -2516,7 +2635,7 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = useCallback18(
+  const pinColumn3 = useCallback19(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
@@ -2539,7 +2658,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = useCallback18(
+  const onPersistentColumnOperation = useCallback19(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -2568,7 +2687,7 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = useCallback18(
+  const handleSort = useCallback19(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
         dataSource.sort = applySort(
@@ -2581,7 +2700,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const onResizeColumn = useCallback18(
+  const onResizeColumn = useCallback19(
     (phase, columnName, width) => {
       const column = columns.find((column2) => column2.name === columnName);
       if (column) {
@@ -2625,16 +2744,17 @@ var useTable = ({
     },
     [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
   );
-  const onToggleGroup = useCallback18(
+  const onToggleGroup = useCallback19(
     (row, column) => {
+      var _a, _b;
       const isJson = isJsonGroup2(column, row);
       const key = row[KEY];
       if (row[IS_EXPANDED2]) {
         dataSource.closeTreeNode(key, true);
         if (isJson) {
           const idx = columns.indexOf(column);
-          const rows = dataSource.getRowsAtDepth(idx + 1);
-          if (!rows.some((row2) => row2[IS_EXPANDED2] || row2[IS_LEAF2])) {
+          const rows = (_a = dataSource.getRowsAtDepth) == null ? void 0 : _a.call(dataSource, idx + 1);
+          if (rows && !rows.some((row2) => row2[IS_EXPANDED2] || row2[IS_LEAF2])) {
             dispatchColumnAction({
               type: "hideColumns",
               columns: columns.slice(idx + 2)
@@ -2644,10 +2764,10 @@ var useTable = ({
       } else {
         dataSource.openTreeNode(key);
         if (isJson) {
-          const childRows = dataSource.getChildRows(key);
+          const childRows = (_b = dataSource.getChildRows) == null ? void 0 : _b.call(dataSource, key);
           const idx = columns.indexOf(column) + 1;
           const columnsToShow = [columns[idx]];
-          if (childRows.some((row2) => row2[IS_LEAF2])) {
+          if (childRows && childRows.some((row2) => row2[IS_LEAF2])) {
             columnsToShow.push(columns[idx + 1]);
           }
           if (columnsToShow.some((col) => col.hidden)) {
@@ -2667,7 +2787,7 @@ var useTable = ({
     setRange,
     viewportMeasurements
   });
-  const handleVerticalScroll = useCallback18(
+  const handleVerticalScroll = useCallback19(
     (scrollTop) => {
       onVerticalScroll(scrollTop);
     },
@@ -2706,7 +2826,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = useCallback18(
+  const handleFocus = useCallback19(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -2721,13 +2841,13 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = useCallback18(
+  const onMoveGroupColumn = useCallback19(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = useCallback18(
+  const onRemoveGroupColumn = useCallback19(
     (column) => {
       if (isGroupColumn3(column)) {
         dataSource.groupBy = [];
@@ -2741,7 +2861,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = useCallback18(
+  const handleSelectionChange = useCallback19(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -2757,7 +2877,7 @@ var useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = useCallback18(
+  const handleKeyDown = useCallback19(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -2769,7 +2889,7 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = useCallback18(
+  const handleRowClick = useCallback19(
     (row, rangeSelect, keepExistingSelection) => {
       selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
       onRowClickProp == null ? void 0 : onRowClickProp(row);
@@ -2783,8 +2903,11 @@ var useTable = ({
       dataSource
     });
   }, [config, dataSource, dispatchColumnAction]);
-  const onMoveColumn = useCallback18(
+  const onMoveColumn = useCallback19(
     (columns2) => {
+      console.log(`useTable onMoveColumn`, {
+        columns: columns2
+      });
       const newTableConfig = {
         ...tableConfig,
         columns: columns2
@@ -2798,17 +2921,17 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = useCallback18(
+  const handleDropRow = useCallback19(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = useCallback18(
+  const handleDataEdited = useCallback19(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = useCallback18(
+  const handleDragStartRow = useCallback19(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
       const rowIndex = initialDragElement.ariaRowIndex;
@@ -2868,20 +2991,20 @@ var useTable = ({
 
 // src/table-header/TableHeader.tsx
 import { isGroupColumn as isGroupColumn4, isNotHidden as isNotHidden2 } from "@vuu-ui/vuu-utils";
-import cx8 from "classnames";
+import cx8 from "clsx";
 
 // src/table-header/useTableHeader.ts
 import { useDragDropNext as useDragDrop2 } from "@vuu-ui/vuu-ui-controls";
 import { moveColumnTo, visibleColumnAtIndex } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback19, useRef as useRef13 } from "react";
+import { useCallback as useCallback20, useRef as useRef14 } from "react";
 var useTableHeader = ({
   columns,
   onMoveColumn,
   onSortColumn,
   tableConfig
 }) => {
-  const containerRef = useRef13(null);
-  const handleDropColumnHeader = useCallback19(
+  const containerRef = useRef14(null);
+  const handleDropColumnHeader = useCallback20(
     (moveFrom, moveTo) => {
       const column = columns[moveFrom];
       const orderedColumns = moveColumnTo(columns, column, moveTo);
@@ -2889,11 +3012,15 @@ var useTableHeader = ({
       const targetIndex = orderedColumns.findIndex(ofColumn(column));
       const nextColumn = orderedColumns[targetIndex + 1];
       const insertPos = nextColumn ? tableConfig.columns.findIndex(ofColumn(nextColumn)) : -1;
-      onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));
+      if (moveTo > moveFrom && insertPos !== -1) {
+        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));
+      } else {
+        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));
+      }
     },
     [columns, onMoveColumn, tableConfig.columns]
   );
-  const handleColumnHeaderClick = useCallback19(
+  const handleColumnHeaderClick = useCallback20(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -2931,7 +3058,7 @@ var useTableHeader = ({
 // src/table-header/TableHeader.tsx
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var TableHeader = ({
-  classBase: classBase11 = "vuuTable",
+  classBase: classBase10 = "vuuTable",
   columns,
   headings,
   onMoveColumn,
@@ -2954,9 +3081,9 @@ var TableHeader = ({
     onSortColumn,
     tableConfig
   });
-  return /* @__PURE__ */ jsxs7("div", { className: `${classBase11}-col-headings`, ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs7("div", { className: `${classBase10}-col-headings`, ref: containerRef, children: [
     headings.map((colHeaders, i) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
-    /* @__PURE__ */ jsxs7("div", { className: `${classBase11}-col-headers`, role: "row", children: [
+    /* @__PURE__ */ jsxs7("div", { className: `${classBase10}-col-headers`, role: "row", children: [
       columns.filter(isNotHidden2).map(
         (col, i) => isGroupColumn4(col) ? /* @__PURE__ */ jsx11(
           GroupHeaderCellNext,
@@ -3113,6 +3240,7 @@ var TableCore = ({
               {
                 ...tableProps,
                 className: `${classBase7}-table`,
+                role: "table",
                 tabIndex: disableFocus ? void 0 : -1,
                 children: [
                   showColumnHeaders ? /* @__PURE__ */ jsx12(
@@ -3182,8 +3310,16 @@ var Table = forwardRef(function TableNext({
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = useRef14(null);
-  const [size, setSize] = useState6();
+  const containerRef = useRef15(null);
+  const [size, setSize] = useState7();
+  if (config === void 0) {
+    throw Error(
+      "vuu Table requires config prop. Minimum config is list of Column Descriptors"
+    );
+  }
+  if (dataSource === void 0) {
+    throw Error("vuu Table requires dataSource prop");
+  }
   return /* @__PURE__ */ jsx12(
     MeasuredContainer,
     {
@@ -3227,12 +3363,12 @@ var Table = forwardRef(function TableNext({
 });
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-import { memo as memo2, useCallback as useCallback20 } from "react";
+import { memo as memo2, useCallback as useCallback21 } from "react";
 import { CheckboxIcon, WarnCommit } from "@vuu-ui/vuu-ui-controls";
 import { Checkbox } from "@salt-ds/core";
 
 // src/cell-renderers/cell-utils.ts
-var dataAndColumnUnchanged = (p, p1) => p.column === p1.column && p.row[p.columnMap[p.column.name]] === p1.row[p1.columnMap[p1.column.name]];
+var dataAndColumnUnchanged = (p, p1) => p.column === p1.column && p.column.valueFormatter(p.row[p.columnMap[p.column.name]]) === p1.column.valueFormatter(p1.row[p1.columnMap[p1.column.name]]);
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
 import { dispatchCustomEvent, registerComponent } from "@vuu-ui/vuu-utils";
@@ -3241,7 +3377,7 @@ var CheckboxCell = memo2(
   ({ column, columnMap, onCommit = WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
     const isChecked = row[dataIdx];
-    const handleCommit = useCallback20(
+    const handleCommit = useCallback21(
       (value) => async (evt) => {
         const res = await onCommit(value);
         if (res === true) {
@@ -3251,7 +3387,7 @@ var CheckboxCell = memo2(
       },
       [onCommit]
     );
-    return !!column.editable ? /* @__PURE__ */ jsx13(Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ jsx13(CheckboxIcon, { checked: isChecked, disabled: true });
+    return column.editable ? /* @__PURE__ */ jsx13(Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ jsx13(CheckboxIcon, { checked: isChecked, disabled: true });
   },
   dataAndColumnUnchanged
 );
@@ -3260,64 +3396,14 @@ registerComponent("checkbox-cell", CheckboxCell, "cell-renderer", {
   serverDataType: "boolean"
 });
 
-// src/cell-renderers/dropdown-cell/DropdownCell.tsx
-import { useLookupValues } from "@vuu-ui/vuu-data-react";
-import {
-  Dropdown,
-  WarnCommit as WarnCommit2
-} from "@vuu-ui/vuu-ui-controls";
-import { dispatchCustomEvent as dispatchCustomEvent2, registerComponent as registerComponent2 } from "@vuu-ui/vuu-utils";
-import { memo as memo3, useCallback as useCallback21, useState as useState7 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var classBase8 = "vuuTableDropdownCell";
-var openKeys = ["Enter", " "];
-var DropdownCell = memo3(
-  function DropdownCell2({
-    column,
-    columnMap,
-    onCommit = WarnCommit2,
-    row
-  }) {
-    const dataIdx = columnMap[column.name];
-    const { initialValue, values } = useLookupValues(column, row[dataIdx]);
-    const [value, setValue] = useState7(null);
-    const handleSelectionChange = useCallback21(
-      (evt, selectedOption) => {
-        if (selectedOption) {
-          setValue(selectedOption);
-          onCommit(selectedOption.value).then((response) => {
-            if (response === true && evt) {
-              dispatchCustomEvent2(evt.target, "vuu-commit");
-            }
-          });
-        }
-      },
-      [onCommit]
-    );
-    return /* @__PURE__ */ jsx14(
-      Dropdown,
-      {
-        className: classBase8,
-        onSelectionChange: handleSelectionChange,
-        openKeys,
-        selected: value != null ? value : initialValue,
-        source: values,
-        width: column.width - 17
-      }
-    );
-  },
-  dataAndColumnUnchanged
-);
-registerComponent2("dropdown-cell", DropdownCell, "cell-renderer", {});
-
 // src/cell-renderers/input-cell/InputCell.tsx
-import { registerComponent as registerComponent3 } from "@vuu-ui/vuu-utils";
+import { registerComponent as registerComponent2 } from "@vuu-ui/vuu-utils";
 import { Input } from "@salt-ds/core";
 import { useEditableText } from "@vuu-ui/vuu-ui-controls";
-import cx10 from "classnames";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var classBase9 = "vuuTableInputCell";
-var WarnCommit3 = () => {
+import cx10 from "clsx";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var classBase8 = "vuuTableInputCell";
+var WarnCommit2 = () => {
   console.warn(
     "onCommit handler has not been provided to InputCell cell renderer"
   );
@@ -3326,68 +3412,45 @@ var WarnCommit3 = () => {
 var InputCell = ({
   column,
   columnMap,
-  onCommit = WarnCommit3,
+  onCommit = WarnCommit2,
   row
 }) => {
   const dataIdx = columnMap[column.name];
-  const {
-    align = "left",
-    clientSideEditValidationCheck,
-    valueFormatter
-  } = column;
+  const { align = "left", clientSideEditValidationCheck } = column;
   const { warningMessage, ...editProps } = useEditableText({
-    initialValue: valueFormatter(row[dataIdx]),
+    initialValue: row[dataIdx],
     onCommit,
     clientSideEditValidationCheck
   });
-  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx15("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
-  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx15("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
-  return /* @__PURE__ */ jsx15(
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx14("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx14("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
+  return /* @__PURE__ */ jsx14(
     Input,
     {
       ...editProps,
-      className: cx10(classBase9, {
-        [`${classBase9}-error`]: warningMessage !== void 0
+      className: cx10(classBase8, {
+        [`${classBase8}-error`]: warningMessage !== void 0
       }),
       endAdornment,
       startAdornment
     }
   );
 };
-registerComponent3("input-cell", InputCell, "cell-renderer", {});
-
-// src/cell-renderers/lookup-cell/LookupCell.tsx
-import { useLookupValues as useLookupValues2 } from "@vuu-ui/vuu-data-react";
-import { registerComponent as registerComponent4 } from "@vuu-ui/vuu-utils";
-import { memo as memo4 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var LookupCell = memo4(
-  function LookupCell2({
-    column,
-    columnMap,
-    row
-  }) {
-    const dataIdx = columnMap[column.name];
-    const { initialValue: value } = useLookupValues2(column, row[dataIdx]);
-    return /* @__PURE__ */ jsx16("span", { children: value == null ? void 0 : value.label });
-  },
-  dataAndColumnUnchanged
-);
-registerComponent4("lookup-cell", LookupCell, "cell-renderer", {});
+registerComponent2("input-cell", InputCell, "cell-renderer", {});
 
 // src/cell-renderers/toggle-cell/ToggleCell.tsx
-import { WarnCommit as WarnCommit4 } from "@vuu-ui/vuu-ui-controls";
+import { WarnCommit as WarnCommit3 } from "@vuu-ui/vuu-ui-controls";
 import {
-  dispatchCustomEvent as dispatchCustomEvent3,
+  dispatchCustomEvent as dispatchCustomEvent2,
   isTypeDescriptor,
   isValueListRenderer,
-  registerComponent as registerComponent5
+  registerComponent as registerComponent3
 } from "@vuu-ui/vuu-utils";
-import cx11 from "classnames";
-import { memo as memo5, useCallback as useCallback22 } from "react";
+import cx11 from "clsx";
+import { memo as memo3, useCallback as useCallback22 } from "react";
 import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var classBase10 = "vuuTableToggleCell";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var classBase9 = "vuuTableToggleCell";
 var getValueList = ({ name, type }) => {
   if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {
     return type.renderer.values;
@@ -3397,11 +3460,11 @@ var getValueList = ({ name, type }) => {
     );
   }
 };
-var ToggleCell = memo5(
+var ToggleCell = memo3(
   function ToggleCell2({
     column,
     columnMap,
-    onCommit = WarnCommit4,
+    onCommit = WarnCommit3,
     row
   }) {
     const values = getValueList(column);
@@ -3411,17 +3474,17 @@ var ToggleCell = memo5(
       (evt, value2) => {
         return onCommit(value2).then((response) => {
           if (response === true) {
-            dispatchCustomEvent3(evt.target, "vuu-commit");
+            dispatchCustomEvent2(evt.target, "vuu-commit");
           }
           return response;
         });
       },
       [onCommit]
     );
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx15(
       CycleStateButton,
       {
-        className: cx11(classBase10, `${classBase10}-${column.name}`),
+        className: cx11(classBase9, `${classBase9}-${column.name}`),
         onCommit: handleCommit,
         value,
         values,
@@ -3432,14 +3495,14 @@ var ToggleCell = memo5(
   },
   dataAndColumnUnchanged
 );
-registerComponent5("toggle-cell", ToggleCell, "cell-renderer", {});
+registerComponent3("toggle-cell", ToggleCell, "cell-renderer", {});
 
 // src/useControlledTableNavigation.ts
 import { useStateRef } from "@vuu-ui/vuu-ui-controls";
 import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback23, useRef as useRef15 } from "react";
+import { useCallback as useCallback23, useRef as useRef16 } from "react";
 var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = useRef15(null);
+  const tableRef = useRef16(null);
   const [highlightedIndexRef, setHighlightedIndex] = useStateRef(initialValue);
   const handleKeyDown = useCallback23(
     (e) => {
@@ -3475,13 +3538,14 @@ var useControlledTableNavigation = (initialValue, rowCount) => {
 };
 export {
   CheckboxCell,
-  DropdownCell,
   GroupHeaderCellNext,
   HeaderCell,
   InputCell,
-  LookupCell,
   Table,
+  TableCell,
+  TableGroupCell,
   ToggleCell,
+  dataAndColumnUnchanged,
   isShowColumnSettings,
   isShowTableSettings,
   updateTableConfig,