@vuu-ui/vuu-table-extras 0.8.10-debug → 0.8.11-debug

package/cjs/index.js

@@ -2740,7 +2740,7 @@ var DataSourceStats = ({
 };
 
 // src/table-settings/TableSettingsPanel.tsx
-var import_core8 = require("@salt-ds/core");
+var import_core9 = require("@salt-ds/core");
 
 // src/table-settings/useTableSettings.ts
 var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
@@ -2751,11 +2751,312 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 
 // ../vuu-table/src/table/context-menu/buildContextMenuDescriptors.ts
 var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var buildContextMenuDescriptors = (dataSource) => (location, options) => {
+  const descriptors = [];
+  if (dataSource === void 0) {
+    return descriptors;
+  }
+  if (location === "header" || location === "column-menu") {
+    descriptors.push(
+      ...buildSortMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildGroupMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildAggregationMenuItems(options, dataSource)
+    );
+    descriptors.push(...buildColumnDisplayMenuItems(options));
+    descriptors.push({
+      action: "column-settings",
+      icon: "cog",
+      label: `Column Settings`,
+      options
+    });
+    descriptors.push({
+      action: "table-settings",
+      icon: "cog",
+      label: `DataGrid Settings`,
+      options
+    });
+  } else if (location === "filter") {
+    const { column, filter } = options;
+    const colIsOnlyFilter = (filter == null ? void 0 : filter.column) === (column == null ? void 0 : column.name);
+    descriptors.push({
+      label: "Edit filter",
+      action: "filter-edit",
+      options
+    });
+    descriptors.push({
+      label: "Remove filter",
+      action: "filter-remove-column",
+      options
+    });
+    if (column && !colIsOnlyFilter) {
+      descriptors.push({
+        label: `Remove all filters`,
+        action: "remove-filters",
+        options
+      });
+    }
+  }
+  return descriptors;
+};
+function buildSortMenuItems(options, { sort: { sortDefs } }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const hasSort = sortDefs.length > 0;
+  if (column.sorted === "A") {
+    menuItems.push({
+      label: "Reverse Sort (DSC)",
+      action: "sort-dsc",
+      options
+    });
+  } else if (column.sorted === "D") {
+    menuItems.push({
+      label: "Reverse Sort (ASC)",
+      action: "sort-asc",
+      options
+    });
+  } else if (typeof column.sorted === "number") {
+    if (column.sorted > 0) {
+      menuItems.push({
+        label: "Reverse Sort (DSC)",
+        action: "sort-add-dsc",
+        options
+      });
+    } else {
+      menuItems.push({
+        label: "Reverse Sort (ASC)",
+        action: "sort-add-asc",
+        options
+      });
+    }
+    if (hasSort && Math.abs(column.sorted) < sortDefs.length) {
+      menuItems.push({
+        label: "Remove from sort",
+        action: "sort-remove",
+        options
+      });
+    }
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else if (hasSort) {
+    menuItems.push({
+      label: "Add to sort",
+      children: [
+        { label: "Ascending", action: "sort-add-asc", options },
+        { label: "Descending", action: "sort-add-dsc", options }
+      ]
+    });
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else {
+    menuItems.push({
+      label: "Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  }
+  return menuItems;
+}
+function buildAggregationMenuItems(options, dataSource) {
+  const { column } = options;
+  if (column === void 0 || dataSource.groupBy.length === 0) {
+    return [];
+  }
+  const { name: name2, label = name2 } = column;
+  return [
+    {
+      label: `Aggregate ${label}`,
+      children: [
+        { label: "Count", action: "agg-count", options },
+        { label: "Distinct", action: "agg-distinct", options }
+      ].concat(
+        (0, import_vuu_utils16.isNumericColumn)(column) ? [
+          { label: "Sum", action: "agg-sum", options },
+          { label: "Avg", action: "agg-avg", options },
+          { label: "High", action: "agg-high", options },
+          { label: "Low", action: "agg-low", options }
+        ] : []
+      )
+    }
+  ];
+}
+var pinColumn = (options, pinLocation) => ({
+  label: `Pin ${pinLocation}`,
+  action: `column-pin-${pinLocation}`,
+  options
+});
+var pinLeft = (options) => pinColumn(options, "left");
+var pinFloating = (options) => pinColumn(options, "floating");
+var pinRight = (options) => pinColumn(options, "right");
+function buildColumnDisplayMenuItems(options) {
+  const { column } = options;
+  if (column === void 0) {
+    return [];
+  }
+  const { pin } = column;
+  const menuItems = [
+    {
+      label: `Hide column`,
+      action: "column-hide",
+      options
+    },
+    {
+      label: `Remove column`,
+      action: "column-remove",
+      options
+    }
+  ];
+  if (pin === void 0) {
+    menuItems.push({
+      label: `Pin column`,
+      children: [pinLeft(options), pinFloating(options), pinRight(options)]
+    });
+  } else if (pin === "left") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinFloating(options), pinRight(options)]
+      }
+    );
+  } else if (pin === "right") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinFloating(options)]
+      }
+    );
+  } else if (pin === "floating") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinRight(options)]
+      }
+    );
+  }
+  return menuItems;
+}
+function buildGroupMenuItems(options, { groupBy }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const { name: name2, label = name2 } = column;
+  if (groupBy.length === 0) {
+    menuItems.push({
+      label: `Group by ${label}`,
+      action: "group",
+      options
+    });
+  } else {
+    menuItems.push({
+      label: `Add ${label} to group by`,
+      action: "group-add",
+      options
+    });
+  }
+  return menuItems;
+}
 
 // ../vuu-table/src/table/context-menu/useTableContextMenu.ts
 var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
 var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var removeFilterColumn = (dataSourceFilter, column) => {
+  if (dataSourceFilter.filterStruct && column) {
+    const [filterStruct, filter] = (0, import_vuu_utils17.removeColumnFromFilter)(
+      column,
+      dataSourceFilter.filterStruct
+    );
+    return {
+      filter,
+      filterStruct
+    };
+  } else {
+    return dataSourceFilter;
+  }
+};
 var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils18.AggregationType;
+var useTableContextMenu = ({
+  dataSource,
+  onPersistentColumnOperation
+}) => {
+  const handleContextMenuAction = (action) => {
+    const gridOptions = action.options;
+    if (gridOptions.column && dataSource) {
+      const { column } = gridOptions;
+      switch (action.menuId) {
+        case "sort-asc":
+          return dataSource.sort = (0, import_vuu_utils18.setSortColumn)(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = (0, import_vuu_utils18.setSortColumn)(dataSource.sort, column, "D"), true;
+        case "sort-add-asc":
+          return dataSource.sort = (0, import_vuu_utils18.addSortColumn)(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = (0, import_vuu_utils18.addSortColumn)(dataSource.sort, column, "D"), true;
+        case "group":
+          return dataSource.groupBy = (0, import_vuu_utils18.addGroupColumn)(dataSource.groupBy, column), true;
+        case "group-add":
+          return dataSource.groupBy = (0, import_vuu_utils18.addGroupColumn)(dataSource.groupBy, column), true;
+        case "column-hide":
+          return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
+        case "column-remove":
+          return dataSource.columns = dataSource.columns.filter((name2) => name2 !== column.name), true;
+        case "filter-remove-column":
+          return dataSource.filter = removeFilterColumn(dataSource.filter, column), true;
+        case "remove-filters":
+          return dataSource.filter = { filter: "" }, true;
+        case "agg-avg":
+          return dataSource.aggregations = (0, import_vuu_utils18.setAggregations)(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = (0, import_vuu_utils18.setAggregations)(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = (0, import_vuu_utils18.setAggregations)(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = (0, import_vuu_utils18.setAggregations)(dataSource.aggregations, column, Count), true;
+        case "agg-distinct":
+          return dataSource.aggregations = (0, import_vuu_utils18.setAggregations)(dataSource.aggregations, column, Distinct), true;
+        case "agg-sum":
+          return dataSource.aggregations = (0, import_vuu_utils18.setAggregations)(dataSource.aggregations, column, Sum), true;
+        case "column-pin-floating":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "floating" }), true;
+        case "column-pin-left":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "left" }), true;
+        case "column-pin-right":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "right" }), true;
+        case "column-unpin":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: void 0 }), true;
+        case "column-settings":
+          return onPersistentColumnOperation({ type: "columnSettings", column }), true;
+        case "table-settings":
+          return onPersistentColumnOperation({ type: "tableSettings" }), true;
+        default:
+      }
+    }
+    return false;
+  };
+  return handleContextMenuAction;
+};
 
 // ../vuu-table/src/table/Table.tsx
 var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
@@ -3153,6 +3454,38 @@ var resizeObserver = new ResizeObserver((entries) => {
 var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
 var import_react27 = require("react");
 var { IDX: IDX2 } = import_vuu_utils26.metadataKeys;
+var NO_SELECTION = [];
+var useSelection = ({
+  selectionModel,
+  onSelect,
+  onSelectionChange
+}) => {
+  selectionModel === "extended" || selectionModel === "checkbox";
+  const lastActiveRef = (0, import_react27.useRef)(-1);
+  const selectedRef = (0, import_react27.useRef)(NO_SELECTION);
+  const handleSelectionChange = (0, import_react27.useCallback)(
+    (row, rangeSelect, keepExistingSelection) => {
+      const { [IDX2]: idx } = row;
+      const { current: active } = lastActiveRef;
+      const { current: selected } = selectedRef;
+      const selectOperation = (0, import_vuu_utils26.isRowSelected)(row) ? import_vuu_utils26.deselectItem : import_vuu_utils26.selectItem;
+      const newSelected = selectOperation(
+        selectionModel,
+        selected,
+        idx,
+        rangeSelect,
+        keepExistingSelection,
+        active
+      );
+      selectedRef.current = newSelected;
+      lastActiveRef.current = idx;
+      onSelect == null ? void 0 : onSelect(row);
+      onSelectionChange == null ? void 0 : onSelectionChange(newSelected);
+    },
+    [onSelect, onSelectionChange, selectionModel]
+  );
+  return handleSelectionChange;
+};
 
 // ../vuu-table/src/table/useTableModel.ts
 var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
@@ -3165,6 +3498,126 @@ var import_react29 = require("react");
 // ../vuu-table/src/table-next/useTableViewport.ts
 var import_react30 = require("react");
 var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+var MAX_RAW_ROWS = 15e5;
+var UNMEASURED_VIEWPORT = {
+  contentHeight: 0,
+  contentWidth: 0,
+  getRowAtPosition: () => -1,
+  getRowOffset: () => -1,
+  horizontalScrollbarHeight: 0,
+  maxScrollContainerScrollHorizontal: 0,
+  maxScrollContainerScrollVertical: 0,
+  pinnedWidthLeft: 0,
+  pinnedWidthRight: 0,
+  rowCount: 0,
+  setPctScrollTop: () => void 0,
+  totalHeaderHeight: 0,
+  verticalScrollbarWidth: 0,
+  viewportBodyHeight: 0
+};
+var measurePinnedColumns = (columns) => {
+  let pinnedWidthLeft = 0;
+  let pinnedWidthRight = 0;
+  let unpinnedWidth = 0;
+  for (const column of columns) {
+    const { hidden, pin, width } = column;
+    const visibleWidth = hidden ? 0 : width;
+    if (pin === "left") {
+      pinnedWidthLeft += visibleWidth;
+    } else if (pin === "right") {
+      pinnedWidthRight += visibleWidth;
+    } else {
+      unpinnedWidth += visibleWidth;
+    }
+  }
+  return {
+    pinnedWidthLeft: pinnedWidthLeft + 4,
+    pinnedWidthRight: pinnedWidthRight + 4,
+    unpinnedWidth
+  };
+};
+var useTableViewport = ({
+  columns,
+  headerHeight,
+  headings,
+  rowCount,
+  rowHeight,
+  size
+}) => {
+  const pctScrollTopRef = (0, import_react30.useRef)(0);
+  const appliedRowCount = Math.min(rowCount, MAX_RAW_ROWS);
+  const appliedContentHeight = appliedRowCount * rowHeight;
+  const virtualContentHeight = rowCount * rowHeight;
+  const virtualisedExtent = virtualContentHeight - appliedContentHeight;
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react30.useMemo)(
+    () => measurePinnedColumns(columns),
+    [columns]
+  );
+  const [actualRowOffset, actualRowAtPosition] = (0, import_react30.useMemo)(
+    () => (0, import_vuu_utils28.actualRowPositioning)(rowHeight),
+    [rowHeight]
+  );
+  const [getRowOffset, getRowAtPosition] = (0, import_react30.useMemo)(() => {
+    if (virtualisedExtent) {
+      return (0, import_vuu_utils28.virtualRowPositioning)(
+        rowHeight,
+        virtualisedExtent,
+        pctScrollTopRef
+      );
+    } else {
+      return [actualRowOffset, actualRowAtPosition];
+    }
+  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
+  const setPctScrollTop = (0, import_react30.useCallback)((scrollPct) => {
+    pctScrollTopRef.current = scrollPct;
+  }, []);
+  return (0, import_react30.useMemo)(() => {
+    var _a;
+    if (size) {
+      const headingsDepth = headings.length;
+      const scrollbarSize = 15;
+      const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
+      const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
+      const totalHeaderHeight = headerHeight * (1 + headingsDepth);
+      const maxScrollContainerScrollVertical = appliedContentHeight - (((_a = size == null ? void 0 : size.height) != null ? _a : 0) - horizontalScrollbarHeight) + totalHeaderHeight;
+      const maxScrollContainerScrollHorizontal = contentWidth - size.width + pinnedWidthLeft;
+      const visibleRows = (size.height - headerHeight) / rowHeight;
+      const count = Number.isInteger(visibleRows) ? visibleRows + 1 : Math.ceil(visibleRows);
+      const viewportBodyHeight = size.height - totalHeaderHeight;
+      const verticalScrollbarWidth = appliedContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+      return {
+        contentHeight: appliedContentHeight,
+        getRowAtPosition,
+        getRowOffset,
+        horizontalScrollbarHeight,
+        maxScrollContainerScrollHorizontal,
+        maxScrollContainerScrollVertical,
+        pinnedWidthLeft,
+        pinnedWidthRight,
+        rowCount: count,
+        contentWidth,
+        setPctScrollTop,
+        totalHeaderHeight,
+        verticalScrollbarWidth,
+        viewportBodyHeight
+      };
+    } else {
+      return UNMEASURED_VIEWPORT;
+    }
+  }, [
+    size,
+    headings.length,
+    pinnedWidthLeft,
+    unpinnedWidth,
+    pinnedWidthRight,
+    appliedContentHeight,
+    headerHeight,
+    rowHeight,
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop
+  ]);
+};
 
 // ../vuu-table/src/table/useVirtualViewport.ts
 var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
@@ -3221,6 +3674,7 @@ var JsonCell = ({ column, row }) => {
     return null;
   }
 };
+console.log("register JsonCell");
 (0, import_vuu_utils32.registerComponent)("json", JsonCell, "cell-renderer", {
   description: "JSON formatter",
   label: "JSON formatter",
@@ -3234,44 +3688,199 @@ var import_react37 = require("react");
 // ../vuu-table/src/table-next/column-resizing/ColumnResizer.tsx
 var import_react33 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var NOOP = () => void 0;
+var baseClass = "vuuColumnResizerNext";
+var ColumnResizer2 = ({
+  onDrag,
+  onDragEnd = NOOP,
+  onDragStart = NOOP
+}) => {
+  const position = (0, import_react33.useRef)(0);
+  const onMouseMove = (0, import_react33.useCallback)(
+    (e) => {
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      const x = Math.round(e.clientX);
+      const moveBy = x - position.current;
+      position.current = x;
+      if (moveBy !== 0) {
+        onDrag(e, moveBy);
+      }
+    },
+    [onDrag]
+  );
+  const onMouseUp = (0, import_react33.useCallback)(
+    (e) => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      onDragEnd(e);
+    },
+    [onDragEnd, onMouseMove]
+  );
+  const handleMouseDown = (0, import_react33.useCallback)(
+    (e) => {
+      onDragStart(e);
+      position.current = Math.round(e.clientX);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("mousemove", onMouseMove);
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+    },
+    [onDragStart, onMouseMove, onMouseUp]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: baseClass, onMouseDown: handleMouseDown });
+};
 
 // ../vuu-table/src/table-next/column-resizing/useTableColumnResize.tsx
 var import_react34 = require("react");
+var useTableColumnResize2 = ({
+  column,
+  onResize,
+  rootRef
+}) => {
+  const widthRef = (0, import_react34.useRef)(0);
+  const [isResizing, setResizing] = (0, import_react34.useState)(false);
+  const { name: name2 } = column;
+  const handleResizeStart = (0, import_react34.useCallback)(() => {
+    console.log("onResizeStart");
+    if (onResize && rootRef.current) {
+      console.log("handleResizeStart");
+      const { width } = rootRef.current.getBoundingClientRect();
+      widthRef.current = Math.round(width);
+      setResizing(true);
+      onResize == null ? void 0 : onResize("begin", name2);
+    }
+  }, [name2, onResize, rootRef]);
+  const handleResize = (0, import_react34.useCallback)(
+    (_evt, moveBy) => {
+      if (rootRef.current) {
+        if (onResize) {
+          const { width } = rootRef.current.getBoundingClientRect();
+          const newWidth = Math.round(width) + moveBy;
+          if (newWidth !== widthRef.current && newWidth > 0) {
+            onResize("resize", name2, newWidth);
+            widthRef.current = newWidth;
+          }
+        }
+      }
+    },
+    [name2, onResize, rootRef]
+  );
+  const handleResizeEnd = (0, import_react34.useCallback)(() => {
+    if (onResize) {
+      onResize("end", name2, widthRef.current);
+      setTimeout(() => {
+        setResizing(false);
+      }, 80);
+    }
+  }, [name2, onResize]);
+  return {
+    isResizing,
+    onDrag: handleResize,
+    onDragStart: handleResizeStart,
+    onDragEnd: handleResizeEnd
+  };
+};
 
 // ../vuu-table/src/table-next/useCell.ts
 var import_vuu_utils33 = require("@vuu-ui/vuu-utils");
 var import_classnames15 = __toESM(require("classnames"));
 var import_react35 = require("react");
-var useCell = (column, classBase19, isHeader) => (
+var useCell = (column, classBase23, isHeader) => (
   // TODO measure perf without the memo, might not be worth the cost
   (0, import_react35.useMemo)(() => {
-    const className = (0, import_classnames15.default)(classBase19, {
+    const className = (0, import_classnames15.default)(classBase23, {
       vuuPinFloating: column.pin === "floating",
       vuuPinLeft: column.pin === "left",
       vuuPinRight: column.pin === "right",
       vuuEndPin: isHeader && column.endPin,
       // [`${classBase}-resizing`]: column.resizing,
-      [`${classBase19}-editable`]: column.editable,
-      [`${classBase19}-right`]: column.align === "right"
+      [`${classBase23}-editable`]: column.editable,
+      [`${classBase23}-right`]: column.align === "right"
     });
     const style = (0, import_vuu_utils33.getColumnStyle)(column);
     return {
       className,
       style
     };
-  }, [column, classBase19, isHeader])
+  }, [column, classBase23, isHeader])
 );
 
 // ../vuu-table/src/table-next/column-header-pill/ColumnHeaderPill.tsx
 var import_classnames16 = __toESM(require("classnames"));
 var import_react36 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var classBase13 = "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_react36.useCallback)(
+    (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      onRemove == null ? void 0 : onRemove(column);
+    },
+    [column, onRemove]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames16.default)(classBase13, className), children: [
+    children,
+    removable ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "span",
+      {
+        className: `${classBase13}-removeButton`,
+        role: "button",
+        "data-icon": "cross",
+        onClick: handleClickRemove
+      }
+    ) : null
+  ] });
+};
 
 // ../vuu-table/src/table-next/column-header-pill/GroupColumnPill.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var GroupColumnPill = ({
+  column,
+  ...columnHeaderProps
+}) => {
+  const { name: name2, 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_runtime24.jsxs)(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "vuuGroupColumnPill-label", children: name2 }),
+    icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "data-icon": icon }) : null,
+    typeof sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
+  ] });
+};
 
 // ../vuu-table/src/table-next/column-header-pill/SortIndicator.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
+var SortIndicator2 = ({ 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_runtime25.jsxs)(ColumnHeaderPill, { column, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "data-icon": icon }),
+    typeof column.sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
+  ] });
+};
 
 // ../vuu-table/src/table-next/header-cell/GroupHeaderCell.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -3283,6 +3892,92 @@ var import_react39 = require("react");
 var import_vuu_layout = require("@vuu-ui/vuu-layout");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var import_react40 = require("react");
+var classBase14 = "vuuTableNextGroupHeaderCell";
+var switchIfChanged = (columns, newColumns) => {
+  if (columns === newColumns) {
+    return columns;
+  } else {
+    return newColumns;
+  }
+};
+var GroupHeaderCellNext = ({
+  column: groupColumn,
+  className: classNameProp,
+  onRemoveColumn,
+  onResize,
+  ...htmlAttributes
+}) => {
+  const rootRef = (0, import_react39.useRef)(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize2({
+    column: groupColumn,
+    onResize,
+    rootRef
+  });
+  const [columns, setColumns] = (0, import_react39.useState)(groupColumn.columns);
+  const { className, style } = useCell(groupColumn, classBase14, true);
+  const columnPillProps = columns.length > 1 ? {
+    removable: true,
+    onRemove: onRemoveColumn
+  } : void 0;
+  const handleMoveItem = (0, import_react39.useCallback)((fromIndex, toIndex) => {
+    setColumns((cols) => {
+      const newCols = cols.slice();
+      const [tab] = newCols.splice(fromIndex, 1);
+      if (toIndex === -1) {
+        return newCols.concat(tab);
+      } else {
+        newCols.splice(toIndex, 0, tab);
+        return newCols;
+      }
+    });
+  }, []);
+  (0, import_vuu_layout.useLayoutEffectSkipFirst)(() => {
+    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));
+  }, [groupColumn.columns]);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      ...htmlAttributes,
+      className: (0, import_classnames18.default)(className, "vuuTableNextHeaderCell", classNameProp, {
+        [`${classBase14}-pending`]: groupColumn.groupConfirmed === false
+      }),
+      ref: rootRef,
+      role: "columnheader",
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_vuu_layout.OverflowContainer,
+          {
+            allowDragDrop: true,
+            className: `${classBase14}-inner`,
+            height: 24,
+            onMoveItem: handleMoveItem,
+            overflowPosition: "start",
+            children: columns.map((column) => {
+              return /* @__PURE__ */ (0, import_react40.createElement)(
+                GroupColumnPill,
+                {
+                  ...columnPillProps,
+                  column,
+                  key: column.key
+                }
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          ColumnHeaderPill,
+          {
+            column: groupColumn,
+            removable: true,
+            onRemove: onRemoveColumn
+          }
+        ),
+        groupColumn.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColumnResizer2, { ...resizeProps }) : null
+      ]
+    }
+  );
+};
 
 // ../vuu-table/src/table-next/header-cell/HeaderCell.tsx
 var import_react42 = require("react");
@@ -3292,10 +3987,98 @@ var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
 var import_classnames19 = __toESM(require("classnames"));
 var import_react41 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
+var getPosition = (element) => {
+  if (element) {
+    const { bottom, left } = element.getBoundingClientRect();
+    return { x: left, y: bottom + 6 };
+  }
+};
+var ColumnMenu = ({
+  className,
+  column,
+  ...props
+}) => {
+  const rootRef = (0, import_react41.useRef)(null);
+  const [menuOpen, setMenuOpen] = (0, import_react41.useState)(false);
+  const [showContextMenu] = (0, import_vuu_popups5.useContextMenu)();
+  const handleMenuClose = (0, import_react41.useCallback)(() => {
+    setMenuOpen(false);
+  }, []);
+  const showColumnMenu = (0, import_react41.useCallback)(
+    (e) => {
+      setMenuOpen(true);
+      showContextMenu(e, "column-menu", {
+        column,
+        ContextMenuProps: {
+          onClose: handleMenuClose,
+          position: getPosition(rootRef.current)
+        }
+      });
+    },
+    [column, handleMenuClose, showContextMenu]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "span",
+    {
+      ...props,
+      className: (0, import_classnames19.default)("vuuTable-columnMenu", className, {
+        "vuuTable-columnMenu-open": menuOpen
+      }),
+      "data-icon": "more-vert",
+      onClick: showColumnMenu,
+      ref: rootRef
+    }
+  );
+};
 
 // ../vuu-table/src/table-next/header-cell/HeaderCell.tsx
 var import_classnames20 = __toESM(require("classnames"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
+var classBase15 = "vuuTableNextHeaderCell";
+var HeaderCell = ({
+  className: classNameProp,
+  column,
+  onClick,
+  onResize,
+  ...htmlAttributes
+}) => {
+  var _a;
+  const rootRef = (0, import_react42.useRef)(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize2({
+    column,
+    onResize,
+    rootRef
+  });
+  const handleClick = (0, import_react42.useCallback)(
+    (evt) => {
+      console.log(`click isResizing ${isResizing}`);
+      !isResizing && (onClick == null ? void 0 : onClick(evt));
+    },
+    [isResizing, onClick]
+  );
+  const { className, style } = useCell(column, classBase15, true);
+  const columnMenu = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ColumnMenu, { column });
+  const columnLabel = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `${classBase15}-label`, children: (_a = column.label) != null ? _a : column.name });
+  const sortIndicator = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SortIndicator2, { column });
+  const headerItems = column.align === "right" ? [sortIndicator, columnLabel, columnMenu] : [columnMenu, columnLabel, sortIndicator];
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      ...htmlAttributes,
+      className: (0, import_classnames20.default)(className, classNameProp, {
+        [`${classBase15}-resizing`]: isResizing
+      }),
+      onClick: handleClick,
+      ref: rootRef,
+      role: "columnheader",
+      style,
+      children: [
+        ...headerItems,
+        column.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ColumnResizer2, { ...resizeProps }) : null
+      ]
+    }
+  );
+};
 
 // ../vuu-table/src/table-next/TableNext.tsx
 var import_vuu_popups7 = require("@vuu-ui/vuu-popups");
@@ -3313,14 +4096,15 @@ var import_vuu_utils34 = require("@vuu-ui/vuu-utils");
 var import_react43 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var { IDX: IDX3 } = import_vuu_utils34.metadataKeys;
-var classBase13 = "vuuTableNextCell";
+var classBase16 = "vuuTableNextCell";
 var TableCell2 = ({
   column,
   columnMap,
+  onClick,
   onDataEdited,
   row
 }) => {
-  const { className, style } = useCell(column, classBase13);
+  const { className, style } = useCell(column, classBase16);
   const { CellRenderer, name: name2, valueFormatter } = column;
   const dataIdx = columnMap[name2];
   const handleDataItemEdited = (0, import_react43.useCallback)(
@@ -3330,15 +4114,30 @@ var TableCell2 = ({
     },
     [name2, onDataEdited, row]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className, role: "cell", style, children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    CellRenderer,
+  const handleClick = (0, import_react43.useCallback)(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "div",
     {
-      column,
-      columnMap,
-      onCommit: handleDataItemEdited,
-      row
+      className,
+      onClick: onClick ? handleClick : void 0,
+      role: "cell",
+      style,
+      children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        CellRenderer,
+        {
+          column,
+          columnMap,
+          onCommit: handleDataItemEdited,
+          row
+        }
+      ) : valueFormatter(row[dataIdx])
     }
-  ) : valueFormatter(row[dataIdx]) });
+  );
 };
 
 // ../vuu-table/src/table-next/table-cell/TableGroupCell.tsx
@@ -3347,11 +4146,11 @@ var import_react44 = require("react");
 var import_classnames21 = __toESM(require("classnames"));
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var { IS_LEAF: IS_LEAF3 } = import_vuu_utils35.metadataKeys;
-var classBase14 = "vuuTableNextGroupCell";
+var classBase17 = "vuuTableNextGroupCell";
 var TableGroupCell2 = ({ column, onClick, row }) => {
   const { columns } = column;
   const [value, offset] = (0, import_vuu_utils35.getGroupValueAndOffset)(columns, row);
-  const { className, style } = useCell(column, classBase14);
+  const { className, style } = useCell(column, classBase17);
   const handleClick = (0, import_react44.useCallback)(
     (evt) => {
       onClick == null ? void 0 : onClick(evt, column);
@@ -3359,7 +4158,7 @@ var TableGroupCell2 = ({ column, onClick, row }) => {
     [column, onClick]
   );
   const isLeaf = row[IS_LEAF3];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `${classBase14}-spacer` }, i));
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `${classBase17}-spacer` }, i));
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
@@ -3369,7 +4168,7 @@ var TableGroupCell2 = ({ column, onClick, row }) => {
       onClick: isLeaf ? void 0 : handleClick,
       children: [
         spacers,
-        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `${classBase14}-toggle`, "data-icon": "triangle-right" }),
+        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `${classBase17}-toggle`, "data-icon": "triangle-right" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: value })
       ]
     }
@@ -3380,7 +4179,7 @@ var TableGroupCell2 = ({ column, onClick, row }) => {
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var import_react46 = require("react");
 var { IDX: IDX4, IS_EXPANDED: IS_EXPANDED4, SELECTED: SELECTED3 } = import_vuu_utils36.metadataKeys;
-var classBase15 = "vuuTableNextRow";
+var classBase18 = "vuuTableNextRow";
 var Row2 = (0, import_react45.memo)(
   ({
     className: classNameProp,
@@ -3408,12 +4207,12 @@ var Row2 = (0, import_react45.memo)(
       [onClick, row]
     );
     const { True: True2, First: First2, Last: Last2 } = import_vuu_utils36.RowSelected;
-    const className = (0, import_classnames22.default)(classBase15, classNameProp, {
-      [`${classBase15}-even`]: zebraStripes && rowIndex % 2 === 0,
-      [`${classBase15}-expanded`]: isExpanded,
-      [`${classBase15}-selected`]: selectionStatus & True2,
-      [`${classBase15}-selectedStart`]: selectionStatus & First2,
-      [`${classBase15}-selectedEnd`]: selectionStatus & Last2
+    const className = (0, import_classnames22.default)(classBase18, classNameProp, {
+      [`${classBase18}-even`]: zebraStripes && rowIndex % 2 === 0,
+      [`${classBase18}-expanded`]: isExpanded,
+      [`${classBase18}-selected`]: selectionStatus & True2,
+      [`${classBase18}-selectedStart`]: selectionStatus & First2,
+      [`${classBase18}-selectedEnd`]: selectionStatus & Last2
     });
     const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
     const handleGroupCellClick = (0, import_react45.useCallback)(
@@ -3436,7 +4235,7 @@ var Row2 = (0, import_react45.memo)(
         onClick: handleRowClick,
         style
       },
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `${classBase15}-selectionDecorator vuuStickyLeft` }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `${classBase18}-selectionDecorator vuuStickyLeft` }),
       columns.filter(import_vuu_utils36.notHidden).map((column) => {
         const isGroup = (0, import_vuu_utils36.isGroupColumn)(column);
         const isJsonCell = (0, import_vuu_utils36.isJsonColumn)(column);
@@ -3453,7 +4252,7 @@ var Row2 = (0, import_react45.memo)(
           column.key
         );
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `${classBase15}-selectionDecorator vuuStickyRight` })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `${classBase18}-selectionDecorator vuuStickyRight` })
     );
   }
 );
@@ -3466,23 +4265,277 @@ var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
 // ../vuu-table/src/table-next/useKeyboardNavigation.ts
 var import_react47 = require("react");
 
-// ../vuu-table/src/table-next/useTableNext.ts
-var import_vuu_utils42 = require("@vuu-ui/vuu-utils");
-var import_react55 = require("react");
+// ../vuu-table/src/table-next/table-dom-utils.ts
+var headerCellQuery = (colIdx) => `.vuuTableNext-col-headers .vuuTableNextHeaderCell:nth-child(${colIdx})`;
+var dataCellQuery = (rowIdx, colIdx) => `.vuuTableNext-body > [aria-rowindex='${rowIdx}'] > [role='cell']:nth-child(${colIdx + 1})`;
+var getTableCell = (containerRef, [rowIdx, colIdx]) => {
+  var _a;
+  const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
+  const cell = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+    cssQuery
+  );
+  if (cellIsEditable(cell)) {
+    const focusableContent = cell.querySelector("button");
+    return focusableContent || cell;
+  } else {
+    return cell;
+  }
+};
+var cellIsEditable = (cell) => cell.classList.contains("vuuTableNextCell-editable");
+var cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
 
-// ../vuu-table/src/table-next/table-config.ts
-var updateTableConfig = (config, action) => {
-  switch (action.type) {
-    case "col-size":
-      return {
-        ...config,
-        columns: config.columns.map(
-          (col) => col.name === action.column.name ? { ...col, width: action.width } : col
-        )
-      };
-    case "column-prop":
-      return {
-        ...config,
+// ../vuu-table/src/table-next/useKeyboardNavigation.ts
+var navigationKeys2 = /* @__PURE__ */ new Set([
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp"
+]);
+var isNavigationKey2 = (key) => {
+  return navigationKeys2.has(key);
+};
+var PageKeys = ["Home", "End", "PageUp", "PageDown"];
+var isPagingKey2 = (key) => PageKeys.includes(key);
+var NULL_CELL_POS = [-1, -1];
+var NO_SCROLL_NECESSARY = [void 0, void 0];
+var howFarIsCellOutsideViewport = (cellEl) => {
+  var _a, _b;
+  const scrollbarContainer = (_a = cellEl.closest(".vuuTableNext")) == null ? void 0 : _a.querySelector(".vuuTableNext-scrollbarContainer");
+  if (scrollbarContainer) {
+    const viewport = scrollbarContainer == null ? void 0 : scrollbarContainer.getBoundingClientRect();
+    const cell = (_b = cellEl.closest(".vuuTableNextCell")) == null ? void 0 : _b.getBoundingClientRect();
+    if (cell) {
+      if (cell.bottom > viewport.bottom) {
+        return ["down", cell.bottom - viewport.bottom];
+      } else if (cell.top < viewport.top) {
+        return ["up", cell.top - viewport.top];
+      } else if (cell.right < viewport.right) {
+        return ["right", cell.right - viewport.right];
+      } else if (cell.left < viewport.left) {
+        return ["left", cell.left - viewport.left];
+      } else {
+        return NO_SCROLL_NECESSARY;
+      }
+    } else {
+      throw Error("Whats going on, cell not found");
+    }
+  } else {
+    throw Error("Whats going on, scrollbar container not found");
+  }
+};
+function nextCellPos(key, [rowIdx, colIdx], columnCount, rowCount) {
+  if (key === "ArrowUp") {
+    if (rowIdx > -1) {
+      return [rowIdx - 1, colIdx];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  } else if (key === "ArrowDown") {
+    if (rowIdx === -1) {
+      return [0, colIdx];
+    } else if (rowIdx === rowCount - 1) {
+      return [rowIdx, colIdx];
+    } else {
+      return [rowIdx + 1, colIdx];
+    }
+  } else if (key === "ArrowRight") {
+    if (colIdx < columnCount - 1) {
+      return [rowIdx, colIdx + 1];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  } else if (key === "ArrowLeft") {
+    if (colIdx > 1) {
+      return [rowIdx, colIdx - 1];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  }
+  return [rowIdx, colIdx];
+}
+var useKeyboardNavigation2 = ({
+  columnCount = 0,
+  containerRef,
+  disableHighlightOnFocus,
+  requestScroll,
+  rowCount = 0,
+  viewportRowCount
+}) => {
+  var _a;
+  const focusedCellPos = (0, import_react47.useRef)([-1, -1]);
+  const focusableCell = (0, import_react47.useRef)();
+  const activeCellPos = (0, import_react47.useRef)([-1, 0]);
+  const getFocusedCell = (element) => element == null ? void 0 : element.closest(
+    "[role='columnHeader'],[role='cell']"
+  );
+  const getTableCellPos = (tableCell) => {
+    var _a2, _b;
+    if (tableCell.role === "columnHeader") {
+      const colIdx = parseInt((_a2 = tableCell.dataset.idx) != null ? _a2 : "-1", 10);
+      return [-1, colIdx];
+    } else {
+      const focusedRow = tableCell.closest("[role='row']");
+      if (focusedRow) {
+        const rowIdx = parseInt((_b = focusedRow.ariaRowIndex) != null ? _b : "-1", 10);
+        const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
+        return [rowIdx, colIdx];
+      }
+    }
+    return NULL_CELL_POS;
+  };
+  const focusCell = (0, import_react47.useCallback)(
+    (cellPos) => {
+      var _a2;
+      if (containerRef.current) {
+        const activeCell = getTableCell(containerRef, cellPos);
+        if (activeCell) {
+          if (activeCell !== focusableCell.current) {
+            (_a2 = focusableCell.current) == null ? void 0 : _a2.removeAttribute("tabindex");
+            focusableCell.current = activeCell;
+            activeCell.setAttribute("tabindex", "0");
+          }
+          const [direction, distance] = howFarIsCellOutsideViewport(activeCell);
+          if (direction && distance) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-distance", distance, direction });
+          }
+          activeCell.focus();
+        }
+      }
+    },
+    // TODO we recreate this function whenever viewportRange changes, which will
+    // be often whilst scrolling - store range in a a ref ?
+    [containerRef, requestScroll]
+  );
+  const setActiveCell = (0, import_react47.useCallback)(
+    (rowIdx, colIdx, fromKeyboard = false) => {
+      const pos = [rowIdx, colIdx];
+      activeCellPos.current = pos;
+      focusCell(pos);
+      if (fromKeyboard) {
+        focusedCellPos.current = pos;
+      }
+    },
+    [focusCell]
+  );
+  const nextPageItemIdx = (0, import_react47.useCallback)(
+    (key, [rowIdx, colIdx]) => new Promise((resolve) => {
+      let newRowIdx = rowIdx;
+      switch (key) {
+        case "PageDown":
+          newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "down" });
+          break;
+        case "PageUp":
+          newRowIdx = Math.max(0, rowIdx - viewportRowCount);
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
+          break;
+        case "Home":
+          newRowIdx = 0;
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "home" });
+          break;
+        case "End":
+          newRowIdx = rowCount - 1;
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "end" });
+          break;
+      }
+      setTimeout(() => {
+        resolve([newRowIdx, colIdx]);
+      }, 90);
+    }),
+    [requestScroll, rowCount, viewportRowCount]
+  );
+  const handleFocus = (0, import_react47.useCallback)(() => {
+    var _a2;
+    if (disableHighlightOnFocus !== true) {
+      if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
+        const focusedCell = getFocusedCell(document.activeElement);
+        if (focusedCell) {
+          console.log({ focusedCell });
+          focusedCellPos.current = getTableCellPos(focusedCell);
+        }
+      }
+    }
+  }, [disableHighlightOnFocus, containerRef]);
+  const navigateChildItems = (0, import_react47.useCallback)(
+    async (key) => {
+      console.log(`navigate child items ${key}`);
+      const [nextRowIdx, nextColIdx] = isPagingKey2(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
+      console.log(`nextRowIdx ${nextRowIdx} nextColIdx ${nextColIdx}`);
+      const [rowIdx, colIdx] = activeCellPos.current;
+      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
+        setActiveCell(nextRowIdx, nextColIdx, true);
+      }
+    },
+    [columnCount, nextPageItemIdx, rowCount, setActiveCell]
+  );
+  const handleKeyDown = (0, import_react47.useCallback)(
+    (e) => {
+      if (rowCount > 0 && isNavigationKey2(e.key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        void navigateChildItems(e.key);
+      }
+    },
+    [rowCount, navigateChildItems]
+  );
+  const handleClick = (0, import_react47.useCallback)(
+    // Might not be a cell e.g the Settings button
+    (evt) => {
+      const target = evt.target;
+      const focusedCell = getFocusedCell(target);
+      if (focusedCell) {
+        const [rowIdx, colIdx] = getTableCellPos(focusedCell);
+        setActiveCell(rowIdx, colIdx);
+      }
+    },
+    [setActiveCell]
+  );
+  const navigate = (0, import_react47.useCallback)(() => {
+    navigateChildItems("ArrowDown");
+  }, [navigateChildItems]);
+  const containerProps = (0, import_react47.useMemo)(() => {
+    return {
+      navigate,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown
+    };
+  }, [handleClick, handleFocus, handleKeyDown, navigate]);
+  const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
+  (0, import_react47.useEffect)(() => {
+    if (fullyRendered && focusableCell.current === void 0) {
+      const { current: container } = containerRef;
+      const cell = (container == null ? void 0 : container.querySelector(headerCellQuery(0))) || (container == null ? void 0 : container.querySelector(dataCellQuery(0, 0)));
+      if (cell) {
+        cell.setAttribute("tabindex", "0");
+        focusableCell.current = cell;
+      }
+    }
+  }, [containerRef, fullyRendered]);
+  return containerProps;
+};
+
+// ../vuu-table/src/table-next/useTableNext.ts
+var import_vuu_utils42 = require("@vuu-ui/vuu-utils");
+var import_react55 = require("react");
+
+// ../vuu-table/src/table-next/table-config.ts
+var updateTableConfig = (config, action) => {
+  switch (action.type) {
+    case "col-size":
+      return {
+        ...config,
+        columns: config.columns.map(
+          (col) => col.name === action.column.name ? { ...col, width: action.width } : col
+        )
+      };
+    case "column-prop":
+      return {
+        ...config,
         columns: config.columns.map(
           (col) => col.name === action.column.name ? { ...col, [action.property]: action.value } : col
         )
@@ -3500,47 +4553,1316 @@ var import_react48 = require("react");
 // ../vuu-table/src/table-next/moving-window.ts
 var import_vuu_utils37 = require("@vuu-ui/vuu-utils");
 var { SELECTED: SELECTED4 } = import_vuu_utils37.metadataKeys;
+var MovingWindow = class {
+  constructor({ from, to }) {
+    this.rowCount = 0;
+    this.setRowCount = (rowCount) => {
+      if (rowCount < this.data.length) {
+        this.data.length = rowCount;
+      }
+      this.rowCount = rowCount;
+    };
+    this.range = new import_vuu_utils37.WindowRange(from, to);
+    this.data = new Array(to - from);
+    this.rowCount = 0;
+  }
+  add(data) {
+    const [index] = data;
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - this.range.from;
+      this.data[internalIndex] = data;
+    }
+  }
+  getAtIndex(index) {
+    return this.range.isWithin(index) && this.data[index - this.range.from] != null ? this.data[index - this.range.from] : void 0;
+  }
+  isWithinRange(index) {
+    return this.range.isWithin(index);
+  }
+  setRange({ from, to }) {
+    if (from !== this.range.from || to !== this.range.to) {
+      const [overlapFrom, overlapTo] = this.range.overlap(from, to);
+      const newData = new Array(Math.max(0, to - from));
+      for (let i = overlapFrom; i < overlapTo; i++) {
+        const data = this.getAtIndex(i);
+        if (data) {
+          const index = i - from;
+          newData[index] = data;
+        }
+      }
+      this.data = newData;
+      this.range.from = from;
+      this.range.to = to;
+    }
+  }
+  getSelectedRows() {
+    return this.data.filter((row) => row[SELECTED4] !== 0);
+  }
+};
+
+// ../vuu-table/src/table-next/useDataSource.ts
+var useDataSource2 = ({
+  dataSource,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onSizeChange,
+  onSubscribed,
+  range = import_vuu_utils38.NULL_RANGE,
+  renderBufferSize = 0
+}) => {
+  const [, forceUpdate] = (0, import_react48.useState)(null);
+  const data = (0, import_react48.useRef)([]);
+  const isMounted = (0, import_react48.useRef)(true);
+  const hasUpdated = (0, import_react48.useRef)(false);
+  const rangeRef = (0, import_react48.useRef)(import_vuu_utils38.NULL_RANGE);
+  const dataWindow = (0, import_react48.useMemo)(
+    () => new MovingWindow((0, import_vuu_utils38.getFullRange)(range, renderBufferSize)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const setData = (0, import_react48.useCallback)(
+    (updates) => {
+      for (const row of updates) {
+        dataWindow.add(row);
+      }
+      data.current = dataWindow.data;
+      if (isMounted.current) {
+        forceUpdate({});
+      }
+    },
+    [dataWindow]
+  );
+  const datasourceMessageHandler = (0, import_react48.useCallback)(
+    (message) => {
+      if (message.type === "subscribed") {
+        onSubscribed == null ? void 0 : onSubscribed(message);
+      } else if (message.type === "viewport-update") {
+        if (typeof message.size === "number") {
+          onSizeChange == null ? void 0 : onSizeChange(message.size);
+          dataWindow.setRowCount(message.size);
+        }
+        if (message.rows) {
+          setData(message.rows);
+        } else if (typeof message.size === "number") {
+          data.current = dataWindow.data;
+          hasUpdated.current = true;
+        }
+      } else if ((0, import_src.isVuuFeatureAction)(message)) {
+        onFeatureEnabled == null ? void 0 : onFeatureEnabled(message);
+      } else if ((0, import_src.isVuuFeatureInvocation)(message)) {
+        onFeatureInvocation == null ? void 0 : onFeatureInvocation(message);
+      } else {
+        console.log(`useDataSource unexpected message ${message.type}`);
+      }
+    },
+    [
+      dataWindow,
+      onFeatureEnabled,
+      onFeatureInvocation,
+      onSizeChange,
+      onSubscribed,
+      setData
+    ]
+  );
+  (0, import_react48.useEffect)(
+    () => () => {
+      isMounted.current = true;
+      isMounted.current = false;
+    },
+    []
+  );
+  (0, import_react48.useEffect)(() => {
+    dataSource == null ? void 0 : dataSource.subscribe(
+      { range: (0, import_vuu_utils38.getFullRange)(range, renderBufferSize) },
+      datasourceMessageHandler
+    );
+  }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
+  const setRange = (0, import_react48.useCallback)(
+    (range2) => {
+      const fullRange = (0, import_vuu_utils38.getFullRange)(range2, renderBufferSize);
+      dataWindow.setRange(fullRange);
+      dataSource.range = rangeRef.current = fullRange;
+      dataSource.emit("range", range2);
+    },
+    [dataSource, dataWindow, renderBufferSize]
+  );
+  return {
+    data: data.current,
+    range: rangeRef.current,
+    setRange
+  };
+};
 
 // ../vuu-table/src/table-next/useInitialValue.ts
 var import_react49 = require("react");
+var useInitialValue = (value) => {
+  const ref = (0, import_react49.useRef)(value);
+  return (0, import_react49.useMemo)(() => ref.current, []);
+};
 
 // ../vuu-table/src/table-next/useTableContextMenu.ts
 var import_vuu_utils39 = require("@vuu-ui/vuu-utils");
 var import_react50 = require("react");
 var import_vuu_popups6 = require("@vuu-ui/vuu-popups");
+var useTableContextMenu2 = ({
+  columns,
+  data
+}) => {
+  const [showContextMenu] = (0, import_vuu_popups6.useContextMenu)();
+  const onContextMenu = (0, import_react50.useCallback)(
+    (evt) => {
+      var _a;
+      const target = evt.target;
+      const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
+      const rowEl = target == null ? void 0 : target.closest("div[role='row']");
+      if (cellEl && rowEl) {
+        const columnMap = (0, import_vuu_utils39.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);
+        const columnName = columns[cellIndex];
+        showContextMenu(evt, "grid", {
+          columnMap,
+          columnName,
+          row
+          // selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
+          // viewport: dataSource?.viewport,
+        });
+      }
+    },
+    [columns, data, showContextMenu]
+  );
+  return onContextMenu;
+};
 
 // ../vuu-table/src/table-next/useCellEditing.ts
 var import_vuu_utils40 = require("@vuu-ui/vuu-utils");
 var import_react51 = require("react");
+var useCellEditing = ({ navigate }) => {
+  const commitHandler = (0, import_react51.useCallback)(() => {
+    navigate();
+  }, [navigate]);
+  const editInput = (0, import_react51.useCallback)(
+    (evt) => {
+      const cellEl = evt.target;
+      const input = cellEl.querySelector("input");
+      if (input) {
+        input.focus();
+        input.select();
+      }
+      cellEl.addEventListener("vuu-commit", commitHandler, true);
+    },
+    [commitHandler]
+  );
+  const focusInput = (0, import_react51.useCallback)(
+    (evt) => {
+      const cellEl = evt.target;
+      const input = cellEl.querySelector("input");
+      if (input) {
+        input.focus();
+        input.select();
+      }
+      cellEl.addEventListener("vuu-commit", commitHandler, true);
+    },
+    [commitHandler]
+  );
+  const handleKeyDown = (0, import_react51.useCallback)(
+    (e) => {
+      if (cellIsTextInput(e.target)) {
+        if ((0, import_vuu_utils40.isCharacterKey)(e.key)) {
+          editInput(e);
+        } else if (e.key === "Enter") {
+          focusInput(e);
+        }
+      }
+    },
+    [editInput, focusInput]
+  );
+  return {
+    onKeyDown: handleKeyDown
+  };
+};
 
 // ../vuu-table/src/table-next/useTableModel.ts
 var import_vuu_utils41 = require("@vuu-ui/vuu-utils");
 var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
 var import_react52 = require("react");
 var { info } = (0, import_vuu_utils41.logger)("useTableModel");
+var DEFAULT_COLUMN_WIDTH = 100;
 var KEY_OFFSET2 = import_vuu_utils41.metadataKeys.count;
+var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
+var getCellRendererForColumn = (column) => {
+  var _a;
+  if ((0, import_vuu_utils41.isTypeDescriptor)(column.type)) {
+    return (0, import_vuu_utils41.getCellRenderer)((_a = column.type) == null ? void 0 : _a.renderer);
+  }
+};
+var getDataType = (column, tableSchema) => {
+  var _a;
+  const schemaColumn = tableSchema.columns.find(
+    ({ name: name2 }) => name2 === column.name
+  );
+  if (schemaColumn) {
+    return schemaColumn.serverDataType;
+  } else {
+    return (_a = column.serverDataType) != null ? _a : "string";
+  }
+};
+var numericTypes = ["int", "long", "double"];
+var getDefaultAlignment3 = (serverDataType) => serverDataType === void 0 ? void 0 : numericTypes.includes(serverDataType) ? "right" : "left";
+var isShowColumnSettings = (action) => action.type === "columnSettings";
+var isShowTableSettings = (action) => action.type === "tableSettings";
+var columnReducer = (state, action) => {
+  info == null ? void 0 : info(`TableModelReducer ${action.type}`);
+  console.log(`TableModelReducer ${action.type}`);
+  switch (action.type) {
+    case "init":
+      console.log({ init: action });
+      return init(action);
+    case "moveColumn":
+      return moveColumn(state, action);
+    case "resizeColumn":
+      return resizeColumn(state, action);
+    case "setTableSchema":
+      return setTableSchema(state, action);
+    case "hideColumns":
+      return hideColumns(state, action);
+    case "showColumns":
+      return showColumns(state, action);
+    case "pinColumn":
+      return pinColumn2(state, action);
+    case "updateColumnProp":
+      return updateColumnProp(state, action);
+    case "tableConfig":
+      return updateTableConfig2(state, action);
+    default:
+      console.log(`unhandled action ${action.type}`);
+      return state;
+  }
+};
+var useTableModel2 = (tableConfigProp, dataSourceConfig) => {
+  const [state, dispatchColumnAction] = (0, import_react52.useReducer)(columnReducer, { tableConfig: tableConfigProp, dataSourceConfig }, init);
+  const { columns, headings, tableConfig, ...tableAttributes } = state;
+  return {
+    columns,
+    dispatchColumnAction,
+    headings,
+    tableAttributes,
+    tableConfig
+  };
+};
+function init({
+  dataSourceConfig,
+  tableConfig
+}) {
+  const { columns, ...tableAttributes } = tableConfig;
+  const keyedColumns = columns.filter((0, import_vuu_utils41.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(columnDescriptorToKeyedColumDescriptor(tableAttributes));
+  const maybePinnedColumns = keyedColumns.some(import_vuu_utils41.isPinned) ? (0, import_vuu_utils41.sortPinnedColumns)(keyedColumns) : keyedColumns;
+  let state = {
+    columns: maybePinnedColumns,
+    headings: (0, import_vuu_utils41.getTableHeadings)(maybePinnedColumns),
+    tableConfig,
+    ...tableAttributes
+  };
+  if (dataSourceConfig) {
+    const { columns: _, ...rest } = dataSourceConfig;
+    state = updateTableConfig2(state, {
+      type: "tableConfig",
+      ...rest
+    });
+  }
+  return state;
+}
+var getLabel = (label, columnFormatHeader) => {
+  if (columnFormatHeader === "uppercase") {
+    return label.toUpperCase();
+  } else if (columnFormatHeader === "capitalize") {
+    return label[0].toUpperCase() + label.slice(1).toLowerCase();
+  }
+  return label;
+};
+var columnDescriptorToKeyedColumDescriptor = (tableAttributes) => (column, index) => {
+  const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } = tableAttributes;
+  const {
+    align = getDefaultAlignment3(column.serverDataType),
+    key,
+    name: name2,
+    label = name2,
+    width = columnDefaultWidth,
+    ...rest
+  } = column;
+  const keyedColumnWithDefaults = {
+    ...rest,
+    align,
+    CellRenderer: getCellRendererForColumn(column),
+    clientSideEditValidationCheck: (0, import_vuu_utils41.hasValidationRules)(column.type) ? (0, import_vuu_ui_controls7.buildValidationChecker)(column.type.renderer.rules) : void 0,
+    label: getLabel(label, columnFormatHeader),
+    key: key != null ? key : index + KEY_OFFSET2,
+    name: name2,
+    originalIdx: index,
+    valueFormatter: (0, import_vuu_utils41.getValueFormatter)(column),
+    width
+  };
+  if ((0, import_vuu_utils41.isGroupColumn)(keyedColumnWithDefaults)) {
+    keyedColumnWithDefaults.columns = keyedColumnWithDefaults.columns.map(
+      (col) => columnDescriptorToKeyedColumDescriptor(tableAttributes)(col, col.key)
+    );
+  }
+  return keyedColumnWithDefaults;
+};
+function moveColumn(state, { column, moveBy, moveTo }) {
+  const { columns } = state;
+  if (typeof moveBy === "number") {
+    const idx = columns.indexOf(column);
+    const newColumns = columns.slice();
+    const [movedColumns] = newColumns.splice(idx, 1);
+    newColumns.splice(idx + moveBy, 0, movedColumns);
+    return {
+      ...state,
+      columns: newColumns
+    };
+  } else if (typeof moveTo === "number") {
+    const index = columns.indexOf(column);
+    return {
+      ...state,
+      columns: (0, import_vuu_utils41.moveItem)(columns, index, moveTo)
+    };
+  }
+  return state;
+}
+function hideColumns(state, { columns }) {
+  if (columns.some((col) => col.hidden !== true)) {
+    return columns.reduce((s, c) => {
+      if (c.hidden !== true) {
+        return updateColumnProp(s, {
+          type: "updateColumnProp",
+          column: c,
+          hidden: true
+        });
+      } else {
+        return s;
+      }
+    }, state);
+  } else {
+    return state;
+  }
+}
+function showColumns(state, { columns }) {
+  if (columns.some((col) => col.hidden)) {
+    return columns.reduce((s, c) => {
+      if (c.hidden) {
+        return updateColumnProp(s, {
+          type: "updateColumnProp",
+          column: c,
+          hidden: false
+        });
+      } else {
+        return s;
+      }
+    }, state);
+  } else {
+    return state;
+  }
+}
+function resizeColumn(state, { column, phase, width }) {
+  const type = "updateColumnProp";
+  const resizing = phase !== "end";
+  switch (phase) {
+    case "begin":
+      return updateColumnProp(state, { type, column, resizing });
+    case "end":
+      return updateColumnProp(state, { type, column, resizing, width });
+    case "resize":
+      return updateColumnProp(state, { type, column, width });
+    default:
+      throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);
+  }
+}
+function setTableSchema(state, { tableSchema }) {
+  const { columns } = state;
+  if (columns.some(columnWithoutDataType)) {
+    const cols = columns.map((column) => {
+      var _a;
+      const serverDataType = getDataType(column, tableSchema);
+      return {
+        ...column,
+        align: (_a = column.align) != null ? _a : getDefaultAlignment3(serverDataType),
+        serverDataType
+      };
+    });
+    return {
+      ...state,
+      columns: cols
+    };
+  } else {
+    return state;
+  }
+}
+function pinColumn2(state, action) {
+  let { columns } = state;
+  const { column, pin } = action;
+  const targetColumn = columns.find((col) => col.name === column.name);
+  if (targetColumn) {
+    columns = replaceColumn2(columns, { ...targetColumn, pin });
+    columns = (0, import_vuu_utils41.sortPinnedColumns)(columns);
+    return {
+      ...state,
+      columns
+    };
+  } else {
+    return state;
+  }
+}
+function updateColumnProp(state, action) {
+  let { columns } = state;
+  const { align, column, hidden, label, resizing, width } = action;
+  const targetColumn = columns.find((col) => col.name === column.name);
+  if (targetColumn) {
+    if (align === "left" || align === "right") {
+      columns = replaceColumn2(columns, { ...targetColumn, align });
+    }
+    if (typeof label === "string") {
+      columns = replaceColumn2(columns, { ...targetColumn, label });
+    }
+    if (typeof resizing === "boolean") {
+      columns = replaceColumn2(columns, { ...targetColumn, resizing });
+    }
+    if (typeof hidden === "boolean") {
+      columns = replaceColumn2(columns, { ...targetColumn, hidden });
+    }
+    if (typeof width === "number") {
+      columns = replaceColumn2(columns, { ...targetColumn, width });
+    }
+  }
+  return {
+    ...state,
+    columns
+  };
+}
+function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
+  const hasGroupBy = groupBy !== void 0;
+  const hasFilter = typeof (filter == null ? void 0 : filter.filter) === "string";
+  const hasSort = sort && sort.sortDefs.length > 0;
+  let result = state;
+  if (hasGroupBy) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils41.applyGroupByToColumns)(result.columns, groupBy, confirmed)
+    };
+  }
+  if (hasSort) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils41.applySortToColumns)(result.columns, sort)
+    };
+  }
+  if (hasFilter) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils41.applyFilterToColumns)(result.columns, filter)
+    };
+  } else if (result.columns.some(import_vuu_utils41.isFilteredColumn)) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils41.stripFilterFromColumns)(result.columns)
+    };
+  }
+  return result;
+}
+function replaceColumn2(state, column) {
+  return state.map((col) => col.name === column.name ? column : col);
+}
 
 // ../vuu-table/src/table-next/useTableScroll.ts
 var import_react53 = require("react");
+var getPctScroll = (container) => {
+  const { scrollLeft, scrollTop } = container;
+  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
+  const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
+  const pctScrollTop = scrollTop / (scrollHeight - clientHeight);
+  return [pctScrollLeft, pctScrollTop];
+};
+var useCallbackRef = ({
+  onAttach,
+  onDetach
+}) => {
+  const ref = (0, import_react53.useRef)(null);
+  const callbackRef = (0, import_react53.useCallback)(
+    (el) => {
+      if (el) {
+        ref.current = el;
+        onAttach == null ? void 0 : onAttach(el);
+      } else if (ref.current) {
+        const { current: originalRef } = ref;
+        ref.current = el;
+        onDetach == null ? void 0 : onDetach(originalRef);
+      }
+    },
+    [onAttach, onDetach]
+  );
+  return callbackRef;
+};
+var useTableScroll2 = ({
+  maxScrollLeft,
+  maxScrollTop,
+  onHorizontalScroll,
+  onVerticalScroll,
+  rowHeight,
+  viewportRowCount
+}) => {
+  const contentContainerScrolledRef = (0, import_react53.useRef)(false);
+  const scrollPosRef = (0, import_react53.useRef)({ scrollTop: 0, scrollLeft: 0 });
+  const scrollbarContainerRef = (0, import_react53.useRef)(null);
+  const contentContainerRef = (0, import_react53.useRef)(null);
+  const handleScrollbarContainerScroll = (0, import_react53.useCallback)(() => {
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: contentContainerScrolled } = contentContainerScrolledRef;
+    if (contentContainerScrolled) {
+      contentContainerScrolledRef.current = false;
+    } else if (contentContainer && scrollbarContainer) {
+      const [pctScrollLeft, pctScrollTop] = getPctScroll(scrollbarContainer);
+      const rootScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      const rootScrollTop = Math.round(pctScrollTop * maxScrollTop);
+      contentContainer.scrollTo({
+        left: rootScrollLeft,
+        top: rootScrollTop,
+        behavior: "auto"
+      });
+    }
+  }, [maxScrollLeft, maxScrollTop]);
+  const handleContentContainerScroll = (0, import_react53.useCallback)(() => {
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: scrollPos } = scrollPosRef;
+    if (contentContainer && scrollbarContainer) {
+      const { scrollLeft, scrollTop } = contentContainer;
+      const [pctScrollLeft, pctScrollTop] = getPctScroll(contentContainer);
+      contentContainerScrolledRef.current = true;
+      scrollbarContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      scrollbarContainer.scrollTop = Math.round(pctScrollTop * maxScrollTop);
+      if (scrollPos.scrollTop !== scrollTop) {
+        scrollPos.scrollTop = scrollTop;
+        onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
+      }
+      if (scrollPos.scrollLeft !== scrollLeft) {
+        scrollPos.scrollLeft = scrollLeft;
+        onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
+      }
+    }
+  }, [maxScrollLeft, maxScrollTop, onHorizontalScroll, onVerticalScroll]);
+  const handleAttachScrollbarContainer = (0, import_react53.useCallback)(
+    (el) => {
+      scrollbarContainerRef.current = el;
+      el.addEventListener("scroll", handleScrollbarContainerScroll, {
+        passive: true
+      });
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleDetachScrollbarContainer = (0, import_react53.useCallback)(
+    (el) => {
+      scrollbarContainerRef.current = null;
+      el.removeEventListener("scroll", handleScrollbarContainerScroll);
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleAttachContentContainer = (0, import_react53.useCallback)(
+    (el) => {
+      contentContainerRef.current = el;
+      el.addEventListener("scroll", handleContentContainerScroll, {
+        passive: true
+      });
+    },
+    [handleContentContainerScroll]
+  );
+  const handleDetachContentContainer = (0, import_react53.useCallback)(
+    (el) => {
+      contentContainerRef.current = null;
+      el.removeEventListener("scroll", handleContentContainerScroll);
+    },
+    [handleContentContainerScroll]
+  );
+  const contentContainerCallbackRef = useCallbackRef({
+    onAttach: handleAttachContentContainer,
+    onDetach: handleDetachContentContainer
+  });
+  const scrollbarContainerCallbackRef = useCallbackRef({
+    onAttach: handleAttachScrollbarContainer,
+    onDetach: handleDetachScrollbarContainer
+  });
+  const requestScroll = (0, import_react53.useCallback)(
+    (scrollRequest) => {
+      const { current: scrollbarContainer } = contentContainerRef;
+      if (scrollbarContainer) {
+        const { scrollLeft, scrollTop } = scrollbarContainer;
+        contentContainerScrolledRef.current = false;
+        if (scrollRequest.type === "scroll-distance") {
+          let newScrollLeft = scrollLeft;
+          let newScrollTop = scrollTop;
+          if (scrollRequest.direction === "up" || scrollRequest.direction === "down") {
+            newScrollTop = Math.min(
+              Math.max(0, scrollTop + scrollRequest.distance),
+              maxScrollTop
+            );
+          } else {
+            newScrollLeft = Math.min(
+              Math.max(0, scrollLeft + scrollRequest.distance),
+              maxScrollLeft
+            );
+          }
+          scrollbarContainer.scrollTo({
+            top: newScrollTop,
+            left: newScrollLeft,
+            behavior: "auto"
+          });
+        } else if (scrollRequest.type === "scroll-page") {
+          const { direction } = scrollRequest;
+          const scrollBy = viewportRowCount * (direction === "down" ? rowHeight : -rowHeight);
+          const newScrollTop = Math.min(
+            Math.max(0, scrollTop + scrollBy),
+            maxScrollTop
+          );
+          scrollbarContainer.scrollTo({
+            top: newScrollTop,
+            left: scrollLeft,
+            behavior: "auto"
+          });
+        } else if (scrollRequest.type === "scroll-end") {
+          const { direction } = scrollRequest;
+          const scrollTo = direction === "end" ? maxScrollTop : 0;
+          scrollbarContainer.scrollTo({
+            top: scrollTo,
+            left: scrollbarContainer.scrollLeft,
+            behavior: "auto"
+          });
+        }
+      }
+    },
+    [maxScrollLeft, maxScrollTop, rowHeight, viewportRowCount]
+  );
+  return {
+    /** Ref to be assigned to ScrollbarContainer */
+    scrollbarContainerRef: scrollbarContainerCallbackRef,
+    /** Ref to be assigned to ContentContainer */
+    contentContainerRef: contentContainerCallbackRef,
+    /** Scroll the table  */
+    requestScroll
+  };
+};
 
 // ../vuu-table/src/table-next/useVirtualViewport.ts
 var import_react54 = require("react");
+var useVirtualViewport2 = ({
+  columns,
+  getRowAtPosition,
+  setRange,
+  viewportMeasurements
+}) => {
+  const firstRowRef = (0, import_react54.useRef)(0);
+  const { contentWidth, rowCount: viewportRowCount } = viewportMeasurements;
+  const handleVerticalScroll = (0, import_react54.useCallback)(
+    (scrollTop) => {
+      const firstRow = getRowAtPosition(scrollTop);
+      if (firstRow !== firstRowRef.current) {
+        firstRowRef.current = firstRow;
+        setRange({ from: firstRow, to: firstRow + viewportRowCount });
+      }
+    },
+    [getRowAtPosition, setRange, viewportRowCount]
+  );
+  (0, import_react54.useEffect)(() => {
+    const { current: from } = firstRowRef;
+    const rowRange = { from, to: from + viewportRowCount };
+    setRange(rowRange);
+  }, [setRange, viewportRowCount]);
+  return {
+    onVerticalScroll: handleVerticalScroll
+  };
+};
 
 // ../vuu-table/src/table-next/useTableNext.ts
 var { KEY: KEY6, IS_EXPANDED: IS_EXPANDED5, IS_LEAF: IS_LEAF4 } = import_vuu_utils42.metadataKeys;
+var addColumn = (tableConfig, column) => ({
+  ...tableConfig,
+  columns: tableConfig.columns.concat(column)
+});
+var useTable2 = ({
+  availableColumns,
+  config,
+  containerRef,
+  dataSource,
+  headerHeight = 25,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onRowClick: onRowClickProp,
+  onSelect,
+  onSelectionChange,
+  renderBufferSize = 0,
+  rowHeight = 20,
+  selectionModel
+}) => {
+  const [rowCount, setRowCount] = (0, import_react55.useState)(dataSource.size);
+  if (dataSource === void 0) {
+    throw Error("no data source provided to Vuu Table");
+  }
+  const [size, setSize] = (0, import_react55.useState)();
+  const handleResize = (0, import_react55.useCallback)((size2) => {
+    setSize(size2);
+  }, []);
+  const menuBuilder = (0, import_react55.useMemo)(
+    () => buildContextMenuDescriptors(dataSource),
+    [dataSource]
+  );
+  const onDataRowcountChange = (0, import_react55.useCallback)((size2) => {
+    setRowCount(size2);
+  }, []);
+  const {
+    columns: modelColumns,
+    dispatchColumnAction,
+    headings,
+    tableAttributes,
+    tableConfig
+  } = useTableModel2(config, dataSource.config);
+  (0, import_vuu_layout2.useLayoutEffectSkipFirst)(() => {
+    dispatchColumnAction({
+      type: "init",
+      dataSourceConfig: dataSource.config,
+      tableConfig
+    });
+  }, [tableConfig, dataSource.config, dispatchColumnAction]);
+  const [stateColumns, setStateColumns] = (0, import_react55.useState)();
+  const [columns, setColumnSize] = (0, import_react55.useMemo)(() => {
+    const setSize2 = (columnName, width) => {
+      const cols = (0, import_vuu_utils42.updateColumn)(modelColumns, columnName, { width });
+      setStateColumns(cols);
+    };
+    return [stateColumns != null ? stateColumns : modelColumns, setSize2];
+  }, [modelColumns, stateColumns]);
+  const columnMap = (0, import_react55.useMemo)(
+    () => (0, import_vuu_utils42.buildColumnMap)(dataSource.columns),
+    [dataSource.columns]
+  );
+  const {
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop,
+    ...viewportMeasurements
+  } = useTableViewport({
+    columns,
+    headerHeight,
+    headings,
+    rowCount,
+    rowHeight,
+    size
+  });
+  const initialRange = useInitialValue({
+    from: 0,
+    to: viewportMeasurements.rowCount
+  });
+  const onSubscribed = (0, import_react55.useCallback)(
+    ({ tableSchema }) => {
+      if (tableSchema) {
+      } else {
+        console.log("usbscription message with no schema");
+      }
+    },
+    []
+  );
+  const { data, range, setRange } = useDataSource2({
+    dataSource,
+    onFeatureEnabled,
+    onFeatureInvocation,
+    renderBufferSize,
+    onSizeChange: onDataRowcountChange,
+    onSubscribed,
+    range: initialRange
+  });
+  const handleConfigChanged = (0, import_react55.useCallback)(
+    (tableConfig2) => {
+      dispatchColumnAction({
+        type: "init",
+        tableConfig: tableConfig2,
+        dataSourceConfig: dataSource.config
+      });
+      onConfigChange == null ? void 0 : onConfigChange(tableConfig2);
+    },
+    [dataSource.config, dispatchColumnAction, onConfigChange]
+  );
+  const handleDataSourceConfigChanged = (0, import_react55.useCallback)(
+    (dataSourceConfig) => {
+      dataSource.config = {
+        ...dataSource.config,
+        ...dataSourceConfig
+      };
+    },
+    [dataSource]
+  );
+  const handleCreateCalculatedColumn = (0, import_react55.useCallback)(
+    (column) => {
+      dataSource.columns = dataSource.columns.concat(column.name);
+      const newTableConfig = addColumn(tableConfig, column);
+      dispatchColumnAction({
+        type: "init",
+        tableConfig: newTableConfig,
+        dataSourceConfig: dataSource.config
+      });
+      onConfigChange == null ? void 0 : onConfigChange(newTableConfig);
+    },
+    [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
+  );
+  (0, import_react55.useEffect)(() => {
+    dataSource.on("config", (config2, confirmed) => {
+      dispatchColumnAction({
+        type: "tableConfig",
+        ...config2,
+        confirmed
+      });
+    });
+  }, [dataSource, dispatchColumnAction]);
+  const { showColumnSettingsPanel, showTableSettingsPanel } = useTableAndColumnSettings({
+    availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name: name2, serverDataType = "string" }) => ({
+      name: name2,
+      serverDataType
+    })),
+    onAvailableColumnsChange,
+    onConfigChange: handleConfigChanged,
+    onCreateCalculatedColumn: handleCreateCalculatedColumn,
+    onDataSourceConfigChange: handleDataSourceConfigChanged,
+    tableConfig
+  });
+  const onPersistentColumnOperation = (0, import_react55.useCallback)(
+    (action) => {
+      if (isShowColumnSettings(action)) {
+        showColumnSettingsPanel(action);
+      } else if (isShowTableSettings(action)) {
+        showTableSettingsPanel();
+      } else {
+        dispatchColumnAction(action);
+      }
+    },
+    [dispatchColumnAction, showColumnSettingsPanel, showTableSettingsPanel]
+  );
+  const handleContextMenuAction = useTableContextMenu({
+    dataSource,
+    onPersistentColumnOperation
+  });
+  const handleSort = (0, import_react55.useCallback)(
+    (column, extendSort = false, sortType) => {
+      if (dataSource) {
+        dataSource.sort = (0, import_vuu_utils42.applySort)(
+          dataSource.sort,
+          column,
+          extendSort,
+          sortType
+        );
+      }
+    },
+    [dataSource]
+  );
+  const onHeaderResize = (0, import_react55.useCallback)(
+    (phase, columnName, width) => {
+      const column = columns.find((column2) => column2.name === columnName);
+      if (column) {
+        if (phase === "resize") {
+          if ((0, import_vuu_utils42.isValidNumber)(width)) {
+            setColumnSize(columnName, width);
+          }
+        } else if (phase === "end") {
+          if ((0, import_vuu_utils42.isValidNumber)(width)) {
+            dispatchColumnAction({
+              type: "resizeColumn",
+              phase,
+              column,
+              width
+            });
+            onConfigChange == null ? void 0 : onConfigChange(
+              updateTableConfig(tableConfig, {
+                type: "col-size",
+                column,
+                width
+              })
+            );
+          }
+        } else {
+          setStateColumns(void 0);
+          dispatchColumnAction({
+            type: "resizeColumn",
+            phase,
+            column,
+            width
+          });
+        }
+      } else {
+        throw Error(
+          `useDataTable.handleColumnResize, column ${columnName} not found`
+        );
+      }
+    },
+    [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
+  );
+  const onToggleGroup = (0, import_react55.useCallback)(
+    (row, column) => {
+      const isJson = (0, import_vuu_utils42.isJsonGroup)(column, row);
+      const key = row[KEY6];
+      if (row[IS_EXPANDED5]) {
+        dataSource.closeTreeNode(key, true);
+        if (isJson) {
+          const idx = columns.indexOf(column);
+          const rows = dataSource.getRowsAtDepth(idx + 1);
+          if (!rows.some((row2) => row2[IS_EXPANDED5] || row2[IS_LEAF4])) {
+            dispatchColumnAction({
+              type: "hideColumns",
+              columns: columns.slice(idx + 2)
+            });
+          }
+        }
+      } else {
+        dataSource.openTreeNode(key);
+        if (isJson) {
+          const childRows = dataSource.getChildRows(key);
+          const idx = columns.indexOf(column) + 1;
+          const columnsToShow = [columns[idx]];
+          if (childRows.some((row2) => row2[IS_LEAF4])) {
+            columnsToShow.push(columns[idx + 1]);
+          }
+          if (columnsToShow.some((col) => col.hidden)) {
+            dispatchColumnAction({
+              type: "showColumns",
+              columns: columnsToShow
+            });
+          }
+        }
+      }
+    },
+    [columns, dataSource, dispatchColumnAction]
+  );
+  const { onVerticalScroll } = useVirtualViewport2({
+    columns,
+    getRowAtPosition,
+    setRange,
+    viewportMeasurements
+  });
+  const handleVerticalScroll = (0, import_react55.useCallback)(
+    (scrollTop) => {
+      onVerticalScroll(scrollTop);
+    },
+    [onVerticalScroll]
+  );
+  const { requestScroll, ...scrollProps } = useTableScroll2({
+    maxScrollLeft: viewportMeasurements.maxScrollContainerScrollHorizontal,
+    maxScrollTop: viewportMeasurements.maxScrollContainerScrollVertical,
+    rowHeight,
+    onVerticalScroll: handleVerticalScroll,
+    viewportRowCount: viewportMeasurements.rowCount
+  });
+  const {
+    navigate,
+    onKeyDown: navigationKeyDown,
+    ...containerProps
+  } = useKeyboardNavigation2({
+    columnCount: columns.filter((c) => c.hidden !== true).length,
+    containerRef,
+    requestScroll,
+    rowCount: dataSource == null ? void 0 : dataSource.size,
+    viewportRange: range,
+    viewportRowCount: viewportMeasurements.rowCount
+  });
+  const { onKeyDown: editingKeyDown } = useCellEditing({ navigate });
+  const handleKeyDown = (0, import_react55.useCallback)(
+    (e) => {
+      navigationKeyDown(e);
+      if (!e.defaultPrevented) {
+        editingKeyDown(e);
+      }
+    },
+    [navigationKeyDown, editingKeyDown]
+  );
+  const onContextMenu = useTableContextMenu2({ columns, data });
+  const onHeaderClick = (0, import_react55.useCallback)(
+    (evt) => {
+      var _a;
+      const targetElement = evt.target;
+      const headerCell = targetElement.closest(
+        ".vuuTableNextHeaderCell"
+      );
+      const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
+      const column = (0, import_vuu_utils42.visibleColumnAtIndex)(columns, colIdx);
+      const isAdditive = evt.shiftKey;
+      column && handleSort(column, isAdditive);
+    },
+    [columns, handleSort]
+  );
+  const onRemoveGroupColumn = (0, import_react55.useCallback)(
+    (column) => {
+      if ((0, import_vuu_utils42.isGroupColumn)(column)) {
+        dataSource.groupBy = [];
+      } else {
+        if (dataSource && dataSource.groupBy.includes(column.name)) {
+          dataSource.groupBy = dataSource.groupBy.filter(
+            (columnName) => columnName !== column.name
+          );
+        }
+      }
+    },
+    [dataSource]
+  );
+  const handleSelectionChange = (0, import_react55.useCallback)(
+    (selected) => {
+      dataSource.select(selected);
+      onSelectionChange == null ? void 0 : onSelectionChange(selected);
+    },
+    [dataSource, onSelectionChange]
+  );
+  const selectionHookOnRowClick = useSelection({
+    onSelect,
+    onSelectionChange: handleSelectionChange,
+    selectionModel
+  });
+  const handleRowClick = (0, import_react55.useCallback)(
+    (row, rangeSelect, keepExistingSelection) => {
+      selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
+      onRowClickProp == null ? void 0 : onRowClickProp(row);
+    },
+    [onRowClickProp, selectionHookOnRowClick]
+  );
+  (0, import_react55.useEffect)(() => {
+    dataSource.on("config", (config2, confirmed) => {
+      dispatchColumnAction({
+        type: "tableConfig",
+        ...config2,
+        confirmed
+      });
+    });
+  }, [dataSource, dispatchColumnAction]);
+  const handleDrop = (0, import_react55.useCallback)(
+    (moveFrom, moveTo) => {
+      const column = columns[moveFrom];
+      dispatchColumnAction({
+        type: "moveColumn",
+        column,
+        moveTo
+      });
+    },
+    [columns, dispatchColumnAction]
+  );
+  const handleDataEdited = (0, import_react55.useCallback)(
+    (rowIndex, columnName, value) => {
+      return dataSource.applyEdit(rowIndex, columnName, value);
+    },
+    [dataSource]
+  );
+  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = (0, import_vuu_ui_controls8.useDragDropNext)({
+    allowDragDrop: true,
+    containerRef,
+    // this is for useDragDropNext
+    draggableClassName: `vuuTableNext`,
+    // extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".vuuTableNextHeaderCell"
+  });
+  const headerProps = {
+    onClick: onHeaderClick,
+    onMouseDown: dragDropHookHandleMouseDown,
+    onResize: onHeaderResize
+  };
+  return {
+    ...containerProps,
+    onKeyDown: handleKeyDown,
+    columnMap,
+    columns,
+    data,
+    handleContextMenuAction,
+    headerProps,
+    menuBuilder,
+    onContextMenu,
+    onDataEdited: handleDataEdited,
+    onRemoveGroupColumn,
+    onResize: handleResize,
+    onRowClick: handleRowClick,
+    onToggleGroup,
+    scrollProps,
+    tableAttributes,
+    viewportMeasurements,
+    dragDropHook
+  };
+};
 
 // ../vuu-table/src/table-next/TableNext.tsx
 var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
+var import_core7 = require("@salt-ds/core");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var import_react57 = require("react");
+var classBase19 = "vuuTableNext";
 var { IDX: IDX5, RENDER_IDX: RENDER_IDX2 } = import_vuu_utils43.metadataKeys;
+var TableNext = (0, import_react56.forwardRef)(function TableNext2({
+  Row: Row3 = Row2,
+  availableColumns,
+  className: classNameProp,
+  config,
+  dataSource,
+  id: idProp,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onRowClick: onRowClickProp,
+  onSelect,
+  onSelectionChange,
+  onShowConfigEditor: onShowSettings,
+  renderBufferSize = 0,
+  rowHeight = 20,
+  selectionModel = "extended",
+  showColumnHeaders = true,
+  headerHeight = showColumnHeaders ? 25 : 0,
+  style: styleProp,
+  ...htmlAttributes
+}, forwardedRef) {
+  const id = (0, import_vuu_layout3.useId)(idProp);
+  const containerRef = (0, import_react56.useRef)(null);
+  const {
+    columnMap,
+    columns,
+    data,
+    dragDropHook,
+    handleContextMenuAction,
+    headerProps,
+    onDataEdited,
+    onRemoveGroupColumn,
+    onResize,
+    onRowClick,
+    onToggleGroup,
+    menuBuilder,
+    scrollProps,
+    tableAttributes,
+    viewportMeasurements,
+    ...tableProps
+  } = useTable2({
+    availableColumns,
+    config,
+    containerRef,
+    dataSource,
+    headerHeight,
+    onAvailableColumnsChange,
+    onConfigChange,
+    onFeatureEnabled,
+    onFeatureInvocation,
+    onRowClick: onRowClickProp,
+    onSelect,
+    onSelectionChange,
+    renderBufferSize,
+    rowHeight,
+    selectionModel
+  });
+  const getStyle = () => {
+    return {
+      ...styleProp,
+      "--content-height": `${viewportMeasurements.contentHeight}px`,
+      "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
+      "--content-width": `${viewportMeasurements.contentWidth}px`,
+      "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
+      "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
+      "--header-height": `${headerHeight}px`,
+      "--row-height": `${rowHeight}px`,
+      "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
+      "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
+      "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
+    };
+  };
+  const className = (0, import_classnames23.default)(classBase19, classNameProp, {
+    [`${classBase19}-colLines`]: tableAttributes.columnSeparators,
+    [`${classBase19}-rowLines`]: tableAttributes.rowSeparators,
+    [`${classBase19}-zebra`]: tableAttributes.zebraStripes
+    // [`${classBase}-loading`]: isDataLoading(tableProps.columns),
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_vuu_popups7.ContextMenuProvider,
+    {
+      menuActionHandler: handleContextMenuAction,
+      menuBuilder,
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        import_vuu_layout3.MeasuredContainer,
+        {
+          ...htmlAttributes,
+          className,
+          onResize,
+          ref: (0, import_core7.useForkRef)(containerRef, forwardedRef),
+          style: getStyle(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "div",
+              {
+                className: `${classBase19}-scrollbarContainer`,
+                ref: scrollProps.scrollbarContainerRef,
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${classBase19}-scrollbarContent` })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "div",
+              {
+                className: `${classBase19}-contentContainer`,
+                ref: scrollProps.contentContainerRef,
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...tableProps, className: `${classBase19}-table`, tabIndex: -1, children: [
+                  showColumnHeaders ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${classBase19}-col-headings`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `${classBase19}-col-headers`, role: "row", children: [
+                    columns.filter(import_vuu_utils43.notHidden).map(
+                      (col, i) => (0, import_vuu_utils43.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_react57.createElement)(
+                        GroupHeaderCellNext,
+                        {
+                          ...headerProps,
+                          column: col,
+                          "data-index": i,
+                          key: col.name,
+                          onRemoveColumn: onRemoveGroupColumn
+                        }
+                      ) : /* @__PURE__ */ (0, import_react57.createElement)(
+                        HeaderCell,
+                        {
+                          ...headerProps,
+                          className: (0, import_classnames23.default)({
+                            "vuuDraggable-dragAway": i === dragDropHook.draggedItemIndex
+                          }),
+                          column: col,
+                          "data-index": i,
+                          id: `${id}-col-${i}`,
+                          key: col.name
+                        }
+                      )
+                    ),
+                    dragDropHook.draggable
+                  ] }) }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${classBase19}-body`, children: data.map((data2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    Row3,
+                    {
+                      columnMap,
+                      columns,
+                      onClick: onRowClick,
+                      onDataEdited,
+                      row: data2,
+                      offset: rowHeight * data2[IDX5] + headerHeight,
+                      onToggleGroup,
+                      zebraStripes: tableAttributes.zebraStripes
+                    },
+                    data2[RENDER_IDX2]
+                  )) })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
 
 // ../vuu-table/src/table-next/cell-renderers/dropdown-cell/DropdownCell.tsx
 var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils44 = require("@vuu-ui/vuu-utils");
 var import_react58 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var classBase16 = "vuuTableDropdownCell";
+var classBase20 = "vuuTableDropdownCell";
 var openKeys = ["Enter", " "];
 var DropdownCell = ({ column, columnMap, row }) => {
   var _a, _b, _c;
@@ -3558,7 +5880,7 @@ var DropdownCell = ({ column, columnMap, row }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_vuu_ui_controls9.Dropdown,
     {
-      className: classBase16,
+      className: classBase20,
       onSelectionChange: handleSelectionChange,
       openKeys,
       selected: value,
@@ -3571,11 +5893,11 @@ var DropdownCell = ({ column, columnMap, row }) => {
 
 // ../vuu-table/src/table-next/cell-renderers/input-cell/InputCell.tsx
 var import_vuu_utils45 = require("@vuu-ui/vuu-utils");
-var import_core7 = require("@salt-ds/core");
+var import_core8 = require("@salt-ds/core");
 var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
 var import_classnames24 = __toESM(require("classnames"));
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var classBase17 = "vuuTableInputCell";
+var classBase21 = "vuuTableInputCell";
 var WarnCommit = () => {
   console.warn(
     "onCommit handler has not been provided to InputCell cell renderer"
@@ -3599,14 +5921,14 @@ var InputCell = ({
     onCommit,
     clientSideEditValidationCheck
   });
-  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `${classBase17}-icon`, "data-icon": "error" }) : void 0;
-  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `${classBase17}-icon`, "data-icon": "error" }) : void 0;
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `${classBase21}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `${classBase21}-icon`, "data-icon": "error" }) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_core7.Input,
+    import_core8.Input,
     {
       ...editProps,
-      className: (0, import_classnames24.default)(classBase17, {
-        [`${classBase17}-error`]: warningMessage !== void 0
+      className: (0, import_classnames24.default)(classBase21, {
+        [`${classBase21}-error`]: warningMessage !== void 0
       }),
       endAdornment,
       startAdornment
@@ -3773,7 +6095,7 @@ var useTableSettings = ({
 
 // src/table-settings/TableSettingsPanel.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var classBase18 = "vuuTableSettingsPanel";
+var classBase22 = "vuuTableSettingsPanel";
 var TableSettingsPanel = ({
   availableColumns,
   onAddCalculatedColumn,
@@ -3796,18 +6118,18 @@ var TableSettingsPanel = ({
     onDataSourceConfigChange,
     tableConfig: tableConfigProp
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...htmlAttributes, className: classBase18, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core8.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.FormFieldLabel, { children: "Column Labels" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...htmlAttributes, className: classBase22, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core9.FormFieldLabel, { children: "Column Labels" }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-        import_core8.ToggleButtonGroup,
+        import_core9.ToggleButtonGroup,
         {
           className: "vuuToggleButtonGroup",
           onChange: onChangeColumnLabels,
           value: columnLabelsValue,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              import_core8.ToggleButton,
+              import_core9.ToggleButton,
               {
                 className: "vuuIconToggleButton",
                 "data-icon": "text-strikethrough",
@@ -3815,7 +6137,7 @@ var TableSettingsPanel = ({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              import_core8.ToggleButton,
+              import_core9.ToggleButton,
               {
                 className: "vuuIconToggleButton",
                 "data-icon": "text-Tt",
@@ -3823,7 +6145,7 @@ var TableSettingsPanel = ({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              import_core8.ToggleButton,
+              import_core9.ToggleButton,
               {
                 className: "vuuIconToggleButton",
                 "data-icon": "text-T",
@@ -3834,11 +6156,11 @@ var TableSettingsPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core8.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.FormFieldLabel, { children: "Grid separators" }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core9.FormFieldLabel, { children: "Grid separators" }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "saltToggleButtonGroup vuuToggleButtonGroup saltToggleButtonGroup-horizontal vuuGridSeparators", children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_core8.ToggleButton,
+          import_core9.ToggleButton,
           {
             className: "vuuIconToggleButton",
             "data-icon": "row-striping",
@@ -3848,7 +6170,7 @@ var TableSettingsPanel = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_core8.ToggleButton,
+          import_core9.ToggleButton,
           {
             className: "vuuIconToggleButton",
             "data-icon": "row-lines",
@@ -3858,7 +6180,7 @@ var TableSettingsPanel = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_core8.ToggleButton,
+          import_core9.ToggleButton,
           {
             className: "vuuIconToggleButton",
             "data-icon": "col-lines",
@@ -3869,9 +6191,9 @@ var TableSettingsPanel = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core8.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.FormFieldLabel, { children: "Default Column Width" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.Input, { className: "vuuInput" })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core9.FormFieldLabel, { children: "Default Column Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core9.Input, { className: "vuuInput" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       ColumnList,
@@ -3881,9 +6203,9 @@ var TableSettingsPanel = ({
         onMoveListItem
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `${classBase18}-calculatedButtonbar`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: `${classBase18}-calculatedLabel`, children: "Add calculated column" })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `${classBase22}-calculatedButtonbar`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core9.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: `${classBase22}-calculatedLabel`, children: "Add calculated column" })
     ] })
   ] });
 };