@vuu-ui/vuu-table 0.6.25-debug → 0.6.26-debug

package/cjs/index.js

@@ -39,498 +39,8 @@ module.exports = __toCommonJS(src_exports);
 var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
 var import_core = require("@salt-ds/core");
 
-// src/ColumnBasedTable.tsx
-var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
-var import_react8 = require("react");
-var import_classnames6 = __toESM(require("classnames"));
-
-// src/TableRow.tsx
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
-var import_classnames2 = __toESM(require("classnames"));
-var import_react3 = require("react");
-
-// src/TableCell.tsx
-var import_vuu_utils = require("@vuu-ui/vuu-utils");
-var import_salt_lab = require("@heswell/salt-lab");
-var import_classnames = __toESM(require("classnames"));
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var { KEY } = import_vuu_utils.metadataKeys;
-var TableCell = (0, import_react.memo)(
-  ({ className: classNameProp, column, onClick, row }) => {
-    const labelFieldRef = (0, import_react.useRef)(null);
-    const {
-      align,
-      CellRenderer,
-      key,
-      pin,
-      editable,
-      resizing,
-      valueFormatter
-    } = column;
-    const [editing, setEditing] = (0, import_react.useState)(false);
-    const value = valueFormatter(row[key]);
-    const [editableValue, setEditableValue] = (0, import_react.useState)(value);
-    const handleTitleMouseDown = () => {
-      var _a;
-      (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
-    };
-    const handleTitleKeyDown = (evt) => {
-      if (evt.key === "Enter") {
-        setEditing(true);
-      }
-    };
-    const handleClick = (0, import_react.useCallback)(() => {
-      onClick == null ? void 0 : onClick(column);
-    }, [column, onClick]);
-    const handleEnterEditMode = () => {
-      setEditing(true);
-    };
-    const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
-      var _a;
-      setEditing(false);
-      if (editCancelled) {
-        setEditableValue(originalValue);
-      } else if (finalValue !== originalValue) {
-        setEditableValue(finalValue);
-      }
-      if (allowDeactivation === false) {
-        (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
-      }
-    };
-    const className = (0, import_classnames.default)(classNameProp, {
-      vuuAlignRight: align === "right",
-      vuuPinFloating: pin === "floating",
-      vuuPinLeft: pin === "left",
-      vuuPinRight: pin === "right",
-      "vuuTableCell-resizing": resizing
-    }) || void 0;
-    const pinnedStyle = (0, import_vuu_utils.getColumnPinStyle)(column);
-    return editable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "td",
-      {
-        className,
-        "data-editable": true,
-        style: pinnedStyle,
-        onKeyDown: handleTitleKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_salt_lab.EditableLabel,
-          {
-            editing,
-            value: editableValue,
-            onChange: setEditableValue,
-            onMouseDownCapture: handleTitleMouseDown,
-            onEnterEditMode: handleEnterEditMode,
-            onExitEditMode: handleExitEditMode,
-            onKeyDown: handleTitleKeyDown,
-            ref: labelFieldRef,
-            tabIndex: 0
-          },
-          "title"
-        )
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className, style: pinnedStyle, onClick: handleClick, children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellRenderer, { column, row }) : value });
-  },
-  cellValuesAreEqual
-);
-TableCell.displayName = "TableCell";
-function cellValuesAreEqual(prev, next) {
-  return prev.column === next.column && prev.onClick === next.onClick && prev.row[KEY] === next.row[KEY] && prev.row[prev.column.key] === next.row[next.column.key];
-}
-
-// src/TableGroupCell.tsx
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var { DEPTH, IS_LEAF } = import_vuu_utils2.metadataKeys;
-var getGroupValueAndOffset = (columns, row) => {
-  const { [DEPTH]: depth, [IS_LEAF]: isLeaf } = row;
-  if (isLeaf || depth > columns.length) {
-    return [null, depth === null ? 0 : depth - 1];
-  } else if (depth === 0) {
-    return ["$root", 0];
-  } else {
-    const { key, valueFormatter } = columns[depth - 1];
-    const value = valueFormatter(row[key]);
-    return [value, depth - 1];
-  }
-};
-var TableGroupCell = ({ column, onClick, row }) => {
-  const { columns } = column;
-  const [value, offset] = getGroupValueAndOffset(columns, row);
-  const handleClick = (0, import_react2.useCallback)(() => {
-    onClick == null ? void 0 : onClick(column);
-  }, [column, onClick]);
-  const style = {
-    left: column.pin == "left" ? column.pinnedOffset : void 0
-  };
-  const isLeaf = row[IS_LEAF];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuTableGroupCell-spacer" }, i));
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "td",
-    {
-      className: "vuuTableGroupCell vuuPinLeft",
-      onClick: isLeaf ? void 0 : handleClick,
-      style,
-      children: [
-        spacers,
-        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: value })
-      ]
-    }
-  );
-};
-
-// src/TableRow.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils3.metadataKeys;
-var classBase = "vuuTableRow";
-var TableRow = (0, import_react3.memo)(function Row({
-  columns,
-  height,
-  index,
-  onClick,
-  onToggleGroup,
-  virtualColSpan = 0,
-  row
-}) {
-  const {
-    [IDX]: rowIndex,
-    [IS_EXPANDED]: isExpanded,
-    [SELECTED]: isSelected
-  } = row;
-  const className = (0, import_classnames2.default)(classBase, {
-    [`${classBase}-even`]: rowIndex % 2 === 0,
-    [`${classBase}-expanded`]: isExpanded,
-    [`${classBase}-preSelected`]: isSelected === 2
-  });
-  const offset = rowIndex - index;
-  const handleRowClick = (0, import_react3.useCallback)(
-    (evt) => {
-      const rangeSelect = evt.shiftKey;
-      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
-      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
-    },
-    [onClick, row]
-  );
-  const handleGroupCellClick = (0, import_react3.useCallback)(
-    (column) => {
-      if ((0, import_vuu_utils3.isGroupColumn)(column) || (0, import_vuu_utils3.isJsonGroup)(column, row)) {
-        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
-      }
-    },
-    [onToggleGroup, row]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "tr",
-    {
-      "aria-selected": isSelected === 1 ? true : void 0,
-      "aria-rowindex": rowIndex,
-      className,
-      onClick: handleRowClick,
-      style: {
-        transform: `translate(0px, ${offset * height}px)`
-      },
-      children: [
-        virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: virtualColSpan }) : null,
-        columns.filter(import_vuu_utils3.notHidden).map((column) => {
-          const isGroup = (0, import_vuu_utils3.isGroupColumn)(column);
-          const isJsonCell = (0, import_vuu_utils3.isJsonColumn)(column);
-          const Cell = isGroup ? TableGroupCell : TableCell;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            Cell,
-            {
-              column,
-              onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
-              row
-            },
-            column.name
-          );
-        })
-      ]
-    }
-  );
-});
-
-// src/TableHeaderCell.tsx
-var import_classnames5 = __toESM(require("classnames"));
-var import_react7 = require("react");
-
-// src/ColumnResizer.tsx
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var NOOP = () => void 0;
-var baseClass = "vuuColumnResizer";
-var ColumnResizer = ({
-  onDrag,
-  onDragEnd = NOOP,
-  onDragStart = NOOP
-}) => {
-  const position = (0, import_react4.useRef)(0);
-  const onMouseMove = (0, import_react4.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_react4.useCallback)(
-    (e) => {
-      window.removeEventListener("mouseup", onMouseUp);
-      window.removeEventListener("mousemove", onMouseMove);
-      onDragEnd(e);
-    },
-    [onDragEnd, onMouseMove]
-  );
-  const handleMouseDown = (0, import_react4.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_runtime4.jsx)("div", { className: baseClass, onMouseDown: handleMouseDown });
-};
-
-// src/SortIndicator.tsx
-var import_classnames3 = __toESM(require("classnames"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var classBase2 = "vuuSortIndicator";
-var SortIndicator = ({ sorted }) => {
-  if (!sorted) {
-    return null;
-  }
-  const direction = typeof sorted === "number" ? sorted < 0 ? "dsc" : "asc" : sorted === "A" ? "asc" : "dsc";
-  return typeof sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames3.default)(classBase2, "multi-col", direction), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": `sorted-${direction}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vuuSortPosition", children: Math.abs(sorted) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames3.default)(classBase2, "single-col"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": `sorted-${direction}` }) });
-};
-
-// src/useTableColumnResize.tsx
-var import_react5 = require("react");
-var useTableColumnResize = ({
-  column,
-  onResize,
-  rootRef
-}) => {
-  const widthRef = (0, import_react5.useRef)(0);
-  const isResizing = (0, import_react5.useRef)(false);
-  const { name } = column;
-  const handleResizeStart = (0, import_react5.useCallback)(() => {
-    if (onResize && rootRef.current) {
-      const { width } = rootRef.current.getBoundingClientRect();
-      widthRef.current = Math.round(width);
-      isResizing.current = true;
-      onResize == null ? void 0 : onResize("begin", name);
-    }
-  }, [name, onResize, rootRef]);
-  const handleResize = (0, import_react5.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", name, newWidth);
-            widthRef.current = newWidth;
-          }
-        }
-      }
-    },
-    [name, onResize, rootRef]
-  );
-  const handleResizeEnd = (0, import_react5.useCallback)(() => {
-    if (onResize) {
-      onResize("end", name, widthRef.current);
-      setTimeout(() => {
-        isResizing.current = false;
-      }, 100);
-    }
-  }, [name, onResize]);
-  return {
-    isResizing: isResizing.current,
-    onDrag: handleResize,
-    onDragStart: handleResizeStart,
-    onDragEnd: handleResizeEnd
-  };
-};
-
-// src/TableHeaderCell.tsx
-var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-
-// src/filter-indicator.tsx
-var import_vuu_popups = require("@vuu-ui/vuu-popups");
-var import_classnames4 = __toESM(require("classnames"));
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var FilterIndicator = ({ column, filter }) => {
-  const showContextMenu = (0, import_vuu_popups.useContextMenu)();
-  const handleClick = (0, import_react6.useCallback)(
-    (evt) => {
-      evt.stopPropagation();
-      showContextMenu(evt, "filter", { column, filter });
-    },
-    [column, filter, showContextMenu]
-  );
-  if (!column.filter) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "div",
-    {
-      className: (0, import_classnames4.default)("vuuFilterIndicator"),
-      "data-icon": "filter",
-      onClick: handleClick
-    }
-  );
-};
-
-// src/TableHeaderCell.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var classBase3 = "vuuTable-headerCell";
-var TableHeaderCell = ({
-  column,
-  className: classNameProp,
-  onClick,
-  onDragStart,
-  onResize,
-  ...props
-}) => {
-  const rootRef = (0, import_react7.useRef)(null);
-  const { isResizing, ...resizeProps } = useTableColumnResize({
-    column,
-    onResize,
-    rootRef
-  });
-  const showContextMenu = (0, import_vuu_popups2.useContextMenu)();
-  const dragTimerRef = (0, import_react7.useRef)(null);
-  const handleContextMenu = (e) => {
-    showContextMenu(e, "header", { column });
-  };
-  const handleClick = (0, import_react7.useCallback)(
-    (evt) => !isResizing && (onClick == null ? void 0 : onClick(evt)),
-    [isResizing, onClick]
-  );
-  const handleMouseDown = (0, import_react7.useCallback)(
-    (evt) => {
-      dragTimerRef.current = window.setTimeout(() => {
-        onDragStart == null ? void 0 : onDragStart(evt);
-        dragTimerRef.current = null;
-      }, 250);
-    },
-    [onDragStart]
-  );
-  const handleMouseUp = (0, import_react7.useCallback)(() => {
-    if (dragTimerRef.current !== null) {
-      window.clearTimeout(dragTimerRef.current);
-      dragTimerRef.current = null;
-    }
-  }, []);
-  const className = (0, import_classnames5.default)(classBase3, classNameProp, {
-    vuuPinFloating: column.pin === "floating",
-    vuuPinLeft: column.pin === "left",
-    vuuPinRight: column.pin === "right",
-    vuuEndPin: column.endPin,
-    [`${classBase3}-resizing`]: column.resizing,
-    [`${classBase3}-right`]: column.align === "right"
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "th",
-    {
-      className,
-      ...props,
-      onClick: handleClick,
-      onContextMenu: handleContextMenu,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      ref: rootRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${classBase3}-inner`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FilterIndicator, { column }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase3}-label`, children: column.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SortIndicator, { sorted: column.sorted }),
-        column.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColumnResizer, { ...resizeProps }) : null
-      ] })
-    }
-  );
-};
-
-// src/ColumnBasedTable.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var classBase4 = "vuuTable";
-var { RENDER_IDX } = import_vuu_utils4.metadataKeys;
-var ColumnBasedTable = ({
-  columns,
-  data,
-  headerHeight,
-  onHeaderCellDragEnd,
-  rowHeight
-}) => {
-  const handleDragEnd = (0, import_react8.useCallback)(() => {
-    onHeaderCellDragEnd == null ? void 0 : onHeaderCellDragEnd();
-  }, [onHeaderCellDragEnd]);
-  console.log(`ColumnBasedTable render`);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: columns.map((column, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "table",
-    {
-      className: (0, import_classnames6.default)(`${classBase4}-table`, `${classBase4}-columnBased`, {
-        vuuPinLeft: column.pin === "left"
-      }),
-      "data-idx": i,
-      id: `col-${i}`,
-      style: {
-        width: column.width,
-        left: column.pinnedOffset,
-        "--vuuTableHeaderHeight": `${headerHeight}px`,
-        "--row-height": `${rowHeight}px`
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tbody", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          TableHeaderCell,
-          {
-            column,
-            "data-idx": i,
-            onDragEnd: handleDragEnd
-          },
-          i
-        ) }, "header"),
-        data.map((row, j) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          TableRow,
-          {
-            columns: [column],
-            height: rowHeight,
-            index: j,
-            row
-          },
-          row[RENDER_IDX]
-        )),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { className: "vuuTable-filler" })
-      ] })
-    },
-    column.name
-  )) });
-};
-
 // src/context-menu/buildContextMenuDescriptors.ts
-var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
 var buildContextMenuDescriptors = (dataSource) => (location, options) => {
   const descriptors = [];
   if (dataSource === void 0) {
@@ -634,210 +144,547 @@ function buildSortMenuItems(options, { sort: { sortDefs } }) {
     });
   } else {
     menuItems.push({
-      label: "Sort",
-      children: [
-        { label: "Ascending", action: "sort-asc", options },
-        { label: "Descending", action: "sort-dsc", options }
-      ]
+      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, label = name } = column;
+  return [
+    {
+      label: `Aggregate ${label}`,
+      children: [{ label: "Count", action: "agg-count", options }].concat(
+        (0, import_vuu_utils.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, label = name } = 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;
 }
-function buildAggregationMenuItems(options, dataSource) {
-  const { column } = options;
-  if (column === void 0 || dataSource.groupBy.length === 0) {
-    return [];
+
+// src/context-menu/useContextMenu.ts
+var import_vuu_filters = require("@vuu-ui/vuu-filters");
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var removeFilterColumn = (dataSourceFilter, column) => {
+  if (dataSourceFilter.filterStruct && column) {
+    const [filterStruct, filter] = (0, import_vuu_filters.removeColumnFromFilter)(
+      column,
+      dataSourceFilter.filterStruct
+    );
+    return {
+      filter,
+      filterStruct
+    };
+  } else {
+    return dataSourceFilter;
   }
-  const { name, label = name } = column;
-  return [
-    {
-      label: `Aggregate ${label}`,
-      children: [{ label: "Count", action: "agg-count", options }].concat(
-        (0, import_vuu_utils5.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 { Average, Count, High, Low, Sum } = import_vuu_utils2.AggregationType;
+var useContextMenu = ({
+  dataSource,
+  onPersistentColumnOperation
+}) => {
+  const handleContextMenuAction = (type, options) => {
+    const gridOptions = options;
+    if (gridOptions.column && dataSource) {
+      const { column } = gridOptions;
+      switch (type) {
+        case "sort-asc":
+          return dataSource.sort = (0, import_vuu_utils2.setSortColumn)(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = (0, import_vuu_utils2.setSortColumn)(dataSource.sort, column, "D"), true;
+        case "sort-add-asc":
+          return dataSource.sort = (0, import_vuu_utils2.addSortColumn)(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = (0, import_vuu_utils2.addSortColumn)(dataSource.sort, column, "D"), true;
+        case "group":
+          return dataSource.groupBy = (0, import_vuu_utils2.addGroupColumn)(dataSource.groupBy, column), true;
+        case "group-add":
+          return dataSource.groupBy = (0, import_vuu_utils2.addGroupColumn)(dataSource.groupBy, column), true;
+        case "column-hide":
+          return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
+        case "column-remove":
+          return dataSource.columns = dataSource.columns.filter((name) => name !== 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_utils2.setAggregations)(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Count), true;
+        case "agg-sum":
+          return dataSource.aggregations = (0, import_vuu_utils2.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;
+        default:
+      }
     }
-  ];
+    return false;
+  };
+  return handleContextMenuAction;
+};
+
+// src/RowBasedTable.tsx
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_react9 = require("react");
+
+// src/TableRow.tsx
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_classnames2 = __toESM(require("classnames"));
+var import_react3 = require("react");
+
+// src/TableCell.tsx
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_salt_lab = require("@heswell/salt-lab");
+var import_classnames = __toESM(require("classnames"));
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { KEY } = import_vuu_utils3.metadataKeys;
+var TableCell = (0, import_react.memo)(
+  ({
+    className: classNameProp,
+    column,
+    columnMap,
+    onClick,
+    row
+  }) => {
+    const labelFieldRef = (0, import_react.useRef)(null);
+    const {
+      align,
+      CellRenderer,
+      key,
+      pin,
+      editable,
+      resizing,
+      valueFormatter
+    } = column;
+    const [editing, setEditing] = (0, import_react.useState)(false);
+    const value = valueFormatter(row[key]);
+    const [editableValue, setEditableValue] = (0, import_react.useState)(value);
+    const handleTitleMouseDown = () => {
+      var _a;
+      (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+    };
+    const handleTitleKeyDown = (evt) => {
+      if (evt.key === "Enter") {
+        setEditing(true);
+      }
+    };
+    const handleClick = (0, import_react.useCallback)(() => {
+      onClick == null ? void 0 : onClick(column);
+    }, [column, onClick]);
+    const handleEnterEditMode = () => {
+      setEditing(true);
+    };
+    const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
+      var _a;
+      setEditing(false);
+      if (editCancelled) {
+        setEditableValue(originalValue);
+      } else if (finalValue !== originalValue) {
+        setEditableValue(finalValue);
+      }
+      if (allowDeactivation === false) {
+        (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    const className = (0, import_classnames.default)(classNameProp, {
+      vuuAlignRight: align === "right",
+      vuuPinFloating: pin === "floating",
+      vuuPinLeft: pin === "left",
+      vuuPinRight: pin === "right",
+      "vuuTableCell-resizing": resizing
+    }) || void 0;
+    const style = (0, import_vuu_utils3.getColumnStyle)(column);
+    return editable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className,
+        "data-editable": true,
+        role: "cell",
+        style,
+        onKeyDown: handleTitleKeyDown,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_salt_lab.EditableLabel,
+          {
+            editing,
+            value: editableValue,
+            onChange: setEditableValue,
+            onMouseDownCapture: handleTitleMouseDown,
+            onEnterEditMode: handleEnterEditMode,
+            onExitEditMode: handleExitEditMode,
+            onKeyDown: handleTitleKeyDown,
+            ref: labelFieldRef,
+            tabIndex: 0
+          },
+          "title"
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className,
+        role: "cell",
+        style,
+        onClick: handleClick,
+        children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellRenderer, { column, columnMap, row }) : value
+      }
+    );
+  },
+  cellValuesAreEqual
+);
+TableCell.displayName = "TableCell";
+function cellValuesAreEqual(prev, next) {
+  return prev.column === next.column && prev.onClick === next.onClick && prev.row[KEY] === next.row[KEY] && prev.row[prev.column.key] === next.row[next.column.key];
 }
-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 [];
+
+// src/TableGroupCell.tsx
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var { DEPTH, IS_LEAF } = import_vuu_utils4.metadataKeys;
+var getGroupValueAndOffset = (columns, row) => {
+  const { [DEPTH]: depth, [IS_LEAF]: isLeaf } = row;
+  if (isLeaf || depth > columns.length) {
+    return [null, depth === null ? 0 : depth - 1];
+  } else if (depth === 0) {
+    return ["$root", 0];
+  } else {
+    const { key, valueFormatter } = columns[depth - 1];
+    const value = valueFormatter(row[key]);
+    return [value, depth - 1];
   }
-  const { pin } = column;
-  const menuItems = [
+};
+var TableGroupCell = ({ column, onClick, row }) => {
+  const { columns } = column;
+  const [value, offset] = getGroupValueAndOffset(columns, row);
+  const handleClick = (0, import_react2.useCallback)(() => {
+    onClick == null ? void 0 : onClick(column);
+  }, [column, onClick]);
+  const style = (0, import_vuu_utils4.getColumnStyle)(column);
+  const isLeaf = row[IS_LEAF];
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuTableGroupCell-spacer" }, i));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
     {
-      label: `Hide column`,
-      action: "column-hide",
-      options
+      className: "vuuTableGroupCell vuuPinLeft",
+      onClick: isLeaf ? void 0 : handleClick,
+      role: "cell",
+      style,
+      children: [
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: value })
+      ]
+    }
+  );
+};
+
+// src/TableRow.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils5.metadataKeys;
+var classBase = "vuuTableRow";
+var TableRow = (0, import_react3.memo)(function Row({
+  columnMap,
+  columns,
+  offset,
+  onClick,
+  onToggleGroup,
+  virtualColSpan = 0,
+  row
+}) {
+  const {
+    [IDX]: rowIndex,
+    [IS_EXPANDED]: isExpanded,
+    [SELECTED]: isSelected
+  } = row;
+  const className = (0, import_classnames2.default)(classBase, {
+    [`${classBase}-even`]: rowIndex % 2 === 0,
+    [`${classBase}-expanded`]: isExpanded,
+    [`${classBase}-preSelected`]: isSelected === 2
+  });
+  const handleRowClick = (0, import_react3.useCallback)(
+    (evt) => {
+      const rangeSelect = evt.shiftKey;
+      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
     },
+    [onClick, row]
+  );
+  const handleGroupCellClick = (0, import_react3.useCallback)(
+    (column) => {
+      if ((0, import_vuu_utils5.isGroupColumn)(column) || (0, import_vuu_utils5.isJsonGroup)(column, row)) {
+        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+      }
+    },
+    [onToggleGroup, row]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
     {
-      label: `Remove column`,
-      action: "column-remove",
-      options
+      "aria-selected": isSelected === 1 ? true : void 0,
+      "aria-rowindex": rowIndex,
+      className,
+      onClick: handleRowClick,
+      role: "row",
+      style: {
+        transform: `translate3d(0px, ${offset}px, 0px)`
+      },
+      children: [
+        virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "cell", style: { width: virtualColSpan } }) : null,
+        columns.filter(import_vuu_utils5.notHidden).map((column) => {
+          const isGroup = (0, import_vuu_utils5.isGroupColumn)(column);
+          const isJsonCell = (0, import_vuu_utils5.isJsonColumn)(column);
+          const Cell = isGroup ? TableGroupCell : TableCell;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Cell,
+            {
+              column,
+              columnMap,
+              onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+              row
+            },
+            column.name
+          );
+        })
+      ]
     }
-  ];
-  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)]
+  );
+});
+
+// src/TableGroupHeaderCell.tsx
+var import_classnames3 = __toESM(require("classnames"));
+var import_react6 = require("react");
+
+// src/ColumnResizer.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var NOOP = () => void 0;
+var baseClass = "vuuColumnResizer";
+var ColumnResizer = ({
+  onDrag,
+  onDragEnd = NOOP,
+  onDragStart = NOOP
+}) => {
+  const position = (0, import_react4.useRef)(0);
+  const onMouseMove = (0, import_react4.useCallback)(
+    (e) => {
+      if (e.stopPropagation) {
+        e.stopPropagation();
       }
-    );
-  } else if (pin === "right") {
-    menuItems.push(
-      { label: "Unpin column", action: "column-unpin", options },
-      {
-        label: `Pin column`,
-        children: [pinLeft(options), pinFloating(options)]
+      if (e.preventDefault) {
+        e.preventDefault();
       }
-    );
-  } else if (pin === "floating") {
-    menuItems.push(
-      { label: "Unpin column", action: "column-unpin", options },
-      {
-        label: `Pin column`,
-        children: [pinLeft(options), pinRight(options)]
+      const x = Math.round(e.clientX);
+      const moveBy = x - position.current;
+      position.current = x;
+      if (moveBy !== 0) {
+        onDrag(e, moveBy);
       }
-    );
-  }
-  return menuItems;
-}
-function buildGroupMenuItems(options, { groupBy }) {
-  const { column } = options;
-  const menuItems = [];
-  if (column === void 0) {
-    return menuItems;
-  }
-  const { name, label = name } = 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;
-}
-
-// src/context-menu/useContextMenu.ts
-var import_vuu_filters = require("@vuu-ui/vuu-filters");
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
-var removeFilterColumn = (dataSourceFilter, column) => {
-  if (dataSourceFilter.filterStruct && column) {
-    const [filterStruct, filter] = (0, import_vuu_filters.removeColumnFromFilter)(
-      column,
-      dataSourceFilter.filterStruct
-    );
-    return {
-      filter,
-      filterStruct
-    };
-  } else {
-    return dataSourceFilter;
-  }
+    },
+    [onDrag]
+  );
+  const onMouseUp = (0, import_react4.useCallback)(
+    (e) => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      onDragEnd(e);
+    },
+    [onDragEnd, onMouseMove]
+  );
+  const handleMouseDown = (0, import_react4.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_runtime4.jsx)("div", { className: baseClass, "data-align": "end", onMouseDown: handleMouseDown });
 };
-var { Average, Count, High, Low, Sum } = import_vuu_utils6.AggregationType;
-var useContextMenu3 = ({
-  dataSource,
-  onPersistentColumnOperation
+
+// src/useTableColumnResize.tsx
+var import_react5 = require("react");
+var useTableColumnResize = ({
+  column,
+  onResize,
+  rootRef
 }) => {
-  const handleContextMenuAction = (type, options) => {
-    const gridOptions = options;
-    if (gridOptions.column && dataSource) {
-      const { column } = gridOptions;
-      switch (type) {
-        case "sort-asc":
-          return dataSource.sort = (0, import_vuu_utils6.setSortColumn)(dataSource.sort, column, "A"), true;
-        case "sort-dsc":
-          return dataSource.sort = (0, import_vuu_utils6.setSortColumn)(dataSource.sort, column, "D"), true;
-        case "sort-add-asc":
-          return dataSource.sort = (0, import_vuu_utils6.addSortColumn)(dataSource.sort, column, "A"), true;
-        case "sort-add-dsc":
-          return dataSource.sort = (0, import_vuu_utils6.addSortColumn)(dataSource.sort, column, "D"), true;
-        case "group":
-          return dataSource.groupBy = (0, import_vuu_utils6.addGroupColumn)(dataSource.groupBy, column), true;
-        case "group-add":
-          return dataSource.groupBy = (0, import_vuu_utils6.addGroupColumn)(dataSource.groupBy, column), true;
-        case "column-hide":
-          return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
-        case "column-remove":
-          return dataSource.columns = dataSource.columns.filter((name) => name !== 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_utils6.setAggregations)(dataSource.aggregations, column, Average), true;
-        case "agg-high":
-          return dataSource.aggregations = (0, import_vuu_utils6.setAggregations)(dataSource.aggregations, column, High), true;
-        case "agg-low":
-          return dataSource.aggregations = (0, import_vuu_utils6.setAggregations)(dataSource.aggregations, column, Low), true;
-        case "agg-count":
-          return dataSource.aggregations = (0, import_vuu_utils6.setAggregations)(dataSource.aggregations, column, Count), true;
-        case "agg-sum":
-          return dataSource.aggregations = (0, import_vuu_utils6.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;
-        default:
+  const widthRef = (0, import_react5.useRef)(0);
+  const isResizing = (0, import_react5.useRef)(false);
+  const { name } = column;
+  const handleResizeStart = (0, import_react5.useCallback)(() => {
+    if (onResize && rootRef.current) {
+      const { width } = rootRef.current.getBoundingClientRect();
+      widthRef.current = Math.round(width);
+      isResizing.current = true;
+      onResize == null ? void 0 : onResize("begin", name);
+    }
+  }, [name, onResize, rootRef]);
+  const handleResize = (0, import_react5.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", name, newWidth);
+            widthRef.current = newWidth;
+          }
+        }
       }
+    },
+    [name, onResize, rootRef]
+  );
+  const handleResizeEnd = (0, import_react5.useCallback)(() => {
+    if (onResize) {
+      onResize("end", name, widthRef.current);
+      setTimeout(() => {
+        isResizing.current = false;
+      }, 100);
     }
-    return false;
+  }, [name, onResize]);
+  return {
+    isResizing: isResizing.current,
+    onDrag: handleResize,
+    onDragStart: handleResizeStart,
+    onDragEnd: handleResizeEnd
   };
-  return handleContextMenuAction;
 };
 
-// src/RowBasedTable.tsx
-var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
-var import_react10 = require("react");
-
 // src/TableGroupHeaderCell.tsx
-var import_classnames7 = __toESM(require("classnames"));
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase5 = "vuuTable-groupHeaderCell";
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var classBase2 = "vuuTable-groupHeaderCell";
+var RemoveButton = ({
+  column,
+  onClick,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      ...htmlAttributes,
+      className: `${classBase2}-close`,
+      "data-icon": "close-circle",
+      onClick: () => onClick == null ? void 0 : onClick(column)
+    }
+  );
+};
 var ColHeader = (props) => {
-  const { column, className, onRemoveColumn } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_classnames7.default)(`${classBase5}-col`, className), role: "columnheader", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${classBase5}-label`, children: column.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "span",
-      {
-        className: `${classBase5}-close`,
-        "data-icon": "close-circle",
-        onClick: () => onRemoveColumn == null ? void 0 : onRemoveColumn(column)
-      }
-    )
+  const { children, column, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames3.default)(`${classBase2}-col`, className), role: "columnheader", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${classBase2}-label`, children: column.name }),
+    children
   ] });
 };
 var TableGroupHeaderCell = ({
@@ -847,40 +694,153 @@ var TableGroupHeaderCell = ({
   onResize,
   ...props
 }) => {
-  const rootRef = (0, import_react9.useRef)(null);
+  const rootRef = (0, import_react6.useRef)(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
     column: groupColumn,
     onResize,
     rootRef
   });
-  const className = (0, import_classnames7.default)(classBase5, classNameProp, {
+  const className = (0, import_classnames3.default)(classBase2, classNameProp, {
     vuuPinLeft: groupColumn.pin === "left",
-    [`${classBase5}-right`]: groupColumn.align === "right",
-    [`${classBase5}-resizing`]: groupColumn.resizing,
-    [`${classBase5}-pending`]: groupColumn.groupConfirmed === false
+    [`${classBase2}-right`]: groupColumn.align === "right",
+    [`${classBase2}-resizing`]: groupColumn.resizing,
+    [`${classBase2}-pending`]: groupColumn.groupConfirmed === false
   });
   const { columns } = groupColumn;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { className, ref: rootRef, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${classBase5}-inner`, children: [
-    columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      ColHeader,
-      {
-        column,
-        onRemoveColumn
-      },
-      column.key
-    )),
-    groupColumn.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColumnResizer, { ...resizeProps }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, ref: rootRef, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${classBase2}-inner`, children: [
+    columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColHeader, { column, children: columns.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RemoveButton, { column, onClick: onRemoveColumn }) : null }, column.key)),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RemoveButton, { "data-align": "end", onClick: onRemoveColumn }),
+    groupColumn.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColumnResizer, { ...resizeProps }) : null
   ] }) });
 };
 
+// src/TableHeaderCell.tsx
+var import_classnames6 = __toESM(require("classnames"));
+var import_react8 = require("react");
+
+// src/SortIndicator.tsx
+var import_classnames4 = __toESM(require("classnames"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var classBase3 = "vuuSortIndicator";
+var SortIndicator = ({ sorted }) => {
+  if (!sorted) {
+    return null;
+  }
+  const direction = typeof sorted === "number" ? sorted < 0 ? "dsc" : "asc" : sorted === "A" ? "asc" : "dsc";
+  return typeof sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_classnames4.default)(classBase3, "multi-col", direction), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-icon": `sorted-${direction}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vuuSortPosition", children: Math.abs(sorted) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_classnames4.default)(classBase3, "single-col"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-icon": `sorted-${direction}` }) });
+};
+
+// src/TableHeaderCell.tsx
+var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
+
+// src/filter-indicator.tsx
+var import_vuu_popups = require("@vuu-ui/vuu-popups");
+var import_classnames5 = __toESM(require("classnames"));
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FilterIndicator = ({ column, filter }) => {
+  const showContextMenu = (0, import_vuu_popups.useContextMenu)();
+  const handleClick = (0, import_react7.useCallback)(
+    (evt) => {
+      evt.stopPropagation();
+      showContextMenu(evt, "filter", { column, filter });
+    },
+    [column, filter, showContextMenu]
+  );
+  if (!column.filter) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: (0, import_classnames5.default)("vuuFilterIndicator"),
+      "data-icon": "filter",
+      onClick: handleClick
+    }
+  );
+};
+
+// src/TableHeaderCell.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var classBase4 = "vuuTable-headerCell";
+var TableHeaderCell = ({
+  column,
+  className: classNameProp,
+  onClick,
+  onDragStart,
+  onResize,
+  ...props
+}) => {
+  const rootRef = (0, import_react8.useRef)(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column,
+    onResize,
+    rootRef
+  });
+  const showContextMenu = (0, import_vuu_popups2.useContextMenu)();
+  const dragTimerRef = (0, import_react8.useRef)(null);
+  const handleContextMenu = (e) => {
+    showContextMenu(e, "header", { column });
+  };
+  const handleClick = (0, import_react8.useCallback)(
+    (evt) => !isResizing && (onClick == null ? void 0 : onClick(evt)),
+    [isResizing, onClick]
+  );
+  const handleMouseDown = (0, import_react8.useCallback)(
+    (evt) => {
+      dragTimerRef.current = window.setTimeout(() => {
+        onDragStart == null ? void 0 : onDragStart(evt);
+        dragTimerRef.current = null;
+      }, 500);
+    },
+    [onDragStart]
+  );
+  const handleMouseUp = (0, import_react8.useCallback)(() => {
+    if (dragTimerRef.current !== null) {
+      window.clearTimeout(dragTimerRef.current);
+      dragTimerRef.current = null;
+    }
+  }, []);
+  const className = (0, import_classnames6.default)(classBase4, classNameProp, {
+    vuuPinFloating: column.pin === "floating",
+    vuuPinLeft: column.pin === "left",
+    vuuPinRight: column.pin === "right",
+    vuuEndPin: column.endPin,
+    [`${classBase4}-resizing`]: column.resizing,
+    [`${classBase4}-right`]: column.align === "right"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className,
+      ...props,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      ref: rootRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `${classBase4}-inner`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FilterIndicator, { column }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase4}-label`, children: column.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SortIndicator, { sorted: column.sorted }),
+        column.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColumnResizer, { ...resizeProps }) : null
+      ] })
+    }
+  );
+};
+
 // src/RowBasedTable.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var classBase6 = "vuuTable";
-var { RENDER_IDX: RENDER_IDX2 } = import_vuu_utils7.metadataKeys;
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase5 = "vuuTable";
+var { RENDER_IDX } = import_vuu_utils6.metadataKeys;
 var RowBasedTable = ({
   columns,
   columnsWithinViewport,
   data,
+  getRowOffset,
   headings,
   onColumnResize,
   onHeaderCellDragStart,
@@ -889,20 +849,21 @@ var RowBasedTable = ({
   onRowClick,
   onSort,
   onToggleGroup,
+  tableId,
   virtualColSpan = 0,
-  rowCount,
-  rowHeight
+  rowCount
 }) => {
-  const handleDragStart = (0, import_react10.useCallback)(
+  const handleDragStart = (0, import_react9.useCallback)(
     (evt) => {
       onHeaderCellDragStart == null ? void 0 : onHeaderCellDragStart(evt);
     },
     [onHeaderCellDragStart]
   );
-  const visibleColumns = (0, import_react10.useMemo)(() => {
-    return columns.filter(import_vuu_utils7.notHidden);
+  const visibleColumns = (0, import_react9.useMemo)(() => {
+    return columns.filter(import_vuu_utils6.notHidden);
   }, [columns]);
-  const handleHeaderClick = (0, import_react10.useCallback)(
+  const columnMap = (0, import_react9.useMemo)(() => (0, import_vuu_utils6.buildColumnMap)(columns), [columns]);
+  const handleHeaderClick = (0, import_react9.useCallback)(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -910,71 +871,78 @@ var RowBasedTable = ({
         ".vuuTable-headerCell"
       );
       const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.idx) != null ? _a : "-1");
-      const column = (0, import_vuu_utils7.visibleColumnAtIndex)(columns, colIdx);
+      const column = (0, import_vuu_utils6.visibleColumnAtIndex)(columns, colIdx);
       const isAdditive = evt.shiftKey;
       column && onSort(column, isAdditive);
     },
     [columns, onSort]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { "aria-rowcount": rowCount, className: `${classBase6}-table`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("colgroup", { children: visibleColumns.map((column, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("col", { width: `${column.width}px` }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("thead", { children: [
-      headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { className: "vuuTable-heading", children: colHeaders.map(({ label, span }, j) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { colSpan: span, className: "vuuTable-headingCell", children: label }, j)) }, i)),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { children: visibleColumns.map((column, i) => {
-        const style = (0, import_vuu_utils7.getColumnPinStyle)(column);
-        return (0, import_vuu_utils7.isGroupColumn)(column) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "aria-rowcount": rowCount, className: `${classBase5}-table`, role: "table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${classBase5}-headers`, role: "rowGroup", children: [
+      headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "row", children: visibleColumns.map((column, i) => {
+        const style = (0, import_vuu_utils6.getColumnStyle)(column);
+        return (0, import_vuu_utils6.isGroupColumn)(column) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           TableGroupHeaderCell,
           {
             column,
             "data-idx": i,
             onRemoveColumn: onRemoveColumnFromGroupBy,
             onResize: onColumnResize,
+            role: "columnHeader",
             style
           },
           i
-        ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           TableHeaderCell,
           {
             column,
             "data-idx": i,
+            id: `${tableId}-${i}`,
             onClick: handleHeaderClick,
             onDragStart: handleDragStart,
             onResize: onColumnResize,
+            role: "columnHeader",
             style
           },
           i
         );
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tbody", { onContextMenu, children: [
-      data == null ? void 0 : data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        TableRow,
-        {
-          columns: columnsWithinViewport,
-          height: rowHeight,
-          index: i,
-          onClick: onRowClick,
-          virtualColSpan,
-          onToggleGroup,
-          row
-        },
-        row[RENDER_IDX2]
-      )),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { className: `${classBase6}-filler` })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: `${classBase5}-body`,
+        onContextMenu,
+        role: "rowGroup",
+        children: data == null ? void 0 : data.map((row) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          TableRow,
+          {
+            columnMap,
+            columns: columnsWithinViewport,
+            offset: getRowOffset(row),
+            onClick: onRowClick,
+            virtualColSpan,
+            onToggleGroup,
+            row
+          },
+          row[RENDER_IDX]
+        ))
+      }
+    )
   ] });
 };
 
-// src/useDataTable.ts
+// src/useTable.ts
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
 var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
-var import_react21 = require("react");
+var import_react20 = require("react");
 
 // src/useDataSource.ts
 var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
-var import_react11 = require("react");
-var { SELECTED: SELECTED2 } = import_vuu_utils8.metadataKeys;
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_react10 = require("react");
+var { SELECTED: SELECTED2 } = import_vuu_utils7.metadataKeys;
 function useDataSource({
   dataSource,
   onConfigChange,
@@ -986,18 +954,18 @@ function useDataSource({
   renderBufferSize = 0,
   viewportRowCount
 }) {
-  const [, forceUpdate] = (0, import_react11.useState)(null);
-  const isMounted = (0, import_react11.useRef)(true);
-  const hasUpdated = (0, import_react11.useRef)(false);
-  const rangeRef = (0, import_react11.useRef)({ from: 0, to: 0 });
-  const rafHandle = (0, import_react11.useRef)(null);
-  const data = (0, import_react11.useRef)([]);
-  const dataWindow = (0, import_react11.useMemo)(
-    () => new MovingWindow((0, import_vuu_utils8.getFullRange)(range)),
+  const [, forceUpdate] = (0, import_react10.useState)(null);
+  const isMounted = (0, import_react10.useRef)(true);
+  const hasUpdated = (0, import_react10.useRef)(false);
+  const rangeRef = (0, import_react10.useRef)({ from: 0, to: 0 });
+  const rafHandle = (0, import_react10.useRef)(null);
+  const data = (0, import_react10.useRef)([]);
+  const dataWindow = (0, import_react10.useMemo)(
+    () => new MovingWindow((0, import_vuu_utils7.getFullRange)(range)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const setData = (0, import_react11.useCallback)(
+  const setData = (0, import_react10.useCallback)(
     (updates) => {
       for (const row of updates) {
         dataWindow.add(row);
@@ -1007,7 +975,7 @@ function useDataSource({
     },
     [dataWindow]
   );
-  const datasourceMessageHandler = (0, import_react11.useCallback)(
+  const datasourceMessageHandler = (0, import_react10.useCallback)(
     (message) => {
       if (message.type === "subscribed") {
         onSubscribed == null ? void 0 : onSubscribed(message);
@@ -1039,7 +1007,7 @@ function useDataSource({
       setData
     ]
   );
-  (0, import_react11.useEffect)(
+  (0, import_react10.useEffect)(
     () => () => {
       if (rafHandle.current) {
         cancelAnimationFrame(rafHandle.current);
@@ -1049,7 +1017,7 @@ function useDataSource({
     },
     []
   );
-  const refreshIfUpdated = (0, import_react11.useCallback)(() => {
+  const refreshIfUpdated = (0, import_react10.useCallback)(() => {
     if (isMounted.current) {
       if (hasUpdated.current) {
         forceUpdate({});
@@ -1058,33 +1026,33 @@ function useDataSource({
       rafHandle.current = requestAnimationFrame(refreshIfUpdated);
     }
   }, [forceUpdate]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     rafHandle.current = requestAnimationFrame(refreshIfUpdated);
   }, [refreshIfUpdated]);
-  const adjustRange = (0, import_react11.useCallback)(
+  const adjustRange = (0, import_react10.useCallback)(
     (rowCount) => {
       const { from } = dataSource.range;
       const rowRange = { from, to: from + rowCount };
-      const fullRange = (0, import_vuu_utils8.getFullRange)(rowRange, renderBufferSize);
+      const fullRange = (0, import_vuu_utils7.getFullRange)(rowRange, renderBufferSize);
+      dataWindow.setRange(fullRange);
       dataSource.range = rangeRef.current = fullRange;
       dataSource.emit("range", rowRange);
-      dataWindow.setRange(fullRange);
     },
     [dataSource, dataWindow, renderBufferSize]
   );
-  const setRange = (0, import_react11.useCallback)(
+  const setRange = (0, import_react10.useCallback)(
     (range2) => {
-      const fullRange = (0, import_vuu_utils8.getFullRange)(range2, renderBufferSize);
-      dataSource.range = rangeRef.current = fullRange;
+      const fullRange = (0, import_vuu_utils7.getFullRange)(range2, renderBufferSize);
       dataWindow.setRange(fullRange);
+      dataSource.range = rangeRef.current = fullRange;
       dataSource.emit("range", range2);
     },
     [dataSource, dataWindow, renderBufferSize]
   );
-  const getSelectedRows = (0, import_react11.useCallback)(() => {
+  const getSelectedRows = (0, import_react10.useCallback)(() => {
     return dataWindow.getSelectedRows();
   }, [dataWindow]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     dataSource == null ? void 0 : dataSource.subscribe(
       {
         range: rangeRef.current
@@ -1092,7 +1060,7 @@ function useDataSource({
       datasourceMessageHandler
     );
   }, [dataSource, datasourceMessageHandler, onConfigChange]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     adjustRange(viewportRowCount);
   }, [adjustRange, viewportRowCount]);
   return {
@@ -1112,7 +1080,7 @@ var MovingWindow = class {
       }
       this.rowCount = rowCount;
     };
-    this.range = new import_vuu_utils8.WindowRange(from, to);
+    this.range = new import_vuu_utils7.WindowRange(from, to);
     this.data = new Array(to - from);
     this.rowCount = 0;
   }
@@ -1140,7 +1108,7 @@ var MovingWindow = class {
   setRange({ from, to }) {
     if (from !== this.range.from || to !== this.range.to) {
       const [overlapFrom, overlapTo] = this.range.overlap(from, to);
-      const newData = new Array(to - from);
+      const newData = new Array(Math.max(0, to - from));
       for (let i = overlapFrom; i < overlapTo; i++) {
         const data = this.getAtIndex(i);
         if (data) {
@@ -1160,76 +1128,58 @@ var MovingWindow = class {
 
 // src/useDraggableColumn.ts
 var import_salt_lab2 = require("@heswell/salt-lab");
-var import_react12 = require("react");
-var useDraggableColumn = ({
-  onDrop,
-  tableContainerRef,
-  tableLayout: tableLayoutProp
-}) => {
-  const [tableLayout, setTableLayout] = (0, import_react12.useState)(tableLayoutProp);
-  const mousePosRef = (0, import_react12.useRef)();
-  const handleDropSettle = (0, import_react12.useCallback)(() => {
+var import_react11 = require("react");
+var useDraggableColumn = ({ onDrop }) => {
+  const mousePosRef = (0, import_react11.useRef)();
+  const containerRef = (0, import_react11.useRef)(null);
+  const handleDropSettle = (0, import_react11.useCallback)(() => {
     console.log(`handleDropSettle`);
     mousePosRef.current = void 0;
-    setTableLayout("row");
+    containerRef.current = null;
   }, []);
   const { draggable, draggedItemIndex, onMouseDown } = (0, import_salt_lab2.useDragDrop)({
+    // allowDragDrop: "drop-indicator",
     allowDragDrop: true,
-    draggableClassName: "table-column",
+    draggableClassName: "vuuTable-headerCell",
     orientation: "horizontal",
-    containerRef: tableContainerRef,
-    itemQuery: ".vuuTable-table",
+    containerRef,
+    itemQuery: ".vuuTable-headerCell",
     onDrop,
     onDropSettle: handleDropSettle
   });
-  const handleHeaderCellDragStart = (0, import_react12.useCallback)((evt) => {
-    const { clientX, clientY } = evt;
-    console.log(
-      `useDraggableColumn handleHeaderCellDragStart means mouseDown fired on a column in RowBasedTable`
-    );
-    const sourceElement = evt.target;
-    const thElement = sourceElement.closest(".vuuTable-headerCell");
-    const {
-      dataset: { idx = "-1" }
-    } = thElement;
-    mousePosRef.current = {
-      clientX,
-      clientY,
-      idx
-    };
-    setTableLayout("column");
-  }, []);
-  (0, import_react12.useLayoutEffect)(() => {
-    var _a;
-    if (tableLayout === "column" && mousePosRef.current && !draggable) {
-      const { clientX, clientY, idx } = mousePosRef.current;
-      const target = (_a = tableContainerRef.current) == null ? void 0 : _a.querySelector(
-        `.vuuTable-table[data-idx="${idx}"]`
+  const onHeaderCellDragStart = (0, import_react11.useCallback)(
+    (evt) => {
+      const { clientX, clientY } = evt;
+      console.log(
+        `useDraggableColumn handleHeaderCellDragStart means mouseDown fired on a column in RowBasedTable`
       );
-      if (target) {
-        const evt = {
-          persist: () => void 0,
-          nativeEvent: {
-            clientX,
-            clientY,
-            target
-          }
-        };
-        onMouseDown == null ? void 0 : onMouseDown(evt);
-      }
-    }
-  }, [draggable, onMouseDown, tableContainerRef, tableLayout]);
+      const sourceElement = evt.target;
+      const columnHeaderCell = sourceElement.closest(".vuuTable-headerCell");
+      containerRef.current = columnHeaderCell == null ? void 0 : columnHeaderCell.closest(
+        "[role='row']"
+      );
+      const {
+        dataset: { idx = "-1" }
+      } = columnHeaderCell;
+      mousePosRef.current = {
+        clientX,
+        clientY,
+        idx
+      };
+      onMouseDown == null ? void 0 : onMouseDown(evt);
+    },
+    [onMouseDown]
+  );
   return {
     draggable,
     draggedItemIndex,
-    tableLayout,
-    onHeaderCellDragStart: tableLayout === "row" ? handleHeaderCellDragStart : void 0
+    onHeaderCellDragStart
   };
 };
 
 // src/useKeyboardNavigation.ts
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
-var import_react13 = require("react");
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_react12 = require("react");
 
 // src/keyUtils.ts
 function union(set1, ...sets) {
@@ -1290,8 +1240,8 @@ var isNavigationKey = (key) => {
 };
 
 // src/useKeyboardNavigation.ts
-var headerCellQuery = (colIdx) => `thead th:nth-child(${colIdx + 1})`;
-var dataCellQuery = (rowIdx, colIdx) => `tbody > tr[aria-rowindex='${rowIdx}'] > td:nth-child(${colIdx + 1})`;
+var headerCellQuery = (colIdx) => `.vuuTable-headers .vuuTable-headerCell:nth-child(${colIdx + 1})`;
+var dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx}'] > [role='cell']:nth-child(${colIdx + 1})`;
 var NULL_CELL_POS = [-1, -1];
 function nextCellPos(key, [rowIdx, colIdx], columnCount, rowCount) {
   if (key === ArrowUp) {
@@ -1334,10 +1284,10 @@ var useKeyboardNavigation = ({
 }) => {
   var _a;
   const { from: viewportFirstRow, to: viewportLastRow } = viewportRange;
-  const focusedCellPos = (0, import_react13.useRef)([-1, -1]);
-  const focusableCell = (0, import_react13.useRef)();
-  const activeCellPos = (0, import_react13.useRef)([-1, 0]);
-  const getTableCell = (0, import_react13.useCallback)(
+  const focusedCellPos = (0, import_react12.useRef)([-1, -1]);
+  const focusableCell = (0, import_react12.useRef)();
+  const activeCellPos = (0, import_react12.useRef)([-1, 0]);
+  const getTableCell = (0, import_react12.useCallback)(
     ([rowIdx, colIdx]) => {
       var _a2;
       const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
@@ -1347,14 +1297,16 @@ var useKeyboardNavigation = ({
     },
     [containerRef]
   );
-  const getFocusedCell = (element) => element == null ? void 0 : element.closest("th,td");
+  const getFocusedCell = (element) => element == null ? void 0 : element.closest(
+    "[role='columnHeader'],[role='cell']"
+  );
   const getTableCellPos = (tableCell) => {
     var _a2, _b;
-    if (tableCell.tagName === "TH") {
+    if (tableCell.role === "columnHeader") {
       const colIdx = parseInt((_a2 = tableCell.dataset.idx) != null ? _a2 : "-1", 10);
       return [-1, colIdx];
     } else {
-      const focusedRow = tableCell.closest("tr");
+      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);
@@ -1363,7 +1315,7 @@ var useKeyboardNavigation = ({
     }
     return NULL_CELL_POS;
   };
-  const focusCell = (0, import_react13.useCallback)(
+  const focusCell = (0, import_react12.useCallback)(
     (cellPos) => {
       var _a2;
       if (containerRef.current) {
@@ -1375,7 +1327,7 @@ var useKeyboardNavigation = ({
             activeCell.setAttribute("tabindex", "0");
           }
           activeCell.focus();
-        } else if (!(0, import_vuu_utils9.withinRange)(cellPos[0], viewportRange)) {
+        } else if (!(0, import_vuu_utils8.withinRange)(cellPos[0], viewportRange)) {
           focusableCell.current = void 0;
           requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
         }
@@ -1385,7 +1337,7 @@ var useKeyboardNavigation = ({
     // be often whilst scrolling - store range in a a ref ?
     [containerRef, getTableCell, requestScroll, viewportRange]
   );
-  const setActiveCell = (0, import_react13.useCallback)(
+  const setActiveCell = (0, import_react12.useCallback)(
     (rowIdx, colIdx, fromKeyboard = false) => {
       const pos = [rowIdx, colIdx];
       activeCellPos.current = pos;
@@ -1396,12 +1348,12 @@ var useKeyboardNavigation = ({
     },
     [focusCell]
   );
-  const virtualizeActiveCell = (0, import_react13.useCallback)(() => {
+  const virtualizeActiveCell = (0, import_react12.useCallback)(() => {
     var _a2;
     (_a2 = focusableCell.current) == null ? void 0 : _a2.setAttribute("tabindex", "");
     focusableCell.current = void 0;
   }, []);
-  const nextPageItemIdx = (0, import_react13.useCallback)(
+  const nextPageItemIdx = (0, import_react12.useCallback)(
     async (key, cellPos) => {
       switch (key) {
         case PageDown:
@@ -1421,7 +1373,7 @@ var useKeyboardNavigation = ({
     },
     [requestScroll]
   );
-  const handleFocus = (0, import_react13.useCallback)(() => {
+  const handleFocus = (0, import_react12.useCallback)(() => {
     var _a2;
     if (disableHighlightOnFocus !== true) {
       if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
@@ -1432,7 +1384,7 @@ var useKeyboardNavigation = ({
       }
     }
   }, [disableHighlightOnFocus, containerRef]);
-  const navigateChildItems = (0, import_react13.useCallback)(
+  const navigateChildItems = (0, import_react12.useCallback)(
     async (key) => {
       const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
       const [rowIdx, colIdx] = activeCellPos.current;
@@ -1442,7 +1394,7 @@ var useKeyboardNavigation = ({
     },
     [columnCount, nextPageItemIdx, rowCount, setActiveCell]
   );
-  const handleKeyDown = (0, import_react13.useCallback)(
+  const handleKeyDown = (0, import_react12.useCallback)(
     (e) => {
       if (data.length > 0 && isNavigationKey(e.key)) {
         e.preventDefault();
@@ -1452,7 +1404,7 @@ var useKeyboardNavigation = ({
     },
     [data, navigateChildItems]
   );
-  const handleClick = (0, import_react13.useCallback)(
+  const handleClick = (0, import_react12.useCallback)(
     // Might not be a cell e.g the Settings button
     (evt) => {
       const target = evt.target;
@@ -1464,14 +1416,14 @@ var useKeyboardNavigation = ({
     },
     [setActiveCell]
   );
-  const containerProps = (0, import_react13.useMemo)(() => {
+  const containerProps = (0, import_react12.useMemo)(() => {
     return {
       onClick: handleClick,
       onFocus: handleFocus,
       onKeyDown: handleKeyDown
     };
   }, [handleClick, handleFocus, handleKeyDown]);
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     const { current: cellPos } = activeCellPos;
     const withinViewport = cellPos[0] >= viewportFirstRow && cellPos[0] <= viewportLastRow;
     if (focusableCell.current && !withinViewport) {
@@ -1481,7 +1433,7 @@ var useKeyboardNavigation = ({
     }
   }, [focusCell, viewportFirstRow, viewportLastRow, virtualizeActiveCell]);
   const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     var _a2;
     if (fullyRendered && focusableCell.current === void 0) {
       const headerCell = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
@@ -1497,10 +1449,10 @@ var useKeyboardNavigation = ({
 };
 
 // src/useMeasuredContainer.ts
-var import_react15 = require("react");
+var import_react14 = require("react");
 
 // src/useResizeObserver.ts
-var import_react14 = require("react");
+var import_react13 = require("react");
 var observedMap = /* @__PURE__ */ new Map();
 var getTargetSize = (element, size, dimension) => {
   switch (dimension) {
@@ -1551,8 +1503,8 @@ var resizeObserver = new ResizeObserver((entries) => {
   }
 });
 function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
-  const dimensionsRef = (0, import_react14.useRef)(dimensions);
-  const measure = (0, import_react14.useCallback)((target) => {
+  const dimensionsRef = (0, import_react13.useRef)(dimensions);
+  const measure = (0, import_react13.useCallback)((target) => {
     const { width, height } = target.getBoundingClientRect();
     const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
     return dimensionsRef.current.reduce(
@@ -1567,7 +1519,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
       {}
     );
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const target = ref.current;
     async function registerObserver() {
       observedMap.set(target, { measurements: {} });
@@ -1602,7 +1554,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
       }
     };
   }, [measure, ref]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const target = ref.current;
     const record = observedMap.get(target);
     if (record) {
@@ -1625,15 +1577,16 @@ var useMeasuredContainer = ({
   height,
   width
 }) => {
-  const containerRef = (0, import_react15.useRef)(null);
-  const [size, setSize] = (0, import_react15.useState)({
+  const containerRef = (0, import_react14.useRef)(null);
+  const [size, setSize] = (0, import_react14.useState)({
     outer: {
       height: height != null ? height : "100%",
       width: width != null ? width : "100%"
     }
   });
-  const onResize = (0, import_react15.useCallback)(
+  const onResize = (0, import_react14.useCallback)(
     ({ clientWidth, clientHeight }) => {
+      console.log(`Resize ${clientHeight}`);
       setSize((currentSize) => {
         const { inner, outer } = currentSize;
         return isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== (inner == null ? void 0 : inner.width) || clientHeight !== (inner == null ? void 0 : inner.height)) ? {
@@ -1656,23 +1609,23 @@ var useMeasuredContainer = ({
 };
 
 // src/useSelection.ts
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
-var import_react16 = require("react");
-var { IDX: IDX2, SELECTED: SELECTED3 } = import_vuu_utils10.metadataKeys;
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_react15 = require("react");
+var { IDX: IDX2, SELECTED: SELECTED3 } = import_vuu_utils9.metadataKeys;
 var NO_SELECTION = [];
 var useSelection = ({
   selectionModel,
   onSelectionChange
 }) => {
   selectionModel === "extended" || selectionModel === "checkbox";
-  const lastActiveRef = (0, import_react16.useRef)(-1);
-  const selectedRef = (0, import_react16.useRef)(NO_SELECTION);
-  const handleSelectionChange = (0, import_react16.useCallback)(
+  const lastActiveRef = (0, import_react15.useRef)(-1);
+  const selectedRef = (0, import_react15.useRef)(NO_SELECTION);
+  const handleSelectionChange = (0, import_react15.useCallback)(
     (row, rangeSelect, keepExistingSelection) => {
       const { [IDX2]: idx, [SELECTED3]: isSelected } = row;
       const { current: active } = lastActiveRef;
       const { current: selected } = selectedRef;
-      const selectOperation = isSelected ? import_vuu_utils10.deselectItem : import_vuu_utils10.selectItem;
+      const selectOperation = isSelected ? import_vuu_utils9.deselectItem : import_vuu_utils9.selectItem;
       const newSelected = selectOperation(
         selectionModel,
         selected,
@@ -1694,16 +1647,16 @@ var useSelection = ({
 
 // src/useTableModel.ts
 var import_salt_lab3 = require("@heswell/salt-lab");
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
-var import_react17 = require("react");
-var { info } = (0, import_vuu_utils11.logger)("useTableModel");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_react16 = require("react");
+var { info } = (0, import_vuu_utils10.logger)("useTableModel");
 var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = import_vuu_utils11.metadataKeys.count;
+var KEY_OFFSET = import_vuu_utils10.metadataKeys.count;
 var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
 var getCellRendererForColumn = (column) => {
   var _a;
-  if ((0, import_vuu_utils11.isTypeDescriptor)(column.type)) {
-    return (0, import_vuu_utils11.getCellRenderer)((_a = column.type) == null ? void 0 : _a.renderer);
+  if ((0, import_vuu_utils10.isTypeDescriptor)(column.type)) {
+    return (0, import_vuu_utils10.getCellRenderer)((_a = column.type) == null ? void 0 : _a.renderer);
   }
 };
 var getDataType = (column, columnNames, dataTypes) => {
@@ -1744,7 +1697,7 @@ var columnReducer = (state, action) => {
   }
 };
 var useTableModel = (tableConfig, dataSourceConfig) => {
-  const [state, dispatchColumnAction] = (0, import_react17.useReducer)(columnReducer, { tableConfig, dataSourceConfig }, init);
+  const [state, dispatchColumnAction] = (0, import_react16.useReducer)(columnReducer, { tableConfig, dataSourceConfig }, init);
   return {
     columns: state.columns,
     dispatchColumnAction,
@@ -1755,10 +1708,10 @@ function init({ dataSourceConfig, tableConfig }) {
   const columns = tableConfig.columns.map(
     toKeyedColumWithDefaults(tableConfig)
   );
-  const maybePinnedColumns = columns.some(import_vuu_utils11.isPinned) ? (0, import_vuu_utils11.sortPinnedColumns)(columns) : columns;
+  const maybePinnedColumns = columns.some(import_vuu_utils10.isPinned) ? (0, import_vuu_utils10.sortPinnedColumns)(columns) : columns;
   const state = {
     columns: maybePinnedColumns,
-    headings: (0, import_vuu_utils11.getTableHeadings)(maybePinnedColumns)
+    headings: (0, import_vuu_utils10.getTableHeadings)(maybePinnedColumns)
   };
   if (dataSourceConfig) {
     const { columns: columns2, ...rest } = dataSourceConfig;
@@ -1796,10 +1749,10 @@ var toKeyedColumWithDefaults = (options) => (column, index) => {
     key: key != null ? key : index + KEY_OFFSET,
     name,
     originalIdx: index,
-    valueFormatter: (0, import_vuu_utils11.getValueFormatter)(column),
+    valueFormatter: (0, import_vuu_utils10.getValueFormatter)(column),
     width
   };
-  if ((0, import_vuu_utils11.isGroupColumn)(keyedColumnWithDefaults)) {
+  if ((0, import_vuu_utils10.isGroupColumn)(keyedColumnWithDefaults)) {
     keyedColumnWithDefaults.columns = keyedColumnWithDefaults.columns.map(
       (col) => toKeyedColumWithDefaults(options)(col, col.key)
     );
@@ -1899,7 +1852,7 @@ function pinColumn2(state, action) {
   const targetColumn = columns.find((col) => col.name === column.name);
   if (targetColumn) {
     columns = replaceColumn(columns, { ...targetColumn, pin });
-    columns = (0, import_vuu_utils11.sortPinnedColumns)(columns);
+    columns = (0, import_vuu_utils10.sortPinnedColumns)(columns);
     return {
       ...state,
       columns
@@ -1944,9 +1897,9 @@ function updateTableConfig(state, { columns, confirmed, filter, groupBy, sort })
     result = {
       ...state,
       columns: columns.map((colName, index) => {
-        const columnName = (0, import_vuu_utils11.getColumnName)(colName);
+        const columnName = (0, import_vuu_utils10.getColumnName)(colName);
         const key = index + KEY_OFFSET;
-        const col = (0, import_vuu_utils11.findColumn)(result.columns, columnName);
+        const col = (0, import_vuu_utils10.findColumn)(result.columns, columnName);
         if (col) {
           if (col.key === key) {
             return col;
@@ -1964,24 +1917,24 @@ function updateTableConfig(state, { columns, confirmed, filter, groupBy, sort })
   if (hasGroupBy) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils11.applyGroupByToColumns)(result.columns, groupBy, confirmed)
+      columns: (0, import_vuu_utils10.applyGroupByToColumns)(result.columns, groupBy, confirmed)
     };
   }
   if (hasSort) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils11.applySortToColumns)(result.columns, sort)
+      columns: (0, import_vuu_utils10.applySortToColumns)(result.columns, sort)
     };
   }
   if (hasFilter) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils11.applyFilterToColumns)(result.columns, filter)
+      columns: (0, import_vuu_utils10.applyFilterToColumns)(result.columns, filter)
     };
-  } else if (result.columns.some(import_vuu_utils11.isFilteredColumn)) {
+  } else if (result.columns.some(import_vuu_utils10.isFilteredColumn)) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils11.stripFilterFromColumns)(result.columns)
+      columns: (0, import_vuu_utils10.stripFilterFromColumns)(result.columns)
     };
   }
   return result;
@@ -1991,78 +1944,52 @@ function replaceColumn(state, column) {
 }
 
 // src/useTableScroll.ts
-var import_react18 = require("react");
+var import_react17 = 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, scrollLeft, scrollTop];
+  return [pctScrollLeft, pctScrollTop];
 };
 var getMaxScroll = (container) => {
   const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
   return [scrollWidth - clientWidth, scrollHeight - clientHeight];
 };
+var useCallbackRef = ({
+  onAttach,
+  onDetach
+}) => {
+  const ref = (0, import_react17.useRef)(null);
+  const callbackRef = (0, import_react17.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 useTableScroll = ({
   onHorizontalScroll,
   onVerticalScroll,
   viewport
 }) => {
-  const scrollPosRef = (0, import_react18.useRef)({ scrollTop: 0, scrollLeft: 0 });
-  const scrollbarContainerRef = (0, import_react18.useRef)(null);
-  const contentContainerRef = (0, import_react18.useRef)(null);
-  const tableContainerRef = (0, import_react18.useRef)(null);
-  const contentContainerScrolledRef = (0, import_react18.useRef)(false);
+  const contentContainerScrolledRef = (0, import_react17.useRef)(false);
+  const scrollPosRef = (0, import_react17.useRef)({ scrollTop: 0, scrollLeft: 0 });
+  const scrollbarContainerRef = (0, import_react17.useRef)(null);
+  const contentContainerRef = (0, import_react17.useRef)(null);
   const {
     maxScrollContainerScrollHorizontal: maxScrollLeft,
     maxScrollContainerScrollVertical: maxScrollTop
   } = viewport;
-  const scrollTable = (0, import_react18.useCallback)(
-    (scrollLeft, scrollTop) => {
-      const { current: tableContainer } = tableContainerRef;
-      if (tableContainer) {
-        tableContainer.scrollTo({
-          top: scrollTop,
-          left: scrollLeft,
-          behavior: "auto"
-        });
-      }
-    },
-    [tableContainerRef]
-  );
-  const handleTableContainerScroll = (0, import_react18.useCallback)(() => {
-    const { current: tableContainer } = tableContainerRef;
-    if (tableContainer) {
-      const { current: scrollPos } = scrollPosRef;
-      const { scrollLeft, scrollTop } = tableContainer;
-      if (scrollPos.scrollTop !== scrollTop) {
-        scrollPos.scrollTop = scrollTop;
-        onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop);
-      }
-      if (scrollPos.scrollLeft !== scrollLeft) {
-        scrollPos.scrollLeft = scrollLeft;
-        onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
-      }
-    }
-  }, [onHorizontalScroll, onVerticalScroll]);
-  const handleContentContainerScroll = (0, import_react18.useCallback)(() => {
-    const { current: rootContainer } = contentContainerRef;
-    const { current: scrollContainer } = scrollbarContainerRef;
-    if (rootContainer && scrollContainer) {
-      const [pctScrollLeft, pctScrollTop, scrollLeft, scrollTop] = getPctScroll(rootContainer);
-      contentContainerScrolledRef.current = true;
-      scrollContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
-      scrollContainer.scrollTop = Math.round(pctScrollTop * maxScrollTop);
-      scrollTable(scrollLeft, scrollTop);
-    }
-  }, [
-    maxScrollLeft,
-    maxScrollTop,
-    contentContainerRef,
-    scrollbarContainerRef,
-    scrollTable
-  ]);
-  const handleScrollbarContainerScroll = (0, import_react18.useCallback)(() => {
+  const handleScrollbarContainerScroll = (0, import_react17.useCallback)(() => {
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
     const { current: contentContainerScrolled } = contentContainerScrolledRef;
@@ -2078,12 +2005,71 @@ var useTableScroll = ({
         top: rootScrollTop,
         behavior: "auto"
       });
-      scrollTable(rootScrollLeft, rootScrollTop);
     }
-  }, [contentContainerRef, scrollbarContainerRef, scrollTable]);
-  const requestScroll = (0, import_react18.useCallback)(
+  }, []);
+  const handleContentContainerScroll = (0, import_react17.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_react17.useCallback)(
+    (el) => {
+      scrollbarContainerRef.current = el;
+      el.addEventListener("scroll", handleScrollbarContainerScroll, {
+        passive: true
+      });
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleDetachScrollbarContainer = (0, import_react17.useCallback)(
+    (el) => {
+      scrollbarContainerRef.current = null;
+      el.removeEventListener("scroll", handleScrollbarContainerScroll);
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleAttachContentContainer = (0, import_react17.useCallback)(
+    (el) => {
+      contentContainerRef.current = el;
+      el.addEventListener("scroll", handleContentContainerScroll, {
+        passive: true
+      });
+    },
+    [handleContentContainerScroll]
+  );
+  const handleDetachContentContainer = (0, import_react17.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_react17.useCallback)(
     (scrollRequest) => {
-      const { current: scrollbarContainer } = scrollbarContainerRef;
+      const { current: scrollbarContainer } = contentContainerRef;
       if (scrollbarContainer) {
         contentContainerScrolledRef.current = false;
         if (scrollRequest.type === "scroll-page") {
@@ -2092,7 +2078,7 @@ var useTableScroll = ({
           const scrollBy = direction === "down" ? clientHeight : -clientHeight;
           const newScrollTop = Math.min(
             Math.max(0, scrollTop + scrollBy),
-            viewport.maxScrollContainerScrollVertical
+            maxScrollTop
           );
           scrollbarContainer.scrollTo({
             top: newScrollTop,
@@ -2101,7 +2087,7 @@ var useTableScroll = ({
           });
         } else if (scrollRequest.type === "scroll-end") {
           const { direction } = scrollRequest;
-          const scrollTo = direction === "end" ? viewport.maxScrollContainerScrollVertical : 0;
+          const scrollTo = direction === "end" ? maxScrollTop : 0;
           scrollbarContainer.scrollTo({
             top: scrollTo,
             left: scrollbarContainer.scrollLeft,
@@ -2110,39 +2096,37 @@ var useTableScroll = ({
         }
       }
     },
-    [viewport.maxScrollContainerScrollVertical]
+    [maxScrollTop]
   );
   return {
     /** Ref to be assigned to ScrollbarContainer */
-    scrollbarContainerRef,
-    /** Scroll handler to be attached to ScrollbarContainer */
-    onScrollbarContainerScroll: handleScrollbarContainerScroll,
+    scrollbarContainerRef: scrollbarContainerCallbackRef,
     /** Ref to be assigned to ContentContainer */
-    contentContainerRef,
-    /** Scroll handler to be attached to ContentContainer */
-    onContentContainerScroll: handleContentContainerScroll,
-    /** Ref to be assigned to TableContainer */
-    tableContainerRef,
-    /** Scroll handler to be attached to TableContainer */
-    onTableContainerScroll: handleTableContainerScroll,
+    contentContainerRef: contentContainerCallbackRef,
     /** Scroll the table  */
     requestScroll
   };
 };
 
 // src/useTableViewport.ts
-var import_react19 = require("react");
+var import_react18 = require("react");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var MAX_RAW_ROWS = 15e5;
 var UNMEASURED_VIEWPORT = {
-  fillerHeight: 0,
+  contentHeight: 0,
+  contentWidth: 0,
+  getRowAtPosition: () => -1,
+  getRowOffset: () => -1,
+  horizontalScrollbarHeight: 0,
   maxScrollContainerScrollHorizontal: 0,
   maxScrollContainerScrollVertical: 0,
   pinnedWidthLeft: 0,
   pinnedWidthRight: 0,
   rowCount: 0,
-  scrollContentHeight: 0,
-  scrollbarSize: 0,
-  scrollContentWidth: 0,
-  totalHeaderHeight: 0
+  setPctScrollTop: () => void 0,
+  totalHeaderHeight: 0,
+  verticalScrollbarWidth: 0,
+  viewportBodyHeight: 0
 };
 var measurePinnedColumns = (columns) => {
   let pinnedWidthLeft = 0;
@@ -2169,67 +2153,99 @@ var useTableViewport = ({
   rowHeight,
   size
 }) => {
-  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react19.useMemo)(
+  const pctScrollTopRef = (0, import_react18.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_react18.useMemo)(
     () => measurePinnedColumns(columns),
     [columns]
   );
-  const viewportMeasurements = (0, import_react19.useMemo)(() => {
+  const [actualRowOffset, actualRowAtPosition] = (0, import_react18.useMemo)(
+    () => (0, import_vuu_utils11.actualRowPositioning)(rowHeight),
+    [rowHeight]
+  );
+  const [getRowOffset, getRowAtPosition] = (0, import_react18.useMemo)(() => {
+    if (virtualisedExtent) {
+      return (0, import_vuu_utils11.virtualRowPositioning)(
+        rowHeight,
+        virtualisedExtent,
+        pctScrollTopRef
+      );
+    } else {
+      return [actualRowOffset, actualRowAtPosition];
+    }
+  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
+  const setPctScrollTop = (0, import_react18.useCallback)((scrollPct) => {
+    pctScrollTopRef.current = scrollPct;
+  }, []);
+  return (0, import_react18.useMemo)(() => {
     var _a;
     if (size) {
       const headingsDepth = headings.length;
       const scrollbarSize = 15;
-      const contentHeight = rowCount * rowHeight;
-      const scrollContentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
-      const maxScrollContainerScrollVertical = contentHeight + headerHeight - (((_a = size == null ? void 0 : size.height) != null ? _a : 0) - headerHeight - scrollbarSize);
-      const maxScrollContainerScrollHorizontal = scrollContentWidth - size.width + pinnedWidthLeft;
+      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 {
-        fillerHeight: (rowCount - count) * rowHeight,
+        contentHeight: appliedContentHeight,
+        getRowAtPosition,
+        getRowOffset,
+        horizontalScrollbarHeight,
         maxScrollContainerScrollHorizontal,
         maxScrollContainerScrollVertical,
         pinnedWidthLeft,
         pinnedWidthRight,
         rowCount: count,
-        scrollContentHeight: headerHeight + contentHeight + scrollbarSize,
-        scrollbarSize,
-        scrollContentWidth,
-        totalHeaderHeight: headerHeight * (1 + headingsDepth)
+        contentWidth,
+        setPctScrollTop,
+        totalHeaderHeight,
+        verticalScrollbarWidth,
+        viewportBodyHeight
       };
     } else {
       return UNMEASURED_VIEWPORT;
     }
   }, [
-    headerHeight,
+    size,
     headings.length,
     pinnedWidthLeft,
+    unpinnedWidth,
     pinnedWidthRight,
-    rowCount,
+    appliedContentHeight,
+    headerHeight,
     rowHeight,
-    size,
-    unpinnedWidth
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop
   ]);
-  return viewportMeasurements;
 };
 
 // src/useVirtualViewport.ts
 var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
-var import_react20 = require("react");
+var import_react19 = require("react");
 var useVirtualViewport = ({
   columns,
-  rowHeight,
+  getRowAtPosition,
   setRange,
   viewportMeasurements
 }) => {
-  const firstRowRef = (0, import_react20.useRef)(-1);
+  const firstRowRef = (0, import_react19.useRef)(-1);
   const {
     rowCount: viewportRowCount,
-    scrollContentWidth: contentWidth,
+    contentWidth,
     maxScrollContainerScrollHorizontal
   } = viewportMeasurements;
   const availableWidth = contentWidth - maxScrollContainerScrollHorizontal;
-  const scrollLeftRef = (0, import_react20.useRef)(0);
-  const [visibleColumns, preSpan] = (0, import_react20.useMemo)(
+  const scrollLeftRef = (0, import_react19.useRef)(0);
+  const [visibleColumns, preSpan] = (0, import_react19.useMemo)(
     () => (0, import_vuu_utils12.getColumnsInViewport)(
       columns,
       scrollLeftRef.current,
@@ -2237,12 +2253,12 @@ var useVirtualViewport = ({
     ),
     [availableWidth, columns]
   );
-  const preSpanRef = (0, import_react20.useRef)(preSpan);
-  (0, import_react20.useEffect)(() => {
+  const preSpanRef = (0, import_react19.useRef)(preSpan);
+  (0, import_react19.useEffect)(() => {
     setColumnsWithinViewport(visibleColumns);
   }, [visibleColumns]);
-  const [columnsWithinViewport, setColumnsWithinViewport] = (0, import_react20.useState)(visibleColumns);
-  const handleHorizontalScroll = (0, import_react20.useCallback)(
+  const [columnsWithinViewport, setColumnsWithinViewport] = (0, import_react19.useState)(visibleColumns);
+  const handleHorizontalScroll = (0, import_react19.useCallback)(
     (scrollLeft) => {
       scrollLeftRef.current = scrollLeft;
       const [visibleColumns2, pre] = (0, import_vuu_utils12.getColumnsInViewport)(
@@ -2257,15 +2273,15 @@ var useVirtualViewport = ({
     },
     [availableWidth, columns, columnsWithinViewport]
   );
-  const handleVerticalScroll = (0, import_react20.useCallback)(
+  const handleVerticalScroll = (0, import_react19.useCallback)(
     (scrollTop) => {
-      const firstRow = Math.floor(scrollTop / rowHeight);
+      const firstRow = getRowAtPosition(scrollTop);
       if (firstRow !== firstRowRef.current) {
         firstRowRef.current = firstRow;
         setRange({ from: firstRow, to: firstRow + viewportRowCount });
       }
     },
-    [rowHeight, setRange, viewportRowCount]
+    [getRowAtPosition, setRange, viewportRowCount]
   );
   return {
     columnsWithinViewport,
@@ -2276,10 +2292,10 @@ var useVirtualViewport = ({
   };
 };
 
-// src/useDataTable.ts
+// src/useTable.ts
 var NO_ROWS = [];
 var { KEY: KEY2, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils13.metadataKeys;
-var useDataTable = ({
+var useTable = ({
   config,
   dataSource,
   headerHeight,
@@ -2290,37 +2306,41 @@ var useDataTable = ({
   renderBufferSize = 0,
   rowHeight,
   selectionModel,
-  tableLayout,
   ...measuredProps
 }) => {
   var _a, _b;
-  const [rowCount, setRowCount] = (0, import_react21.useState)(0);
-  const expectConfigChangeRef = (0, import_react21.useRef)(false);
-  const dataSourceRef = (0, import_react21.useRef)();
+  const [rowCount, setRowCount] = (0, import_react20.useState)(0);
+  const expectConfigChangeRef = (0, import_react20.useRef)(false);
+  const dataSourceRef = (0, import_react20.useRef)();
   dataSourceRef.current = dataSource;
   if (dataSource === void 0) {
     throw Error("no data source provided to DataTable");
   }
   const containerMeasurements = useMeasuredContainer(measuredProps);
-  const onDataRowcountChange = (0, import_react21.useCallback)((size) => {
+  const onDataRowcountChange = (0, import_react20.useCallback)((size) => {
     setRowCount(size);
   }, []);
   const { columns, dispatchColumnAction, headings } = useTableModel(
     config,
     dataSource.config
   );
-  const handlePersistentColumnOperation = (0, import_react21.useCallback)(
+  const handlePersistentColumnOperation = (0, import_react20.useCallback)(
     (action) => {
       expectConfigChangeRef.current = true;
       dispatchColumnAction(action);
     },
     [dispatchColumnAction]
   );
-  const handleContextMenuAction = useContextMenu3({
+  const handleContextMenuAction = useContextMenu({
     dataSource,
     onPersistentColumnOperation: handlePersistentColumnOperation
   });
-  const viewportMeasurements = useTableViewport({
+  const {
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop,
+    ...viewportMeasurements
+  } = useTableViewport({
     columns,
     headerHeight,
     headings,
@@ -2328,7 +2348,7 @@ var useDataTable = ({
     rowHeight,
     size: containerMeasurements.innerSize
   });
-  const onSubscribed = (0, import_react21.useCallback)(
+  const onSubscribed = (0, import_react20.useCallback)(
     (subscription) => {
       if (subscription.tableMeta) {
         const { columns: columnNames, dataTypes: serverDataTypes } = subscription.tableMeta;
@@ -2342,7 +2362,7 @@ var useDataTable = ({
     },
     [dispatchColumnAction]
   );
-  const handleSelectionChange = (0, import_react21.useCallback)(
+  const handleSelectionChange = (0, import_react20.useCallback)(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -2362,9 +2382,9 @@ var useDataTable = ({
     renderBufferSize,
     viewportRowCount: viewportMeasurements.rowCount
   });
-  const dataRef = (0, import_react21.useRef)();
+  const dataRef = (0, import_react20.useRef)();
   dataRef.current = data;
-  const handleSort = (0, import_react21.useCallback)(
+  const handleSort = (0, import_react20.useCallback)(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
         dataSource.sort = (0, import_vuu_utils13.applySort)(
@@ -2377,7 +2397,7 @@ var useDataTable = ({
     },
     [dataSource]
   );
-  const handleColumnResize = (0, import_react21.useCallback)(
+  const handleColumnResize = (0, import_react20.useCallback)(
     (phase, columnName, width) => {
       const column = columns.find((column2) => column2.name === columnName);
       if (column) {
@@ -2398,7 +2418,7 @@ var useDataTable = ({
     },
     [columns, dispatchColumnAction]
   );
-  const handleToggleGroup = (0, import_react21.useCallback)(
+  const handleToggleGroup = (0, import_react20.useCallback)(
     (row, column) => {
       const isJson = (0, import_vuu_utils13.isJsonGroup)(column, row);
       const key = row[KEY2];
@@ -2441,14 +2461,20 @@ var useDataTable = ({
     virtualColSpan
   } = useVirtualViewport({
     columns,
-    rowHeight,
+    getRowAtPosition,
     setRange,
     viewportMeasurements
   });
+  const handleVerticalScroll = (0, import_react20.useCallback)(
+    (scrollTop, pctScrollTop) => {
+      setPctScrollTop(pctScrollTop);
+      onVerticalScroll(scrollTop);
+    },
+    [onVerticalScroll, setPctScrollTop]
+  );
   const { requestScroll, ...scrollProps } = useTableScroll({
     onHorizontalScroll,
-    // onRangeChange: setRange,
-    onVerticalScroll,
+    onVerticalScroll: handleVerticalScroll,
     viewport: viewportMeasurements,
     viewportHeight: ((_b = (_a = containerMeasurements.innerSize) == null ? void 0 : _a.height) != null ? _b : 0) - headerHeight
   });
@@ -2460,17 +2486,21 @@ var useDataTable = ({
     rowCount: dataSource == null ? void 0 : dataSource.size,
     viewportRange: range
   });
-  const handleRemoveColumnFromGroupBy = (0, import_react21.useCallback)(
+  const handleRemoveColumnFromGroupBy = (0, import_react20.useCallback)(
     (column) => {
-      if (dataSource && dataSource.groupBy.includes(column.name)) {
-        dataSource.groupBy = dataSource.groupBy.filter(
-          (columnName) => columnName !== column.name
-        );
+      if (column) {
+        if (dataSource && dataSource.groupBy.includes(column.name)) {
+          dataSource.groupBy = dataSource.groupBy.filter(
+            (columnName) => columnName !== column.name
+          );
+        }
+      } else {
+        dataSource.groupBy = [];
       }
     },
     [dataSource]
   );
-  const handleDropColumn = (0, import_react21.useCallback)(
+  const handleDropColumn = (0, import_react20.useCallback)(
     (fromIndex, toIndex) => {
       const column = dataSource.columns[fromIndex];
       const columns2 = (0, import_vuu_utils13.moveItem)(dataSource.columns, column, toIndex);
@@ -2482,11 +2512,9 @@ var useDataTable = ({
     [dataSource, dispatchColumnAction]
   );
   const draggableHook = useDraggableColumn({
-    onDrop: handleDropColumn,
-    tableContainerRef: scrollProps.tableContainerRef,
-    tableLayout
+    onDrop: handleDropColumn
   });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (dataSourceRef.current) {
       expectConfigChangeRef.current = true;
       dispatchColumnAction({
@@ -2496,7 +2524,7 @@ var useDataTable = ({
       });
     }
   }, [config, dispatchColumnAction]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     dataSource.on("config", (config2, confirmed) => {
       expectConfigChangeRef.current = true;
       dispatchColumnAction({
@@ -2506,7 +2534,7 @@ var useDataTable = ({
       });
     });
   }, [dataSource, dispatchColumnAction]);
-  (0, import_react21.useMemo)(() => {
+  (0, import_react20.useMemo)(() => {
     if (expectConfigChangeRef.current) {
       onConfigChange == null ? void 0 : onConfigChange({
         ...config,
@@ -2516,14 +2544,14 @@ var useDataTable = ({
     }
   }, [columns, config, onConfigChange]);
   const showContextMenu = (0, import_vuu_popups3.useContextMenu)();
-  const onContextMenu = (0, import_react21.useCallback)(
+  const onContextMenu = (0, import_react20.useCallback)(
     (evt) => {
       var _a2;
       const { current: currentData } = dataRef;
       const { current: currentDataSource } = dataSourceRef;
       const target = evt.target;
-      const cellEl = target == null ? void 0 : target.closest("td");
-      const rowEl = target == null ? void 0 : target.closest("tr");
+      const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
+      const rowEl = target == null ? void 0 : target.closest(".vuuTableRow");
       if (cellEl && rowEl && currentData && currentDataSource) {
         const { columns: columns2, selectedRowsCount } = currentDataSource;
         const columnMap = (0, import_vuu_utils13.buildColumnMap)(columns2);
@@ -2549,6 +2577,7 @@ var useDataTable = ({
     columnsWithinViewport,
     data,
     dispatchColumnAction,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     onColumnResize: handleColumnResize,
@@ -2566,10 +2595,10 @@ var useDataTable = ({
 };
 
 // src/Table.tsx
-var import_classnames8 = __toESM(require("classnames"));
+var import_classnames7 = __toESM(require("classnames"));
 var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var classBase7 = "vuuTable";
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase6 = "vuuTable";
 var Table = ({
   allowConfigEditing: showSettings = false,
   className: classNameProp,
@@ -2587,7 +2616,6 @@ var Table = ({
   rowHeight = 20,
   selectionModel = "extended",
   style: styleProp,
-  tableLayout: tableLayoutProp = "row",
   width,
   zebraStripes = false,
   ...props
@@ -2601,10 +2629,9 @@ var Table = ({
     draggedItemIndex,
     handleContextMenuAction,
     scrollProps,
-    tableLayout,
     viewportMeasurements,
     ...tableProps
-  } = useDataTable({
+  } = useTable({
     config,
     dataSource,
     renderBufferSize,
@@ -2616,43 +2643,36 @@ var Table = ({
     onSelectionChange,
     rowHeight,
     selectionModel,
-    tableLayout: tableLayoutProp,
     width
   });
   const style = {
     ...outerSize,
-    "--content-height": `${viewportMeasurements.scrollContentHeight}px`,
-    "--content-width": `${viewportMeasurements.scrollContentWidth}px`,
-    "--filler-height": `${viewportMeasurements.fillerHeight}px`,
+    "--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`,
-    "--scrollbar-size": `${viewportMeasurements.scrollbarSize}px`,
     "--table-height": `${innerSize == null ? void 0 : innerSize.height}px`,
     "--table-width": `${innerSize == null ? void 0 : innerSize.width}px`,
-    "--total-header-height": `${viewportMeasurements == null ? void 0 : viewportMeasurements.totalHeaderHeight}px`
-  };
-  const scrollbarContainerStyle = {
-    left: viewportMeasurements.pinnedWidthLeft - 1,
-    // The -1 is to align the top border, might cause innaccuracy
-    // It is compensated by a hardcoded adjustment in css
-    // top: measurements.top - 1 + headerHeight,
-    top: (viewportMeasurements == null ? void 0 : viewportMeasurements.totalHeaderHeight) - 1
+    "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
+    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
+    "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
   };
-  const Table2 = tableLayout === "column" ? ColumnBasedTable : RowBasedTable;
-  const className = (0, import_classnames8.default)(classBase7, classNameProp, {
-    [`${classBase7}-zebra`]: zebraStripes,
-    [`${classBase7}-loading`]: (0, import_vuu_utils14.isDataLoading)(tableProps.columns)
+  const className = (0, import_classnames7.default)(classBase6, classNameProp, {
+    [`${classBase6}-zebra`]: zebraStripes,
+    [`${classBase6}-loading`]: (0, import_vuu_utils14.isDataLoading)(tableProps.columns)
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_vuu_popups4.ContextMenuProvider,
     {
       menuActionHandler: handleContextMenuAction,
       menuBuilder: buildContextMenuDescriptors(dataSource),
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "div",
         {
+          ...props,
           ...containerProps,
           className,
           id,
@@ -2660,49 +2680,36 @@ var Table = ({
           style,
           tabIndex: -1,
           children: [
-            innerSize ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            innerSize ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "div",
               {
-                className: `${classBase7}-scrollbarContainer`,
-                onScroll: scrollProps.onScrollbarContainerScroll,
+                className: `${classBase6}-scrollbarContainer`,
                 ref: scrollProps.scrollbarContainerRef,
-                style: scrollbarContainerStyle,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${classBase7}-scrollContent` })
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${classBase6}-scrollbarContent` })
               }
             ) : null,
-            innerSize ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            innerSize ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "div",
               {
-                className: `${classBase7}-contentContainer`,
-                onScroll: scrollProps.onContentContainerScroll,
+                className: `${classBase6}-contentContainer`,
                 ref: scrollProps.contentContainerRef,
-                ...props,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${classBase7}-scrollContent` }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                    "div",
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    RowBasedTable,
                     {
-                      className: `${classBase7}-tableContainer`,
-                      onScroll: scrollProps.onTableContainerScroll,
-                      ref: scrollProps.tableContainerRef,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                        Table2,
-                        {
-                          ...tableProps,
-                          headerHeight,
-                          rowHeight
-                        }
-                      )
+                      ...tableProps,
+                      headerHeight,
+                      tableId: id
                     }
                   ),
                   draggable
                 ]
               }
             ) : null,
-            showSettings && innerSize ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            showSettings && innerSize ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               import_core.Button,
               {
-                className: `${classBase7}-settings`,
+                className: `${classBase6}-settings`,
                 "data-icon": "settings",
                 onClick: onShowSettings,
                 variant: "secondary"
@@ -2716,10 +2723,10 @@ var Table = ({
 };
 
 // src/cell-renderers/json-cell/JsonCell.tsx
-var import_classnames9 = __toESM(require("classnames"));
+var import_classnames8 = __toESM(require("classnames"));
 var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var classBase8 = "vuuJsonCell";
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var classBase7 = "vuuJsonCell";
 var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY3 } = import_vuu_utils15.metadataKeys;
 var localKey = (key) => {
   const pos = key.lastIndexOf("|");
@@ -2741,19 +2748,19 @@ var JsonCell = ({ column, row }) => {
     isToggle = true;
   }
   const rowKey = localKey(row[KEY3]);
-  const className = (0, import_classnames9.default)({
-    [`${classBase8}-name`]: rowKey === value,
-    [`${classBase8}-value`]: rowKey !== value,
-    [`${classBase8}-group`]: isToggle
+  const className = (0, import_classnames8.default)({
+    [`${classBase7}-name`]: rowKey === value,
+    [`${classBase7}-value`]: rowKey !== value,
+    [`${classBase7}-group`]: isToggle
   });
   if (isToggle) {
     const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase8}-value`, children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase8}-toggle`, "data-icon": toggleIcon })
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${classBase7}-value`, children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${classBase7}-toggle`, "data-icon": toggleIcon })
     ] });
   } else if (value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className, children: value });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className, children: value });
   } else {
     return null;
   }