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

package/cjs/index.js

@@ -31,13 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   CheckboxCell: () => CheckboxCell,
-  DropdownCell: () => DropdownCell,
   GroupHeaderCellNext: () => GroupHeaderCellNext,
   HeaderCell: () => HeaderCell,
   InputCell: () => InputCell,
-  LookupCell: () => LookupCell,
   Table: () => Table,
+  TableCell: () => TableCell,
+  TableGroupCell: () => TableGroupCell,
   ToggleCell: () => ToggleCell,
+  dataAndColumnUnchanged: () => dataAndColumnUnchanged,
   isShowColumnSettings: () => isShowColumnSettings,
   isShowTableSettings: () => isShowTableSettings,
   updateTableConfig: () => updateTableConfig,
@@ -48,12 +49,82 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/header-cell/GroupHeaderCellNext.tsx
-var import_classnames3 = __toESM(require("classnames"));
+var import_vuu_layout = require("@vuu-ui/vuu-layout");
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_clsx3 = __toESM(require("clsx"));
 var import_react5 = require("react");
 
-// src/column-resizing/ColumnResizer.tsx
+// src/column-header-pill/ColumnHeaderPill.tsx
+var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_jsx_runtime = require("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 = (0, import_react.useCallback)(
+    (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      onRemove == null ? void 0 : onRemove(column);
+    },
+    [column, onRemove]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx.default)(classBase, className), children: [
+    children,
+    removable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: `${classBase}-removeButton`,
+        role: "button",
+        "data-icon": "cross",
+        onClick: handleClickRemove
+      }
+    ) : null
+  ] });
+};
+
+// src/column-header-pill/GroupColumnPill.tsx
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuGroupColumnPill-label", children: name }),
+    icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-icon": icon }) : null,
+    typeof sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
+  ] });
+};
+
+// src/column-header-pill/SortIndicator.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)(ColumnHeaderPill, { column, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-icon": icon }),
+    typeof column.sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
+  ] });
+};
+
+// src/column-resizing/ColumnResizer.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var NOOP = () => void 0;
 var baseClass = "vuuColumnResizerNext";
 var ColumnResizer = ({
@@ -61,8 +132,8 @@ var ColumnResizer = ({
   onDragEnd = NOOP,
   onDragStart = NOOP
 }) => {
-  const position = (0, import_react.useRef)(0);
-  const onMouseMove = (0, import_react.useCallback)(
+  const position = (0, import_react2.useRef)(0);
+  const onMouseMove = (0, import_react2.useCallback)(
     (e) => {
       if (e.stopPropagation) {
         e.stopPropagation();
@@ -79,7 +150,7 @@ var ColumnResizer = ({
     },
     [onDrag]
   );
-  const onMouseUp = (0, import_react.useCallback)(
+  const onMouseUp = (0, import_react2.useCallback)(
     (e) => {
       window.removeEventListener("mouseup", onMouseUp);
       window.removeEventListener("mousemove", onMouseMove);
@@ -87,7 +158,7 @@ var ColumnResizer = ({
     },
     [onDragEnd, onMouseMove]
   );
-  const handleMouseDown = (0, import_react.useCallback)(
+  const handleMouseDown = (0, import_react2.useCallback)(
     (e) => {
       onDragStart(e);
       position.current = Math.round(e.clientX);
@@ -102,20 +173,20 @@ var ColumnResizer = ({
     },
     [onDragStart, onMouseMove, onMouseUp]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: baseClass, onMouseDown: handleMouseDown });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: baseClass, onMouseDown: handleMouseDown });
 };
 
 // src/column-resizing/useTableColumnResize.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var useTableColumnResize = ({
   column,
   onResize,
   rootRef
 }) => {
-  const widthRef = (0, import_react2.useRef)(0);
-  const [isResizing, setResizing] = (0, import_react2.useState)(false);
+  const widthRef = (0, import_react3.useRef)(0);
+  const [isResizing, setResizing] = (0, import_react3.useState)(false);
   const { name } = column;
-  const handleResizeStart = (0, import_react2.useCallback)(() => {
+  const handleResizeStart = (0, import_react3.useCallback)(() => {
     if (onResize && rootRef.current) {
       const { width } = rootRef.current.getBoundingClientRect();
       widthRef.current = Math.round(width);
@@ -123,7 +194,7 @@ var useTableColumnResize = ({
       onResize == null ? void 0 : onResize("begin", name);
     }
   }, [name, onResize, rootRef]);
-  const handleResize = (0, import_react2.useCallback)(
+  const handleResize = (0, import_react3.useCallback)(
     (_evt, moveBy) => {
       if (rootRef.current) {
         if (onResize) {
@@ -138,7 +209,7 @@ var useTableColumnResize = ({
     },
     [name, onResize, rootRef]
   );
-  const handleResizeEnd = (0, import_react2.useCallback)(() => {
+  const handleResizeEnd = (0, import_react3.useCallback)(() => {
     if (onResize) {
       onResize("end", name, widthRef.current);
       setTimeout(() => {
@@ -156,98 +227,29 @@ var useTableColumnResize = ({
 
 // src/useCell.ts
 var import_vuu_utils = require("@vuu-ui/vuu-utils");
-var import_classnames = __toESM(require("classnames"));
-var import_react3 = require("react");
-var useCell = (column, classBase11, isHeader) => (
+var import_clsx2 = __toESM(require("clsx"));
+var import_react4 = require("react");
+var useCell = (column, classBase10, isHeader) => (
   // TODO measure perf without the memo, might not be worth the cost
-  (0, import_react3.useMemo)(() => {
-    const className = (0, import_classnames.default)(classBase11, {
+  (0, import_react4.useMemo)(() => {
+    const className = (0, import_clsx2.default)(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 = (0, import_vuu_utils.getColumnStyle)(column);
     return {
       className,
       style
     };
-  }, [column, classBase11, isHeader])
+  }, [column, classBase10, isHeader])
 );
 
-// src/column-header-pill/ColumnHeaderPill.tsx
-var import_classnames2 = __toESM(require("classnames"));
-var import_react4 = require("react");
-var import_jsx_runtime2 = require("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 = (0, import_react4.useCallback)(
-    (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      onRemove == null ? void 0 : onRemove(column);
-    },
-    [column, onRemove]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames2.default)(classBase, className), children: [
-    children,
-    removable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "span",
-      {
-        className: `${classBase}-removeButton`,
-        role: "button",
-        "data-icon": "cross",
-        onClick: handleClickRemove
-      }
-    ) : null
-  ] });
-};
-
-// src/column-header-pill/GroupColumnPill.tsx
-var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vuuGroupColumnPill-label", children: name }),
-    icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-icon": icon }) : null,
-    typeof sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
-  ] });
-};
-
-// src/column-header-pill/SortIndicator.tsx
-var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsxs)(ColumnHeaderPill, { column, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-icon": icon }),
-    typeof column.sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
-  ] });
-};
-
 // src/header-cell/GroupHeaderCellNext.tsx
-var import_vuu_layout = require("@vuu-ui/vuu-layout");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var import_react6 = require("react");
 var classBase2 = "vuuTableGroupHeaderCell";
@@ -296,14 +298,14 @@ var GroupHeaderCellNext = ({
     },
     [onMoveColumn]
   );
-  (0, import_vuu_layout.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils2.useLayoutEffectSkipFirst)(() => {
     setColumns((cols) => switchIfChanged(cols, groupColumn.columns));
   }, [groupColumn.columns]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_classnames3.default)(className, classNameProp, {
+      className: (0, import_clsx3.default)(className, classNameProp, {
         [`${classBase2}-pending`]: groupColumn.groupConfirmed === false
       }),
       ref: rootRef,
@@ -345,11 +347,12 @@ var GroupHeaderCellNext = ({
 };
 
 // src/header-cell/HeaderCell.tsx
+var import_clsx5 = __toESM(require("clsx"));
 var import_react8 = require("react");
 
 // src/column-menu/ColumnMenu.tsx
 var import_vuu_popups = require("@vuu-ui/vuu-popups");
-var import_classnames4 = __toESM(require("classnames"));
+var import_clsx4 = __toESM(require("clsx"));
 var import_react7 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var getPosition = (element) => {
@@ -386,7 +389,7 @@ var ColumnMenu = ({
     "span",
     {
       ...props,
-      className: (0, import_classnames4.default)("vuuTable-columnMenu", className, {
+      className: (0, import_clsx4.default)("vuuTable-columnMenu", className, {
         "vuuTable-columnMenu-open": menuOpen
       }),
       "data-icon": "more-vert",
@@ -397,7 +400,6 @@ var ColumnMenu = ({
 };
 
 // src/header-cell/HeaderCell.tsx
-var import_classnames5 = __toESM(require("classnames"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var classBase3 = "vuuTableHeaderCell";
 var HeaderCell = ({
@@ -431,7 +433,7 @@ var HeaderCell = ({
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_classnames5.default)(className, classNameProp, {
+      className: (0, import_clsx5.default)(className, classNameProp, {
         [`${classBase3}-resizing`]: isResizing
       }),
       onClick: handleClick,
@@ -449,18 +451,18 @@ var HeaderCell = ({
 // src/Table.tsx
 var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
-var import_classnames9 = __toESM(require("classnames"));
-var import_react25 = require("react");
+var import_clsx9 = __toESM(require("clsx"));
+var import_react26 = require("react");
 
 // src/Row.tsx
-var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
-var import_classnames7 = __toESM(require("classnames"));
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_clsx7 = __toESM(require("clsx"));
 var import_react11 = require("react");
 
 // src/table-cell/TableCell.tsx
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
 var import_react9 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var classBase4 = "vuuTableCell";
@@ -478,7 +480,7 @@ var TableCell = ({
     (value) => {
       if (onDataEdited) {
         let typedValue = value;
-        if ((0, import_vuu_utils2.isNumericColumn)(column) && typeof value === "string") {
+        if ((0, import_vuu_utils3.isNumericColumn)(column) && typeof value === "string") {
           typedValue = column.serverDataType === "double" ? parseFloat(value) : parseInt(value);
         }
         return onDataEdited == null ? void 0 : onDataEdited(row, name, typedValue);
@@ -517,15 +519,15 @@ var TableCell = ({
 };
 
 // src/table-cell/TableGroupCell.tsx
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
 var import_react10 = require("react");
-var import_classnames6 = __toESM(require("classnames"));
+var import_clsx6 = __toESM(require("clsx"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var { IS_LEAF } = import_vuu_utils3.metadataKeys;
+var { IS_LEAF } = import_vuu_utils4.metadataKeys;
 var classBase5 = "vuuTableGroupCell";
 var TableGroupCell = ({ column, onClick, row }) => {
   const { columns } = column;
-  const [value, offset] = (0, import_vuu_utils3.getGroupValueAndOffset)(columns, row);
+  const [value, offset] = (0, import_vuu_utils4.getGroupValueAndOffset)(columns, row);
   const { className, style } = useCell(column, classBase5);
   const handleClick = (0, import_react10.useCallback)(
     (evt) => {
@@ -538,7 +540,7 @@ var TableGroupCell = ({ column, onClick, row }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
-      className: (0, import_classnames6.default)(className, "vuuTableCell"),
+      className: (0, import_clsx6.default)(className, "vuuTableCell"),
       role: "cell",
       style,
       onClick: isLeaf ? void 0 : handleClick,
@@ -554,7 +556,7 @@ var TableGroupCell = ({ column, onClick, row }) => {
 // src/Row.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var import_react12 = require("react");
-var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils4.metadataKeys;
+var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils5.metadataKeys;
 var classBase6 = "vuuTableRow";
 var Row = (0, import_react11.memo)(
   ({
@@ -583,8 +585,8 @@ var Row = (0, import_react11.memo)(
       },
       [onClick, row]
     );
-    const { True, First, Last } = import_vuu_utils4.RowSelected;
-    const className = (0, import_classnames7.default)(classBase6, classNameProp, {
+    const { True, First, Last } = import_vuu_utils5.RowSelected;
+    const className = (0, import_clsx7.default)(classBase6, classNameProp, {
       [`${classBase6}-even`]: zebraStripes && rowIndex % 2 === 0,
       [`${classBase6}-expanded`]: isExpanded,
       [`${classBase6}-highlighted`]: highlighted,
@@ -595,7 +597,7 @@ var Row = (0, import_react11.memo)(
     const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
     const handleGroupCellClick = (0, import_react11.useCallback)(
       (evt, column) => {
-        if ((0, import_vuu_utils4.isGroupColumn)(column) || (0, import_vuu_utils4.isJsonGroup)(column, row)) {
+        if ((0, import_vuu_utils5.isGroupColumn)(column) || (0, import_vuu_utils5.isJsonGroup)(column, row)) {
           evt.stopPropagation();
           onToggleGroup == null ? void 0 : onToggleGroup(row, column);
         }
@@ -606,7 +608,7 @@ var Row = (0, import_react11.memo)(
       "div",
       {
         ...htmlAttributes,
-        "aria-rowindex": row[0],
+        "aria-rowindex": row[0] + 1,
         key: `row-${row[0]}`,
         role: "row",
         className,
@@ -614,9 +616,9 @@ var Row = (0, import_react11.memo)(
         style
       },
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase6}-selectionDecorator vuuStickyLeft` }),
-      columns.filter(import_vuu_utils4.isNotHidden).map((column) => {
-        const isGroup = (0, import_vuu_utils4.isGroupColumn)(column);
-        const isJsonCell = (0, import_vuu_utils4.isJsonColumn)(column);
+      columns.filter(import_vuu_utils5.isNotHidden).map((column) => {
+        const isGroup = (0, import_vuu_utils5.isGroupColumn)(column);
+        const isJsonCell = (0, import_vuu_utils5.isJsonColumn)(column);
         const Cell = isGroup ? TableGroupCell : TableCell;
         return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Cell,
@@ -637,14 +639,12 @@ var Row = (0, import_react11.memo)(
 Row.displayName = "Row";
 
 // src/useTable.ts
-var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
-var import_vuu_table_extras = require("@vuu-ui/vuu-table-extras");
 var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
-var import_react23 = require("react");
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var import_react24 = require("react");
 
 // src/context-menu/buildContextMenuDescriptors.ts
-var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
 var buildContextMenuDescriptors = (dataSource) => (location, options) => {
   const descriptors = [];
   if (dataSource === void 0) {
@@ -762,7 +762,7 @@ function buildAggregationMenuItems(options, dataSource) {
         { label: "Count", action: "agg-count", options },
         { label: "Distinct", action: "agg-distinct", options }
       ].concat(
-        (0, import_vuu_utils5.isNumericColumn)(column) ? [
+        (0, import_vuu_utils6.isNumericColumn)(column) ? [
           { label: "Sum", action: "agg-sum", options },
           { label: "Avg", action: "agg-avg", options },
           { label: "High", action: "agg-high", options },
@@ -854,11 +854,11 @@ function buildGroupMenuItems(options, { groupBy }) {
 }
 
 // src/context-menu/useHandleTableContextMenu.ts
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
 var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
 var removeFilterColumn = (dataSourceFilter, column) => {
   if (dataSourceFilter.filterStruct && column) {
-    const [filterStruct, filter] = (0, import_vuu_utils6.removeColumnFromFilter)(
+    const [filterStruct, filter] = (0, import_vuu_utils7.removeColumnFromFilter)(
       column,
       dataSourceFilter.filterStruct
     );
@@ -870,7 +870,7 @@ var removeFilterColumn = (dataSourceFilter, column) => {
     return dataSourceFilter;
   }
 };
-var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils7.AggregationType;
+var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils8.AggregationType;
 var useHandleTableContextMenu = ({
   dataSource,
   onPersistentColumnOperation
@@ -881,17 +881,17 @@ var useHandleTableContextMenu = ({
       const { column } = gridOptions;
       switch (action.menuId) {
         case "sort-asc":
-          return dataSource.sort = (0, import_vuu_utils7.setSortColumn)(dataSource.sort, column, "A"), true;
+          return dataSource.sort = (0, import_vuu_utils8.setSortColumn)(dataSource.sort, column, "A"), true;
         case "sort-dsc":
-          return dataSource.sort = (0, import_vuu_utils7.setSortColumn)(dataSource.sort, column, "D"), true;
+          return dataSource.sort = (0, import_vuu_utils8.setSortColumn)(dataSource.sort, column, "D"), true;
         case "sort-add-asc":
-          return dataSource.sort = (0, import_vuu_utils7.addSortColumn)(dataSource.sort, column, "A"), true;
+          return dataSource.sort = (0, import_vuu_utils8.addSortColumn)(dataSource.sort, column, "A"), true;
         case "sort-add-dsc":
-          return dataSource.sort = (0, import_vuu_utils7.addSortColumn)(dataSource.sort, column, "D"), true;
+          return dataSource.sort = (0, import_vuu_utils8.addSortColumn)(dataSource.sort, column, "D"), true;
         case "group":
-          return dataSource.groupBy = (0, import_vuu_utils7.addGroupColumn)(dataSource.groupBy, column), true;
+          return dataSource.groupBy = (0, import_vuu_utils8.addGroupColumn)(dataSource.groupBy, column), true;
         case "group-add":
-          return dataSource.groupBy = (0, import_vuu_utils7.addGroupColumn)(dataSource.groupBy, column), true;
+          return dataSource.groupBy = (0, import_vuu_utils8.addGroupColumn)(dataSource.groupBy, column), true;
         case "column-hide":
           return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
         case "column-remove":
@@ -901,17 +901,17 @@ var useHandleTableContextMenu = ({
         case "remove-filters":
           return dataSource.filter = { filter: "" }, true;
         case "agg-avg":
-          return dataSource.aggregations = (0, import_vuu_utils7.setAggregations)(dataSource.aggregations, column, Average), true;
+          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Average), true;
         case "agg-high":
-          return dataSource.aggregations = (0, import_vuu_utils7.setAggregations)(dataSource.aggregations, column, High), true;
+          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, High), true;
         case "agg-low":
-          return dataSource.aggregations = (0, import_vuu_utils7.setAggregations)(dataSource.aggregations, column, Low), true;
+          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Low), true;
         case "agg-count":
-          return dataSource.aggregations = (0, import_vuu_utils7.setAggregations)(dataSource.aggregations, column, Count), true;
+          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Count), true;
         case "agg-distinct":
-          return dataSource.aggregations = (0, import_vuu_utils7.setAggregations)(dataSource.aggregations, column, Distinct), true;
+          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Distinct), true;
         case "agg-sum":
-          return dataSource.aggregations = (0, import_vuu_utils7.setAggregations)(dataSource.aggregations, column, Sum), true;
+          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Sum), true;
         case "column-pin-floating":
           return onPersistentColumnOperation({ type: "pinColumn", column, pin: "floating" }), true;
         case "column-pin-left":
@@ -955,7 +955,7 @@ var updateTableConfig = (config, action) => {
 };
 
 // src/useCellEditing.ts
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
 var import_react13 = require("react");
 
 // src/table-dom-utils.ts
@@ -980,7 +980,7 @@ function getRowIndex(rowEl) {
   if (rowEl) {
     const idx = rowEl.ariaRowIndex;
     if (idx !== null) {
-      return parseInt(idx, 10);
+      return parseInt(idx, 10) - 1;
     }
   }
   return -1;
@@ -1019,7 +1019,7 @@ var useCellEditing = ({ navigate }) => {
     (e) => {
       const el = e.target;
       if (cellIsTextInput(el)) {
-        if ((0, import_vuu_utils8.isCharacterKey)(e.key)) {
+        if ((0, import_vuu_utils9.isCharacterKey)(e.key)) {
           editInput(e);
         } else if (e.key === "Enter") {
           focusInput(e);
@@ -1061,13 +1061,12 @@ var useCellEditing = ({ navigate }) => {
 };
 
 // src/useDataSource.ts
-var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
 var import_react14 = require("react");
 
 // src/moving-window.ts
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
-var { SELECTED: SELECTED2 } = import_vuu_utils9.metadataKeys;
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var { SELECTED: SELECTED2 } = import_vuu_utils10.metadataKeys;
 var MovingWindow = class {
   constructor({ from, to }) {
     this.rowCount = 0;
@@ -1077,7 +1076,7 @@ var MovingWindow = class {
       }
       this.rowCount = rowCount;
     };
-    this.range = new import_vuu_utils9.WindowRange(from, to);
+    this.range = new import_vuu_utils10.WindowRange(from, to);
     this.data = new Array(Math.max(0, to - from));
     this.rowCount = 0;
   }
@@ -1088,7 +1087,7 @@ var MovingWindow = class {
       this.data[internalIndex] = data;
       if (data[SELECTED2]) {
         const previousRow = this.data[internalIndex - 1];
-        if ((0, import_vuu_utils9.isRowSelectedLast)(previousRow)) {
+        if ((0, import_vuu_utils10.isRowSelectedLast)(previousRow)) {
           this.data[internalIndex - 1] = previousRow.slice();
           this.data[internalIndex - 1][SELECTED2] -= 4;
         }
@@ -1123,21 +1122,22 @@ var MovingWindow = class {
 };
 
 // src/useDataSource.ts
+var isVuuFeatureInvocation = (action) => action.type === "vuu-link-created" || action.type === "vuu-link-removed";
 var useDataSource = ({
   dataSource,
   onFeatureInvocation,
   onSizeChange,
   onSubscribed,
-  range = import_vuu_utils10.NULL_RANGE,
+  range = import_vuu_utils11.NULL_RANGE,
   renderBufferSize = 0
 }) => {
   const [, forceUpdate] = (0, import_react14.useState)(null);
   const data = (0, import_react14.useRef)([]);
   const isMounted = (0, import_react14.useRef)(true);
   const hasUpdated = (0, import_react14.useRef)(false);
-  const rangeRef = (0, import_react14.useRef)(import_vuu_utils10.NULL_RANGE);
+  const rangeRef = (0, import_react14.useRef)(import_vuu_utils11.NULL_RANGE);
   const dataWindow = (0, import_react14.useMemo)(
-    () => new MovingWindow((0, import_vuu_utils10.getFullRange)(range, renderBufferSize)),
+    () => new MovingWindow((0, import_vuu_utils11.getFullRange)(range, renderBufferSize)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
@@ -1170,7 +1170,7 @@ var useDataSource = ({
           data.current = dataWindow.data;
           hasUpdated.current = true;
         }
-      } else if ((0, import_vuu_data.isVuuFeatureInvocation)(message)) {
+      } else if (isVuuFeatureInvocation(message)) {
         onFeatureInvocation == null ? void 0 : onFeatureInvocation(message);
       } else {
         console.log(`useDataSource unexpected message ${message.type}`);
@@ -1197,14 +1197,14 @@ var useDataSource = ({
       (_a = dataSource.enable) == null ? void 0 : _a.call(dataSource, datasourceMessageHandler);
     } else {
       dataSource == null ? void 0 : dataSource.subscribe(
-        { range: (0, import_vuu_utils10.getFullRange)(range, renderBufferSize) },
+        { range: (0, import_vuu_utils11.getFullRange)(range, renderBufferSize) },
         datasourceMessageHandler
       );
     }
   }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
   const setRange = (0, import_react14.useCallback)(
     (range2) => {
-      const fullRange = (0, import_vuu_utils10.getFullRange)(range2, renderBufferSize);
+      const fullRange = (0, import_vuu_utils11.getFullRange)(range2, renderBufferSize);
       dataWindow.setRange(fullRange);
       dataSource.range = rangeRef.current = fullRange;
       dataSource.emit("range", range2);
@@ -1576,9 +1576,9 @@ var useKeyboardNavigation = ({
 };
 
 // src/useSelection.ts
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
 var import_react17 = require("react");
-var { IDX: IDX2 } = import_vuu_utils11.metadataKeys;
+var { IDX: IDX2 } = import_vuu_utils12.metadataKeys;
 var NO_SELECTION = [];
 var defaultSelectionKeys = ["Enter", " "];
 var useSelection = ({
@@ -1600,7 +1600,7 @@ var useSelection = ({
       const { [IDX2]: idx } = row;
       const { current: active } = lastActiveRef;
       const { current: selected } = selectedRef;
-      const selectOperation = (0, import_vuu_utils11.isRowSelected)(row) ? import_vuu_utils11.deselectItem : import_vuu_utils11.selectItem;
+      const selectOperation = (0, import_vuu_utils12.isRowSelected)(row) ? import_vuu_utils12.deselectItem : import_vuu_utils12.selectItem;
       const newSelected = selectOperation(
         selectionModel,
         selected,
@@ -1625,7 +1625,7 @@ var useSelection = ({
             `[aria-rowindex="${rowIndex}"]`
           );
           if (rowEl) {
-            (0, import_vuu_utils11.dispatchMouseEvent)(rowEl, "click");
+            (0, import_vuu_utils12.dispatchMouseEvent)(rowEl, "click");
           }
         }
       }
@@ -1640,7 +1640,7 @@ var useSelection = ({
 
 // src/useTableContextMenu.ts
 var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
 var import_react18 = require("react");
 var NO_ROWS = [];
 var useTableContextMenu = ({
@@ -1658,7 +1658,7 @@ var useTableContextMenu = ({
       const rowEl = target == null ? void 0 : target.closest("div[role='row']");
       if (cellEl && rowEl) {
         const { selectedRowsCount } = dataSource;
-        const columnMap = (0, import_vuu_utils12.buildColumnMap)(columns);
+        const columnMap = (0, import_vuu_utils13.buildColumnMap)(columns);
         const rowIndex = parseInt((_a = rowEl.ariaRowIndex) != null ? _a : "-1");
         const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
         const row = data.find(([idx]) => idx === rowIndex);
@@ -1678,12 +1678,12 @@ var useTableContextMenu = ({
 };
 
 // src/useTableModel.ts
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
 var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
 var import_react19 = require("react");
-var { info } = (0, import_vuu_utils13.logger)("useTableModel");
+var { info } = (0, import_vuu_utils14.logger)("useTableModel");
 var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = import_vuu_utils13.metadataKeys.count;
+var KEY_OFFSET = import_vuu_utils14.metadataKeys.count;
 var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
 var getDataType = (column, tableSchema) => {
   const schemaColumn = tableSchema == null ? void 0 : tableSchema.columns.find(
@@ -1738,15 +1738,14 @@ 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((0, import_vuu_utils13.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
+  const runtimeColumns = columns.filter((0, import_vuu_utils14.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
     columnDescriptorToRuntimeColumDescriptor(tableAttributes, tableSchema)
   );
-  const maybePinnedColumns = runtimeColumns.some(import_vuu_utils13.isPinned) ? (0, import_vuu_utils13.sortPinnedColumns)(runtimeColumns) : runtimeColumns;
+  const maybePinnedColumns = runtimeColumns.some(import_vuu_utils14.isPinned) ? (0, import_vuu_utils14.sortPinnedColumns)(runtimeColumns) : runtimeColumns;
   let state = {
     columns: maybePinnedColumns,
-    headings: (0, import_vuu_utils13.getTableHeadings)(maybePinnedColumns),
+    headings: (0, import_vuu_utils14.getTableHeadings)(maybePinnedColumns),
     tableConfig,
     ...tableAttributes
   };
@@ -1774,26 +1773,26 @@ var columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema) =>
     align = getDefaultAlignment(serverDataType),
     key,
     name,
-    label = (0, import_vuu_utils13.getColumnLabel)(column),
+    label = (0, import_vuu_utils14.getColumnLabel)(column),
     width = columnDefaultWidth,
     ...rest
   } = column;
   const runtimeColumnWithDefaults = {
     ...rest,
     align,
-    CellRenderer: (0, import_vuu_utils13.getCellRenderer)(column),
-    HeaderCellLabelRenderer: (0, import_vuu_utils13.getCellRenderer)(column, "col-label"),
-    HeaderCellContentRenderer: (0, import_vuu_utils13.getCellRenderer)(column, "col-content"),
-    clientSideEditValidationCheck: (0, import_vuu_utils13.hasValidationRules)(column.type) ? (0, import_vuu_ui_controls.buildValidationChecker)(column.type.renderer.rules) : void 0,
+    CellRenderer: (0, import_vuu_utils14.getCellRenderer)(column),
+    HeaderCellContentRenderer: (0, import_vuu_utils14.getColumnHeaderContentRenderer)(column),
+    HeaderCellLabelRenderer: (0, import_vuu_utils14.getColumnHeaderLabelRenderer)(column),
+    clientSideEditValidationCheck: (0, import_vuu_utils14.hasValidationRules)(column.type) ? (0, import_vuu_ui_controls.buildValidationChecker)(column.type.renderer.rules) : void 0,
     label: getLabel(label, columnFormatHeader),
     key: key != null ? key : index + KEY_OFFSET,
     name,
     originalIdx: index,
     serverDataType,
-    valueFormatter: (0, import_vuu_utils13.getValueFormatter)(column, serverDataType),
+    valueFormatter: (0, import_vuu_utils14.getValueFormatter)(column, serverDataType),
     width
   };
-  if ((0, import_vuu_utils13.isGroupColumn)(runtimeColumnWithDefaults)) {
+  if ((0, import_vuu_utils14.isGroupColumn)(runtimeColumnWithDefaults)) {
     runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(
       (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(
         col,
@@ -1890,8 +1889,8 @@ function pinColumn2(state, action) {
   const { column, pin } = action;
   const targetColumn = columns.find((col) => col.name === column.name);
   if (targetColumn) {
-    columns = (0, import_vuu_utils13.replaceColumn)(columns, { ...targetColumn, pin });
-    columns = (0, import_vuu_utils13.sortPinnedColumns)(columns);
+    columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, pin });
+    columns = (0, import_vuu_utils14.sortPinnedColumns)(columns);
     return {
       ...state,
       columns
@@ -1906,26 +1905,26 @@ function updateColumnProp(state, action) {
   const targetColumn = columns.find((col) => col.name === column.name);
   if (targetColumn) {
     if (align === "left" || align === "right") {
-      columns = (0, import_vuu_utils13.replaceColumn)(columns, { ...targetColumn, align });
+      columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, align });
     }
     if (typeof label === "string") {
-      columns = (0, import_vuu_utils13.replaceColumn)(columns, { ...targetColumn, label });
+      columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, label });
     }
     if (typeof resizing === "boolean") {
-      columns = (0, import_vuu_utils13.replaceColumn)(columns, { ...targetColumn, resizing });
+      columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, resizing });
     }
     if (typeof hidden === "boolean") {
-      columns = (0, import_vuu_utils13.replaceColumn)(columns, { ...targetColumn, hidden });
+      columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, hidden });
     }
     if (typeof width === "number") {
-      columns = (0, import_vuu_utils13.replaceColumn)(columns, { ...targetColumn, width });
+      columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, width });
       const targetConfigColumn = tableConfig.columns.find(
         (col) => col.name === column.name
       );
       if (targetConfigColumn) {
         tableConfig = {
           ...tableConfig,
-          columns: (0, import_vuu_utils13.replaceColumn)(tableConfig.columns, {
+          columns: (0, import_vuu_utils14.replaceColumn)(tableConfig.columns, {
             ...targetConfigColumn,
             width
           })
@@ -1947,24 +1946,24 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
   if (hasGroupBy) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils13.applyGroupByToColumns)(result.columns, groupBy, confirmed)
+      columns: (0, import_vuu_utils14.applyGroupByToColumns)(result.columns, groupBy, confirmed)
     };
   }
   if (hasSort) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils13.applySortToColumns)(result.columns, sort)
+      columns: (0, import_vuu_utils14.applySortToColumns)(result.columns, sort)
     };
   }
   if (hasFilter) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils13.applyFilterToColumns)(result.columns, filter)
+      columns: (0, import_vuu_utils14.applyFilterToColumns)(result.columns, filter)
     };
-  } else if (result.columns.some(import_vuu_utils13.isFilteredColumn)) {
+  } else if (result.columns.some(import_vuu_utils14.isFilteredColumn)) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils13.stripFilterFromColumns)(result.columns)
+      columns: (0, import_vuu_utils14.stripFilterFromColumns)(result.columns)
     };
   }
   return result;
@@ -2150,7 +2149,7 @@ var useTableScroll = ({
 
 // src/useTableViewport.ts
 var import_react21 = require("react");
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
 var MAX_RAW_ROWS = 15e5;
 var UNMEASURED_VIEWPORT = {
   contentHeight: 0,
@@ -2207,12 +2206,12 @@ var useTableViewport = ({
     [columns]
   );
   const [actualRowOffset, actualRowAtPosition] = (0, import_react21.useMemo)(
-    () => (0, import_vuu_utils14.actualRowPositioning)(rowHeight),
+    () => (0, import_vuu_utils15.actualRowPositioning)(rowHeight),
     [rowHeight]
   );
   const [getRowOffset, getRowAtPosition] = (0, import_react21.useMemo)(() => {
     if (virtualisedExtent) {
-      return (0, import_vuu_utils14.virtualRowPositioning)(
+      return (0, import_vuu_utils15.virtualRowPositioning)(
         rowHeight,
         virtualisedExtent,
         pctScrollTopRef
@@ -2275,13 +2274,12 @@ var useTableViewport = ({
 // src/useVirtualViewport.ts
 var import_react22 = require("react");
 var useVirtualViewport = ({
-  columns,
   getRowAtPosition,
   setRange,
   viewportMeasurements
 }) => {
   const firstRowRef = (0, import_react22.useRef)(0);
-  const { contentWidth, rowCount: viewportRowCount } = viewportMeasurements;
+  const { rowCount: viewportRowCount } = viewportMeasurements;
   const handleVerticalScroll = (0, import_react22.useCallback)(
     (scrollTop) => {
       const firstRow = getRowAtPosition(scrollTop);
@@ -2302,11 +2300,137 @@ var useVirtualViewport = ({
   };
 };
 
+// src/useTableAndColumnSettings.ts
+var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var import_react23 = require("react");
+var useTableAndColumnSettings = ({
+  availableColumns: availableColumnsProps,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  onDataSourceConfigChange,
+  tableConfig
+}) => {
+  const dispatchLayoutAction = (0, import_vuu_layout2.useLayoutProviderDispatch)();
+  const showTableSettingsRef = (0, import_react23.useRef)();
+  const [availableColumns, setAvailableColumns] = (0, import_react23.useState)(
+    availableColumnsProps
+  );
+  const showContextPanel = (0, import_react23.useCallback)(
+    (componentType, title, props) => {
+      dispatchLayoutAction({
+        type: "set-props",
+        path: "#context-panel",
+        props: {
+          expanded: true,
+          content: {
+            type: componentType,
+            props
+          },
+          title
+        }
+      });
+    },
+    [dispatchLayoutAction]
+  );
+  const handleCancelCreateColumn = (0, import_react23.useCallback)(() => {
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
+    });
+  }, []);
+  const handleCreateCalculatedColumn = (0, import_react23.useCallback)(
+    (column) => {
+      const newAvailableColumns = availableColumns.concat({
+        name: column.name,
+        serverDataType: (0, import_vuu_utils16.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 = (0, import_react23.useCallback)(
+    (action) => {
+      showContextPanel("ColumnSettings", "Column Settings", {
+        column: action.column,
+        onCancelCreateColumn: handleCancelCreateColumn,
+        onConfigChange,
+        onCreateCalculatedColumn: handleCreateCalculatedColumn,
+        tableConfig,
+        vuuTable: action.vuuTable
+      });
+    },
+    [
+      handleCancelCreateColumn,
+      handleCreateCalculatedColumn,
+      onConfigChange,
+      showContextPanel,
+      tableConfig
+    ]
+  );
+  const handleAddCalculatedColumn = (0, import_react23.useCallback)(() => {
+    showColumnSettingsPanel({
+      column: {
+        name: "::",
+        serverDataType: "string"
+      },
+      type: "columnSettings",
+      vuuTable: { module: "SIMUL", table: "instruments" }
+    });
+  }, [showColumnSettingsPanel]);
+  const handleNavigateToColumn = (0, import_react23.useCallback)(
+    (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 = (0, import_react23.useCallback)(() => {
+    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;
 };
-var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils15.metadataKeys;
+var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils17.metadataKeys;
 var NULL_DRAG_DROP = {
   draggable: void 0,
   onMouseDown: void 0
@@ -2341,16 +2465,16 @@ var useTable = ({
   selectionModel,
   size
 }) => {
-  const [rowCount, setRowCount] = (0, import_react23.useState)(dataSource.size);
+  const [rowCount, setRowCount] = (0, import_react24.useState)(dataSource.size);
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
   const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls2.useDragDropNext : useNullDragDrop;
-  const menuBuilder = (0, import_react23.useMemo)(
+  const menuBuilder = (0, import_react24.useMemo)(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = (0, import_react23.useCallback)((size2) => {
+  const onDataRowcountChange = (0, import_react24.useCallback)((size2) => {
     setRowCount(size2);
   }, []);
   const {
@@ -2360,14 +2484,14 @@ var useTable = ({
     tableAttributes,
     tableConfig
   } = useTableModel(config, dataSource);
-  (0, import_vuu_layout2.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils17.useLayoutEffectSkipFirst)(() => {
     dispatchColumnAction({
       type: "init",
       dataSource,
       tableConfig
     });
   }, [tableConfig, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = (0, import_react23.useCallback)(
+  const applyTableConfigChange = (0, import_react24.useCallback)(
     (config2) => {
       dispatchColumnAction({
         type: "init",
@@ -2378,16 +2502,16 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const [stateColumns, setStateColumns] = (0, import_react23.useState)();
-  const [columns, setColumnSize] = (0, import_react23.useMemo)(() => {
+  const [stateColumns, setStateColumns] = (0, import_react24.useState)();
+  const [columns, setColumnSize] = (0, import_react24.useMemo)(() => {
     const setSize = (columnName, width) => {
-      const cols = (0, import_vuu_utils15.updateColumn)(runtimeColumns, columnName, { width });
+      const cols = (0, import_vuu_utils17.updateColumn)(runtimeColumns, columnName, { width });
       setStateColumns(cols);
     };
     return [stateColumns != null ? stateColumns : runtimeColumns, setSize];
   }, [runtimeColumns, stateColumns]);
-  const columnMap = (0, import_react23.useMemo)(
-    () => (0, import_vuu_utils15.buildColumnMap)(dataSource.columns),
+  const columnMap = (0, import_react24.useMemo)(
+    () => (0, import_vuu_utils17.buildColumnMap)(dataSource.columns),
     [dataSource.columns]
   );
   const {
@@ -2407,7 +2531,7 @@ var useTable = ({
     from: 0,
     to: viewportMeasurements.rowCount
   });
-  const onSubscribed = (0, import_react23.useCallback)(
+  const onSubscribed = (0, import_react24.useCallback)(
     ({ tableSchema }) => {
       if (tableSchema) {
         dispatchColumnAction({
@@ -2422,13 +2546,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 = (0, import_react23.useCallback)(
+  const handleConfigEditedInSettingsPanel = (0, import_react24.useCallback)(
     (tableConfig2) => {
       console.log(`settings changed`);
       dispatchColumnAction({
@@ -2440,7 +2565,7 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = (0, import_react23.useCallback)(
+  const handleDataSourceConfigChanged = (0, import_react24.useCallback)(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2449,7 +2574,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     dataSource.on("config", (config2, confirmed) => {
       dispatchColumnAction({
         type: "tableConfig",
@@ -2458,14 +2583,14 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchColumnAction]);
-  const handleCreateCalculatedColumn = (0, import_react23.useCallback)(
+  const handleCreateCalculatedColumn = (0, import_react24.useCallback)(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
       applyTableConfigChange(addColumn(tableConfig, column));
     },
     [dataSource, tableConfig, applyTableConfigChange]
   );
-  const hideColumns2 = (0, import_react23.useCallback)(
+  const hideColumns2 = (0, import_react24.useCallback)(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -2479,11 +2604,11 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = (0, import_react23.useCallback)(
+  const pinColumn3 = (0, import_react24.useCallback)(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
-        columns: (0, import_vuu_utils15.updateColumn)(tableConfig.columns, {
+        columns: (0, import_vuu_utils17.updateColumn)(tableConfig.columns, {
           ...action.column,
           pin: action.pin
         })
@@ -2491,7 +2616,7 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const { showColumnSettingsPanel, showTableSettingsPanel } = (0, import_vuu_table_extras.useTableAndColumnSettings)({
+  const { showColumnSettingsPanel, showTableSettingsPanel } = useTableAndColumnSettings({
     availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType = "string" }) => ({
       name,
       serverDataType
@@ -2502,7 +2627,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = (0, import_react23.useCallback)(
+  const onPersistentColumnOperation = (0, import_react24.useCallback)(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -2531,10 +2656,10 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = (0, import_react23.useCallback)(
+  const handleSort = (0, import_react24.useCallback)(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
-        dataSource.sort = (0, import_vuu_utils15.applySort)(
+        dataSource.sort = (0, import_vuu_utils17.applySort)(
           dataSource.sort,
           column,
           extendSort,
@@ -2544,16 +2669,16 @@ var useTable = ({
     },
     [dataSource]
   );
-  const onResizeColumn = (0, import_react23.useCallback)(
+  const onResizeColumn = (0, import_react24.useCallback)(
     (phase, columnName, width) => {
       const column = columns.find((column2) => column2.name === columnName);
       if (column) {
         if (phase === "resize") {
-          if ((0, import_vuu_utils15.isValidNumber)(width)) {
+          if ((0, import_vuu_utils17.isValidNumber)(width)) {
             setColumnSize(columnName, width);
           }
         } else if (phase === "end") {
-          if ((0, import_vuu_utils15.isValidNumber)(width)) {
+          if ((0, import_vuu_utils17.isValidNumber)(width)) {
             dispatchColumnAction({
               type: "resizeColumn",
               phase,
@@ -2588,16 +2713,17 @@ var useTable = ({
     },
     [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
   );
-  const onToggleGroup = (0, import_react23.useCallback)(
+  const onToggleGroup = (0, import_react24.useCallback)(
     (row, column) => {
-      const isJson = (0, import_vuu_utils15.isJsonGroup)(column, row);
+      var _a, _b;
+      const isJson = (0, import_vuu_utils17.isJsonGroup)(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)
@@ -2607,10 +2733,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)) {
@@ -2630,7 +2756,7 @@ var useTable = ({
     setRange,
     viewportMeasurements
   });
-  const handleVerticalScroll = (0, import_react23.useCallback)(
+  const handleVerticalScroll = (0, import_react24.useCallback)(
     (scrollTop) => {
       onVerticalScroll(scrollTop);
     },
@@ -2669,7 +2795,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = (0, import_react23.useCallback)(
+  const handleFocus = (0, import_react24.useCallback)(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -2684,15 +2810,15 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = (0, import_react23.useCallback)(
+  const onMoveGroupColumn = (0, import_react24.useCallback)(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = (0, import_react23.useCallback)(
+  const onRemoveGroupColumn = (0, import_react24.useCallback)(
     (column) => {
-      if ((0, import_vuu_utils15.isGroupColumn)(column)) {
+      if ((0, import_vuu_utils17.isGroupColumn)(column)) {
         dataSource.groupBy = [];
       } else {
         if (dataSource && dataSource.groupBy.includes(column.name)) {
@@ -2704,7 +2830,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = (0, import_react23.useCallback)(
+  const handleSelectionChange = (0, import_react24.useCallback)(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -2720,7 +2846,7 @@ var useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = (0, import_react23.useCallback)(
+  const handleKeyDown = (0, import_react24.useCallback)(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -2732,22 +2858,25 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = (0, import_react23.useCallback)(
+  const handleRowClick = (0, import_react24.useCallback)(
     (row, rangeSelect, keepExistingSelection) => {
       selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
       onRowClickProp == null ? void 0 : onRowClickProp(row);
     },
     [onRowClickProp, selectionHookOnRowClick]
   );
-  (0, import_vuu_layout2.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils17.useLayoutEffectSkipFirst)(() => {
     dispatchColumnAction({
       type: "init",
       tableConfig: config,
       dataSource
     });
   }, [config, dataSource, dispatchColumnAction]);
-  const onMoveColumn = (0, import_react23.useCallback)(
+  const onMoveColumn = (0, import_react24.useCallback)(
     (columns2) => {
+      console.log(`useTable onMoveColumn`, {
+        columns: columns2
+      });
       const newTableConfig = {
         ...tableConfig,
         columns: columns2
@@ -2761,17 +2890,17 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = (0, import_react23.useCallback)(
+  const handleDropRow = (0, import_react24.useCallback)(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = (0, import_react23.useCallback)(
+  const handleDataEdited = (0, import_react24.useCallback)(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = (0, import_react23.useCallback)(
+  const handleDragStartRow = (0, import_react24.useCallback)(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
       const rowIndex = initialDragElement.ariaRowIndex;
@@ -2830,33 +2959,37 @@ var useTable = ({
 };
 
 // src/table-header/TableHeader.tsx
-var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
-var import_classnames8 = __toESM(require("classnames"));
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var import_clsx8 = __toESM(require("clsx"));
 
 // src/table-header/useTableHeader.ts
 var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
-var import_react24 = require("react");
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_react25 = require("react");
 var useTableHeader = ({
   columns,
   onMoveColumn,
   onSortColumn,
   tableConfig
 }) => {
-  const containerRef = (0, import_react24.useRef)(null);
-  const handleDropColumnHeader = (0, import_react24.useCallback)(
+  const containerRef = (0, import_react25.useRef)(null);
+  const handleDropColumnHeader = (0, import_react25.useCallback)(
     (moveFrom, moveTo) => {
       const column = columns[moveFrom];
-      const orderedColumns = (0, import_vuu_utils16.moveColumnTo)(columns, column, moveTo);
+      const orderedColumns = (0, import_vuu_utils18.moveColumnTo)(columns, column, moveTo);
       const ofColumn = ({ name }) => (col) => col.name === name;
       const targetIndex = orderedColumns.findIndex(ofColumn(column));
       const nextColumn = orderedColumns[targetIndex + 1];
       const insertPos = nextColumn ? tableConfig.columns.findIndex(ofColumn(nextColumn)) : -1;
-      onMoveColumn((0, import_vuu_utils16.moveColumnTo)(tableConfig.columns, column, insertPos));
+      if (moveTo > moveFrom && insertPos !== -1) {
+        onMoveColumn((0, import_vuu_utils18.moveColumnTo)(tableConfig.columns, column, insertPos - 1));
+      } else {
+        onMoveColumn((0, import_vuu_utils18.moveColumnTo)(tableConfig.columns, column, insertPos));
+      }
     },
     [columns, onMoveColumn, tableConfig.columns]
   );
-  const handleColumnHeaderClick = (0, import_react24.useCallback)(
+  const handleColumnHeaderClick = (0, import_react25.useCallback)(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -2864,7 +2997,7 @@ var useTableHeader = ({
         ".vuuTableHeaderCell"
       );
       const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
-      const column = (0, import_vuu_utils16.visibleColumnAtIndex)(columns, colIdx);
+      const column = (0, import_vuu_utils18.visibleColumnAtIndex)(columns, colIdx);
       const isAdditive = evt.shiftKey;
       column && onSortColumn(column, isAdditive);
     },
@@ -2894,7 +3027,7 @@ var useTableHeader = ({
 // src/table-header/TableHeader.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var TableHeader = ({
-  classBase: classBase11 = "vuuTable",
+  classBase: classBase10 = "vuuTable",
   columns,
   headings,
   onMoveColumn,
@@ -2917,11 +3050,11 @@ var TableHeader = ({
     onSortColumn,
     tableConfig
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase11}-col-headings`, ref: containerRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase10}-col-headings`, ref: containerRef, children: [
     headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase11}-col-headers`, role: "row", children: [
-      columns.filter(import_vuu_utils17.isNotHidden).map(
-        (col, i) => (0, import_vuu_utils17.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase10}-col-headers`, role: "row", children: [
+      columns.filter(import_vuu_utils19.isNotHidden).map(
+        (col, i) => (0, import_vuu_utils19.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           GroupHeaderCellNext,
           {
             column: col,
@@ -2934,7 +3067,7 @@ var TableHeader = ({
         ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           HeaderCell,
           {
-            className: (0, import_classnames8.default)({
+            className: (0, import_clsx8.default)({
               "vuuDraggable-dragAway": i === draggedColumnIndex
             }),
             column: col,
@@ -2955,7 +3088,7 @@ var TableHeader = ({
 // src/Table.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var classBase7 = "vuuTable";
-var { IDX: IDX3, RENDER_IDX } = import_vuu_utils18.metadataKeys;
+var { IDX: IDX3, RENDER_IDX } = import_vuu_utils20.metadataKeys;
 var TableCore = ({
   Row: Row2 = Row,
   allowDragDrop,
@@ -2983,7 +3116,7 @@ var TableCore = ({
   headerHeight = showColumnHeaders ? 25 : 0,
   size
 }) => {
-  const id = (0, import_vuu_layout3.useId)(idProp);
+  const id = (0, import_vuu_utils20.useId)(idProp);
   const {
     columnMap,
     columns,
@@ -3031,7 +3164,7 @@ var TableCore = ({
     selectionModel,
     size
   });
-  const className = (0, import_classnames9.default)(`${classBase7}-contentContainer`, {
+  const className = (0, import_clsx9.default)(`${classBase7}-contentContainer`, {
     [`${classBase7}-colLines`]: tableAttributes.columnSeparators,
     [`${classBase7}-rowLines`]: tableAttributes.rowSeparators,
     // [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
@@ -3076,6 +3209,7 @@ var TableCore = ({
               {
                 ...tableProps,
                 className: `${classBase7}-table`,
+                role: "table",
                 tabIndex: disableFocus ? void 0 : -1,
                 children: [
                   showColumnHeaders ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -3117,7 +3251,7 @@ var TableCore = ({
     }
   );
 };
-var Table = (0, import_react25.forwardRef)(function TableNext({
+var Table = (0, import_react26.forwardRef)(function TableNext({
   Row: Row2,
   allowDragDrop,
   availableColumns,
@@ -3145,13 +3279,21 @@ var Table = (0, import_react25.forwardRef)(function TableNext({
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = (0, import_react25.useRef)(null);
-  const [size, setSize] = (0, import_react25.useState)();
+  const containerRef = (0, import_react26.useRef)(null);
+  const [size, setSize] = (0, import_react26.useState)();
+  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__ */ (0, import_jsx_runtime12.jsx)(
     import_vuu_layout3.MeasuredContainer,
     {
       ...htmlAttributes,
-      className: (0, import_classnames9.default)(classBase7, classNameProp),
+      className: (0, import_clsx9.default)(classBase7, classNameProp),
       id,
       onResize: setSize,
       ref: (0, import_core2.useForkRef)(containerRef, forwardedRef),
@@ -3190,94 +3332,47 @@ var Table = (0, import_react25.forwardRef)(function TableNext({
 });
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
 var import_core3 = require("@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
-var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var CheckboxCell = (0, import_react26.memo)(
+var CheckboxCell = (0, import_react27.memo)(
   ({ column, columnMap, onCommit = import_vuu_ui_controls4.WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
     const isChecked = row[dataIdx];
-    const handleCommit = (0, import_react26.useCallback)(
+    const handleCommit = (0, import_react27.useCallback)(
       (value) => async (evt) => {
         const res = await onCommit(value);
         if (res === true) {
-          (0, import_vuu_utils19.dispatchCustomEvent)(evt.target, "vuu-commit");
+          (0, import_vuu_utils21.dispatchCustomEvent)(evt.target, "vuu-commit");
         }
         return res;
       },
       [onCommit]
     );
-    return !!column.editable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core3.Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_ui_controls4.CheckboxIcon, { checked: isChecked, disabled: true });
+    return column.editable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core3.Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_ui_controls4.CheckboxIcon, { checked: isChecked, disabled: true });
   },
   dataAndColumnUnchanged
 );
 CheckboxCell.displayName = "CheckboxCell";
-(0, import_vuu_utils19.registerComponent)("checkbox-cell", CheckboxCell, "cell-renderer", {
+(0, import_vuu_utils21.registerComponent)("checkbox-cell", CheckboxCell, "cell-renderer", {
   serverDataType: "boolean"
 });
 
-// src/cell-renderers/dropdown-cell/DropdownCell.tsx
-var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
-var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
-var import_react27 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var classBase8 = "vuuTableDropdownCell";
-var openKeys = ["Enter", " "];
-var DropdownCell = (0, import_react27.memo)(
-  function DropdownCell2({
-    column,
-    columnMap,
-    onCommit = import_vuu_ui_controls5.WarnCommit,
-    row
-  }) {
-    const dataIdx = columnMap[column.name];
-    const { initialValue, values } = (0, import_vuu_data_react.useLookupValues)(column, row[dataIdx]);
-    const [value, setValue] = (0, import_react27.useState)(null);
-    const handleSelectionChange = (0, import_react27.useCallback)(
-      (evt, selectedOption) => {
-        if (selectedOption) {
-          setValue(selectedOption);
-          onCommit(selectedOption.value).then((response) => {
-            if (response === true && evt) {
-              (0, import_vuu_utils20.dispatchCustomEvent)(evt.target, "vuu-commit");
-            }
-          });
-        }
-      },
-      [onCommit]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_vuu_ui_controls5.Dropdown,
-      {
-        className: classBase8,
-        onSelectionChange: handleSelectionChange,
-        openKeys,
-        selected: value != null ? value : initialValue,
-        source: values,
-        width: column.width - 17
-      }
-    );
-  },
-  dataAndColumnUnchanged
-);
-(0, import_vuu_utils20.registerComponent)("dropdown-cell", DropdownCell, "cell-renderer", {});
-
 // src/cell-renderers/input-cell/InputCell.tsx
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
 var import_core4 = require("@salt-ds/core");
-var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
-var import_classnames10 = __toESM(require("classnames"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var classBase9 = "vuuTableInputCell";
-var WarnCommit3 = () => {
+var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
+var import_clsx10 = __toESM(require("clsx"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var classBase8 = "vuuTableInputCell";
+var WarnCommit2 = () => {
   console.warn(
     "onCommit handler has not been provided to InputCell cell renderer"
   );
@@ -3286,63 +3381,40 @@ var WarnCommit3 = () => {
 var InputCell = ({
   column,
   columnMap,
-  onCommit = WarnCommit3,
+  onCommit = WarnCommit2,
   row
 }) => {
   const dataIdx = columnMap[column.name];
-  const {
-    align = "left",
-    clientSideEditValidationCheck,
-    valueFormatter
-  } = column;
-  const { warningMessage, ...editProps } = (0, import_vuu_ui_controls6.useEditableText)({
-    initialValue: valueFormatter(row[dataIdx]),
+  const { align = "left", clientSideEditValidationCheck } = column;
+  const { warningMessage, ...editProps } = (0, import_vuu_ui_controls5.useEditableText)({
+    initialValue: row[dataIdx],
     onCommit,
     clientSideEditValidationCheck
   });
-  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
-  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_core4.Input,
     {
       ...editProps,
-      className: (0, import_classnames10.default)(classBase9, {
-        [`${classBase9}-error`]: warningMessage !== void 0
+      className: (0, import_clsx10.default)(classBase8, {
+        [`${classBase8}-error`]: warningMessage !== void 0
       }),
       endAdornment,
       startAdornment
     }
   );
 };
-(0, import_vuu_utils21.registerComponent)("input-cell", InputCell, "cell-renderer", {});
-
-// src/cell-renderers/lookup-cell/LookupCell.tsx
-var import_vuu_data_react2 = require("@vuu-ui/vuu-data-react");
-var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
-var import_react28 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var LookupCell = (0, import_react28.memo)(
-  function LookupCell2({
-    column,
-    columnMap,
-    row
-  }) {
-    const dataIdx = columnMap[column.name];
-    const { initialValue: value } = (0, import_vuu_data_react2.useLookupValues)(column, row[dataIdx]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: value == null ? void 0 : value.label });
-  },
-  dataAndColumnUnchanged
-);
-(0, import_vuu_utils22.registerComponent)("lookup-cell", LookupCell, "cell-renderer", {});
+(0, import_vuu_utils22.registerComponent)("input-cell", InputCell, "cell-renderer", {});
 
 // src/cell-renderers/toggle-cell/ToggleCell.tsx
-var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
-var import_classnames11 = __toESM(require("classnames"));
-var import_react29 = require("react");
-var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var classBase10 = "vuuTableToggleCell";
+var import_clsx11 = __toESM(require("clsx"));
+var import_react28 = require("react");
+var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var classBase9 = "vuuTableToggleCell";
 var getValueList = ({ name, type }) => {
   if ((0, import_vuu_utils23.isTypeDescriptor)(type) && (0, import_vuu_utils23.isValueListRenderer)(type.renderer)) {
     return type.renderer.values;
@@ -3352,17 +3424,17 @@ var getValueList = ({ name, type }) => {
     );
   }
 };
-var ToggleCell = (0, import_react29.memo)(
+var ToggleCell = (0, import_react28.memo)(
   function ToggleCell2({
     column,
     columnMap,
-    onCommit = import_vuu_ui_controls7.WarnCommit,
+    onCommit = import_vuu_ui_controls6.WarnCommit,
     row
   }) {
     const values = getValueList(column);
     const dataIdx = columnMap[column.name];
     const value = row[dataIdx];
-    const handleCommit = (0, import_react29.useCallback)(
+    const handleCommit = (0, import_react28.useCallback)(
       (evt, value2) => {
         return onCommit(value2).then((response) => {
           if (response === true) {
@@ -3373,10 +3445,10 @@ var ToggleCell = (0, import_react29.memo)(
       },
       [onCommit]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_vuu_ui_controls8.CycleStateButton,
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_vuu_ui_controls7.CycleStateButton,
       {
-        className: (0, import_classnames11.default)(classBase10, `${classBase10}-${column.name}`),
+        className: (0, import_clsx11.default)(classBase9, `${classBase9}-${column.name}`),
         onCommit: handleCommit,
         value,
         values,
@@ -3390,13 +3462,13 @@ var ToggleCell = (0, import_react29.memo)(
 (0, import_vuu_utils23.registerComponent)("toggle-cell", ToggleCell, "cell-renderer", {});
 
 // src/useControlledTableNavigation.ts
-var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
-var import_react30 = require("react");
+var import_react29 = require("react");
 var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = (0, import_react30.useRef)(null);
-  const [highlightedIndexRef, setHighlightedIndex] = (0, import_vuu_ui_controls9.useStateRef)(initialValue);
-  const handleKeyDown = (0, import_react30.useCallback)(
+  const tableRef = (0, import_react29.useRef)(null);
+  const [highlightedIndexRef, setHighlightedIndex] = (0, import_vuu_ui_controls8.useStateRef)(initialValue);
+  const handleKeyDown = (0, import_react29.useCallback)(
     (e) => {
       var _a;
       if (e.key === "ArrowDown") {
@@ -3415,7 +3487,7 @@ var useControlledTableNavigation = (initialValue, rowCount) => {
     },
     [highlightedIndexRef, rowCount, setHighlightedIndex]
   );
-  const handleHighlight = (0, import_react30.useCallback)(
+  const handleHighlight = (0, import_react29.useCallback)(
     (idx) => {
       setHighlightedIndex(idx);
     },