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

package/esm/index.js

@@ -2,823 +2,671 @@
 import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
 import { Button, useIdMemo } from "@salt-ds/core";
 
-// src/ColumnBasedTable.tsx
-import { metadataKeys as metadataKeys4 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback8 } from "react";
-import cx6 from "classnames";
-
-// src/TableRow.tsx
-import {
-  isGroupColumn,
-  isJsonColumn,
-  isJsonGroup,
-  metadataKeys as metadataKeys3,
-  notHidden
-} from "@vuu-ui/vuu-utils";
-import cx2 from "classnames";
-import { memo as memo2, useCallback as useCallback3 } from "react";
-
-// src/TableCell.tsx
-import { getColumnPinStyle, metadataKeys } from "@vuu-ui/vuu-utils";
-import { EditableLabel } from "@heswell/salt-lab";
-import cx from "classnames";
-import { memo, useCallback, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-var { KEY } = metadataKeys;
-var TableCell = memo(
-  ({ className: classNameProp, column, onClick, row }) => {
-    const labelFieldRef = useRef(null);
-    const {
-      align,
-      CellRenderer,
-      key,
-      pin,
-      editable,
-      resizing,
-      valueFormatter
-    } = column;
-    const [editing, setEditing] = useState(false);
-    const value = valueFormatter(row[key]);
-    const [editableValue, setEditableValue] = 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 = 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 = cx(classNameProp, {
-      vuuAlignRight: align === "right",
-      vuuPinFloating: pin === "floating",
-      vuuPinLeft: pin === "left",
-      vuuPinRight: pin === "right",
-      "vuuTableCell-resizing": resizing
-    }) || void 0;
-    const pinnedStyle = getColumnPinStyle(column);
-    return editable ? /* @__PURE__ */ jsx(
-      "td",
-      {
-        className,
-        "data-editable": true,
-        style: pinnedStyle,
-        onKeyDown: handleTitleKeyDown,
-        children: /* @__PURE__ */ jsx(
-          EditableLabel,
-          {
-            editing,
-            value: editableValue,
-            onChange: setEditableValue,
-            onMouseDownCapture: handleTitleMouseDown,
-            onEnterEditMode: handleEnterEditMode,
-            onExitEditMode: handleExitEditMode,
-            onKeyDown: handleTitleKeyDown,
-            ref: labelFieldRef,
-            tabIndex: 0
-          },
-          "title"
-        )
-      }
-    ) : /* @__PURE__ */ jsx("td", { className, style: pinnedStyle, onClick: handleClick, children: CellRenderer ? /* @__PURE__ */ 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
-import { metadataKeys as metadataKeys2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback2 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var { DEPTH, IS_LEAF } = metadataKeys2;
-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];
+// src/context-menu/buildContextMenuDescriptors.ts
+import { isNumericColumn } from "@vuu-ui/vuu-utils";
+var buildContextMenuDescriptors = (dataSource) => (location, options) => {
+  const descriptors = [];
+  if (dataSource === void 0) {
+    return descriptors;
+  }
+  if (location === "header") {
+    descriptors.push(
+      ...buildSortMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildGroupMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildAggregationMenuItems(options, dataSource)
+    );
+    descriptors.push(...buildColumnDisplayMenuItems(options));
+  } else if (location === "filter") {
+    const { column, filter } = options;
+    const colIsOnlyFilter = (filter == null ? void 0 : filter.column) === (column == null ? void 0 : column.name);
+    descriptors.push({
+      label: "Edit filter",
+      action: "filter-edit",
+      options
+    });
+    descriptors.push({
+      label: "Remove filter",
+      action: "filter-remove-column",
+      options
+    });
+    if (column && !colIsOnlyFilter) {
+      descriptors.push({
+        label: `Remove all filters`,
+        action: "remove-filters",
+        options
+      });
+    }
   }
+  return descriptors;
 };
-var TableGroupCell = ({ column, onClick, row }) => {
-  const { columns } = column;
-  const [value, offset] = getGroupValueAndOffset(columns, row);
-  const handleClick = useCallback2(() => {
-    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__ */ jsx2("span", { className: "vuuTableGroupCell-spacer" }, i));
-  return /* @__PURE__ */ jsxs(
-    "td",
-    {
-      className: "vuuTableGroupCell vuuPinLeft",
-      onClick: isLeaf ? void 0 : handleClick,
-      style,
+function buildSortMenuItems(options, { sort: { sortDefs } }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const hasSort = sortDefs.length > 0;
+  if (column.sorted === "A") {
+    menuItems.push({
+      label: "Reverse Sort (DSC)",
+      action: "sort-dsc",
+      options
+    });
+  } else if (column.sorted === "D") {
+    menuItems.push({
+      label: "Reverse Sort (ASC)",
+      action: "sort-asc",
+      options
+    });
+  } else if (typeof column.sorted === "number") {
+    if (column.sorted > 0) {
+      menuItems.push({
+        label: "Reverse Sort (DSC)",
+        action: "sort-add-dsc",
+        options
+      });
+    } else {
+      menuItems.push({
+        label: "Reverse Sort (ASC)",
+        action: "sort-add-asc",
+        options
+      });
+    }
+    if (hasSort && Math.abs(column.sorted) < sortDefs.length) {
+      menuItems.push({
+        label: "Remove from sort",
+        action: "sort-remove",
+        options
+      });
+    }
+    menuItems.push({
+      label: "New Sort",
       children: [
-        spacers,
-        isLeaf ? null : /* @__PURE__ */ jsx2("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
-        /* @__PURE__ */ jsx2("span", { children: value })
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
       ]
-    }
-  );
-};
-
-// src/TableRow.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var { IDX, IS_EXPANDED, SELECTED } = metadataKeys3;
-var classBase = "vuuTableRow";
-var TableRow = memo2(function Row({
-  columns,
-  height,
-  index,
-  onClick,
-  onToggleGroup,
-  virtualColSpan = 0,
-  row
-}) {
-  const {
-    [IDX]: rowIndex,
-    [IS_EXPANDED]: isExpanded,
-    [SELECTED]: isSelected
-  } = row;
-  const className = cx2(classBase, {
-    [`${classBase}-even`]: rowIndex % 2 === 0,
-    [`${classBase}-expanded`]: isExpanded,
-    [`${classBase}-preSelected`]: isSelected === 2
-  });
-  const offset = rowIndex - index;
-  const handleRowClick = useCallback3(
-    (evt) => {
-      const rangeSelect = evt.shiftKey;
-      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
-      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
-    },
-    [onClick, row]
-  );
-  const handleGroupCellClick = useCallback3(
-    (column) => {
-      if (isGroupColumn(column) || isJsonGroup(column, row)) {
-        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
-      }
-    },
-    [onToggleGroup, row]
-  );
-  return /* @__PURE__ */ jsxs2(
-    "tr",
-    {
-      "aria-selected": isSelected === 1 ? true : void 0,
-      "aria-rowindex": rowIndex,
-      className,
-      onClick: handleRowClick,
-      style: {
-        transform: `translate(0px, ${offset * height}px)`
-      },
+    });
+  } else if (hasSort) {
+    menuItems.push({
+      label: "Add to sort",
       children: [
-        virtualColSpan > 0 ? /* @__PURE__ */ jsx3("td", { colSpan: virtualColSpan }) : null,
-        columns.filter(notHidden).map((column) => {
-          const isGroup = isGroupColumn(column);
-          const isJsonCell = isJsonColumn(column);
-          const Cell = isGroup ? TableGroupCell : TableCell;
-          return /* @__PURE__ */ jsx3(
-            Cell,
-            {
-              column,
-              onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
-              row
-            },
-            column.name
-          );
-        })
+        { label: "Ascending", action: "sort-add-asc", options },
+        { label: "Descending", action: "sort-add-dsc", options }
+      ]
+    });
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
       ]
+    });
+  } else {
+    menuItems.push({
+      label: "Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  }
+  return menuItems;
+}
+function buildAggregationMenuItems(options, dataSource) {
+  const { column } = options;
+  if (column === void 0 || dataSource.groupBy.length === 0) {
+    return [];
+  }
+  const { name, label = name } = column;
+  return [
+    {
+      label: `Aggregate ${label}`,
+      children: [{ label: "Count", action: "agg-count", options }].concat(
+        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
 });
-
-// src/TableHeaderCell.tsx
-import cx5 from "classnames";
-import { useCallback as useCallback7, useRef as useRef4 } from "react";
-
-// src/ColumnResizer.tsx
-import { useCallback as useCallback4, useRef as useRef2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var NOOP = () => void 0;
-var baseClass = "vuuColumnResizer";
-var ColumnResizer = ({
-  onDrag,
-  onDragEnd = NOOP,
-  onDragStart = NOOP
-}) => {
-  const position = useRef2(0);
-  const onMouseMove = useCallback4(
-    (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 = useCallback4(
-    (e) => {
-      window.removeEventListener("mouseup", onMouseUp);
-      window.removeEventListener("mousemove", onMouseMove);
-      onDragEnd(e);
+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
     },
-    [onDragEnd, onMouseMove]
-  );
-  const handleMouseDown = useCallback4(
-    (e) => {
-      onDragStart(e);
-      position.current = Math.round(e.clientX);
-      window.addEventListener("mouseup", onMouseUp);
-      window.addEventListener("mousemove", onMouseMove);
-      if (e.stopPropagation) {
-        e.stopPropagation();
+    {
+      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)]
       }
-      if (e.preventDefault) {
-        e.preventDefault();
+    );
+  } else if (pin === "right") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinFloating(options)]
       }
-    },
-    [onDragStart, onMouseMove, onMouseUp]
-  );
-  return /* @__PURE__ */ jsx4("div", { className: baseClass, onMouseDown: handleMouseDown });
-};
+    );
+  } 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;
+}
 
-// src/SortIndicator.tsx
-import cx3 from "classnames";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var classBase2 = "vuuSortIndicator";
-var SortIndicator = ({ sorted }) => {
-  if (!sorted) {
-    return null;
+// src/context-menu/useContextMenu.ts
+import { removeColumnFromFilter } from "@vuu-ui/vuu-filters";
+import {
+  addGroupColumn,
+  addSortColumn,
+  AggregationType,
+  setAggregations,
+  setSortColumn
+} from "@vuu-ui/vuu-utils";
+var removeFilterColumn = (dataSourceFilter, column) => {
+  if (dataSourceFilter.filterStruct && column) {
+    const [filterStruct, filter] = removeColumnFromFilter(
+      column,
+      dataSourceFilter.filterStruct
+    );
+    return {
+      filter,
+      filterStruct
+    };
+  } else {
+    return dataSourceFilter;
   }
-  const direction = typeof sorted === "number" ? sorted < 0 ? "dsc" : "asc" : sorted === "A" ? "asc" : "dsc";
-  return typeof sorted === "number" ? /* @__PURE__ */ jsxs3("div", { className: cx3(classBase2, "multi-col", direction), children: [
-    /* @__PURE__ */ jsx5("span", { "data-icon": `sorted-${direction}` }),
-    /* @__PURE__ */ jsx5("span", { className: "vuuSortPosition", children: Math.abs(sorted) })
-  ] }) : /* @__PURE__ */ jsx5("div", { className: cx3(classBase2, "single-col"), children: /* @__PURE__ */ jsx5("span", { "data-icon": `sorted-${direction}` }) });
 };
-
-// src/useTableColumnResize.tsx
-import { useCallback as useCallback5, useRef as useRef3 } from "react";
-var useTableColumnResize = ({
-  column,
-  onResize,
-  rootRef
+var { Average, Count, High, Low, Sum } = AggregationType;
+var useContextMenu = ({
+  dataSource,
+  onPersistentColumnOperation
 }) => {
-  const widthRef = useRef3(0);
-  const isResizing = useRef3(false);
-  const { name } = column;
-  const handleResizeStart = useCallback5(() => {
-    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 = useCallback5(
-    (_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;
-          }
-        }
+  const handleContextMenuAction = (type, options) => {
+    const gridOptions = options;
+    if (gridOptions.column && dataSource) {
+      const { column } = gridOptions;
+      switch (type) {
+        case "sort-asc":
+          return dataSource.sort = setSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
+        case "sort-add-asc":
+          return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
+        case "group":
+          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
+        case "group-add":
+          return dataSource.groupBy = 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 = setAggregations(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Count), true;
+        case "agg-sum":
+          return dataSource.aggregations = 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:
       }
-    },
-    [name, onResize, rootRef]
-  );
-  const handleResizeEnd = useCallback5(() => {
-    if (onResize) {
-      onResize("end", name, widthRef.current);
-      setTimeout(() => {
-        isResizing.current = false;
-      }, 100);
     }
-  }, [name, onResize]);
-  return {
-    isResizing: isResizing.current,
-    onDrag: handleResize,
-    onDragStart: handleResizeStart,
-    onDragEnd: handleResizeEnd
+    return false;
   };
+  return handleContextMenuAction;
 };
 
-// src/TableHeaderCell.tsx
-import { useContextMenu as useContextMenu2 } from "@vuu-ui/vuu-popups";
+// src/RowBasedTable.tsx
+import {
+  buildColumnMap,
+  getColumnStyle as getColumnStyle3,
+  isGroupColumn as isGroupColumn2,
+  metadataKeys as metadataKeys4,
+  notHidden as notHidden2,
+  visibleColumnAtIndex
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback8, useMemo } from "react";
 
-// src/filter-indicator.tsx
-import { useContextMenu } from "@vuu-ui/vuu-popups";
-import cx4 from "classnames";
-import { useCallback as useCallback6 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var FilterIndicator = ({ column, filter }) => {
-  const showContextMenu = useContextMenu();
-  const handleClick = useCallback6(
-    (evt) => {
-      evt.stopPropagation();
-      showContextMenu(evt, "filter", { column, filter });
-    },
-    [column, filter, showContextMenu]
-  );
-  if (!column.filter) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx6(
-    "div",
-    {
-      className: cx4("vuuFilterIndicator"),
-      "data-icon": "filter",
-      onClick: handleClick
-    }
-  );
-};
+// src/TableRow.tsx
+import {
+  isGroupColumn,
+  isJsonColumn,
+  isJsonGroup,
+  metadataKeys as metadataKeys3,
+  notHidden
+} from "@vuu-ui/vuu-utils";
+import cx2 from "classnames";
+import { memo as memo2, useCallback as useCallback3 } from "react";
 
-// src/TableHeaderCell.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var classBase3 = "vuuTable-headerCell";
-var TableHeaderCell = ({
-  column,
-  className: classNameProp,
-  onClick,
-  onDragStart,
-  onResize,
-  ...props
-}) => {
-  const rootRef = useRef4(null);
-  const { isResizing, ...resizeProps } = useTableColumnResize({
+// src/TableCell.tsx
+import { getColumnStyle, metadataKeys } from "@vuu-ui/vuu-utils";
+import { EditableLabel } from "@heswell/salt-lab";
+import cx from "classnames";
+import { memo, useCallback, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var { KEY } = metadataKeys;
+var TableCell = memo(
+  ({
+    className: classNameProp,
     column,
-    onResize,
-    rootRef
-  });
-  const showContextMenu = useContextMenu2();
-  const dragTimerRef = useRef4(null);
-  const handleContextMenu = (e) => {
-    showContextMenu(e, "header", { column });
-  };
-  const handleClick = useCallback7(
-    (evt) => !isResizing && (onClick == null ? void 0 : onClick(evt)),
-    [isResizing, onClick]
-  );
-  const handleMouseDown = useCallback7(
-    (evt) => {
-      dragTimerRef.current = window.setTimeout(() => {
-        onDragStart == null ? void 0 : onDragStart(evt);
-        dragTimerRef.current = null;
-      }, 250);
-    },
-    [onDragStart]
-  );
-  const handleMouseUp = useCallback7(() => {
-    if (dragTimerRef.current !== null) {
-      window.clearTimeout(dragTimerRef.current);
-      dragTimerRef.current = null;
-    }
-  }, []);
-  const className = cx5(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__ */ jsx7(
-    "th",
-    {
-      className,
-      ...props,
-      onClick: handleClick,
-      onContextMenu: handleContextMenu,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      ref: rootRef,
-      children: /* @__PURE__ */ jsxs4("div", { className: `${classBase3}-inner`, children: [
-        /* @__PURE__ */ jsx7(FilterIndicator, { column }),
-        /* @__PURE__ */ jsx7("div", { className: `${classBase3}-label`, children: column.label }),
-        /* @__PURE__ */ jsx7(SortIndicator, { sorted: column.sorted }),
-        column.resizeable !== false ? /* @__PURE__ */ jsx7(ColumnResizer, { ...resizeProps }) : null
-      ] })
-    }
-  );
-};
-
-// src/ColumnBasedTable.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase4 = "vuuTable";
-var { RENDER_IDX } = metadataKeys4;
-var ColumnBasedTable = ({
-  columns,
-  data,
-  headerHeight,
-  onHeaderCellDragEnd,
-  rowHeight
-}) => {
-  const handleDragEnd = useCallback8(() => {
-    onHeaderCellDragEnd == null ? void 0 : onHeaderCellDragEnd();
-  }, [onHeaderCellDragEnd]);
-  console.log(`ColumnBasedTable render`);
-  return /* @__PURE__ */ jsx8(Fragment, { children: columns.map((column, i) => /* @__PURE__ */ jsx8(
-    "table",
-    {
-      className: cx6(`${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__ */ jsxs5("tbody", { children: [
-        /* @__PURE__ */ jsx8("tr", { children: /* @__PURE__ */ jsx8(
-          TableHeaderCell,
-          {
-            column,
-            "data-idx": i,
-            onDragEnd: handleDragEnd
-          },
-          i
-        ) }, "header"),
-        data.map((row, j) => /* @__PURE__ */ jsx8(
-          TableRow,
+    columnMap,
+    onClick,
+    row
+  }) => {
+    const labelFieldRef = useRef(null);
+    const {
+      align,
+      CellRenderer,
+      key,
+      pin,
+      editable,
+      resizing,
+      valueFormatter
+    } = column;
+    const [editing, setEditing] = useState(false);
+    const value = valueFormatter(row[key]);
+    const [editableValue, setEditableValue] = 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 = 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 = cx(classNameProp, {
+      vuuAlignRight: align === "right",
+      vuuPinFloating: pin === "floating",
+      vuuPinLeft: pin === "left",
+      vuuPinRight: pin === "right",
+      "vuuTableCell-resizing": resizing
+    }) || void 0;
+    const style = getColumnStyle(column);
+    return editable ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        "data-editable": true,
+        role: "cell",
+        style,
+        onKeyDown: handleTitleKeyDown,
+        children: /* @__PURE__ */ jsx(
+          EditableLabel,
           {
-            columns: [column],
-            height: rowHeight,
-            index: j,
-            row
+            editing,
+            value: editableValue,
+            onChange: setEditableValue,
+            onMouseDownCapture: handleTitleMouseDown,
+            onEnterEditMode: handleEnterEditMode,
+            onExitEditMode: handleExitEditMode,
+            onKeyDown: handleTitleKeyDown,
+            ref: labelFieldRef,
+            tabIndex: 0
           },
-          row[RENDER_IDX]
-        )),
-        /* @__PURE__ */ jsx8("tr", { className: "vuuTable-filler" })
-      ] })
-    },
-    column.name
-  )) });
-};
-
-// src/context-menu/buildContextMenuDescriptors.ts
-import { isNumericColumn } from "@vuu-ui/vuu-utils";
-var buildContextMenuDescriptors = (dataSource) => (location, options) => {
-  const descriptors = [];
-  if (dataSource === void 0) {
-    return descriptors;
-  }
-  if (location === "header") {
-    descriptors.push(
-      ...buildSortMenuItems(options, dataSource)
-    );
-    descriptors.push(
-      ...buildGroupMenuItems(options, dataSource)
-    );
-    descriptors.push(
-      ...buildAggregationMenuItems(options, dataSource)
+          "title"
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        role: "cell",
+        style,
+        onClick: handleClick,
+        children: CellRenderer ? /* @__PURE__ */ jsx(CellRenderer, { column, columnMap, row }) : value
+      }
     );
-    descriptors.push(...buildColumnDisplayMenuItems(options));
-  } else if (location === "filter") {
-    const { column, filter } = options;
-    const colIsOnlyFilter = (filter == null ? void 0 : filter.column) === (column == null ? void 0 : column.name);
-    descriptors.push({
-      label: "Edit filter",
-      action: "filter-edit",
-      options
-    });
-    descriptors.push({
-      label: "Remove filter",
-      action: "filter-remove-column",
-      options
-    });
-    if (column && !colIsOnlyFilter) {
-      descriptors.push({
-        label: `Remove all filters`,
-        action: "remove-filters",
-        options
-      });
-    }
+  },
+  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
+import { getColumnStyle as getColumnStyle2, metadataKeys as metadataKeys2 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var { DEPTH, IS_LEAF } = metadataKeys2;
+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];
   }
-  return descriptors;
 };
-function buildSortMenuItems(options, { sort: { sortDefs } }) {
-  const { column } = options;
-  const menuItems = [];
-  if (column === void 0) {
-    return menuItems;
-  }
-  const hasSort = sortDefs.length > 0;
-  if (column.sorted === "A") {
-    menuItems.push({
-      label: "Reverse Sort (DSC)",
-      action: "sort-dsc",
-      options
-    });
-  } else if (column.sorted === "D") {
-    menuItems.push({
-      label: "Reverse Sort (ASC)",
-      action: "sort-asc",
-      options
-    });
-  } else if (typeof column.sorted === "number") {
-    if (column.sorted > 0) {
-      menuItems.push({
-        label: "Reverse Sort (DSC)",
-        action: "sort-add-dsc",
-        options
-      });
-    } else {
-      menuItems.push({
-        label: "Reverse Sort (ASC)",
-        action: "sort-add-asc",
-        options
-      });
-    }
-    if (hasSort && Math.abs(column.sorted) < sortDefs.length) {
-      menuItems.push({
-        label: "Remove from sort",
-        action: "sort-remove",
-        options
-      });
-    }
-    menuItems.push({
-      label: "New Sort",
-      children: [
-        { label: "Ascending", action: "sort-asc", options },
-        { label: "Descending", action: "sort-dsc", options }
-      ]
-    });
-  } else if (hasSort) {
-    menuItems.push({
-      label: "Add to sort",
-      children: [
-        { label: "Ascending", action: "sort-add-asc", options },
-        { label: "Descending", action: "sort-add-dsc", options }
-      ]
-    });
-    menuItems.push({
-      label: "New Sort",
-      children: [
-        { label: "Ascending", action: "sort-asc", options },
-        { label: "Descending", action: "sort-dsc", options }
-      ]
-    });
-  } else {
-    menuItems.push({
-      label: "Sort",
+var TableGroupCell = ({ column, onClick, row }) => {
+  const { columns } = column;
+  const [value, offset] = getGroupValueAndOffset(columns, row);
+  const handleClick = useCallback2(() => {
+    onClick == null ? void 0 : onClick(column);
+  }, [column, onClick]);
+  const style = getColumnStyle2(column);
+  const isLeaf = row[IS_LEAF];
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx2("span", { className: "vuuTableGroupCell-spacer" }, i));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "vuuTableGroupCell vuuPinLeft",
+      onClick: isLeaf ? void 0 : handleClick,
+      role: "cell",
+      style,
       children: [
-        { label: "Ascending", action: "sort-asc", options },
-        { label: "Descending", action: "sort-dsc", options }
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ jsx2("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
+        /* @__PURE__ */ jsx2("span", { children: value })
       ]
-    });
-  }
-  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(
-        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
+  );
+};
+
+// src/TableRow.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var { IDX, IS_EXPANDED, SELECTED } = metadataKeys3;
+var classBase = "vuuTableRow";
+var TableRow = memo2(function Row({
+  columnMap,
+  columns,
+  offset,
+  onClick,
+  onToggleGroup,
+  virtualColSpan = 0,
+  row
+}) {
+  const {
+    [IDX]: rowIndex,
+    [IS_EXPANDED]: isExpanded,
+    [SELECTED]: isSelected
+  } = row;
+  const className = cx2(classBase, {
+    [`${classBase}-even`]: rowIndex % 2 === 0,
+    [`${classBase}-expanded`]: isExpanded,
+    [`${classBase}-preSelected`]: isSelected === 2
+  });
+  const handleRowClick = useCallback3(
+    (evt) => {
+      const rangeSelect = evt.shiftKey;
+      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
+    },
+    [onClick, row]
+  );
+  const handleGroupCellClick = useCallback3(
+    (column) => {
+      if (isGroupColumn(column) || isJsonGroup(column, row)) {
+        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+      }
     },
+    [onToggleGroup, row]
+  );
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsx3("div", { role: "cell", style: { width: virtualColSpan } }) : null,
+        columns.filter(notHidden).map((column) => {
+          const isGroup = isGroupColumn(column);
+          const isJsonCell = isJsonColumn(column);
+          const Cell = isGroup ? TableGroupCell : TableCell;
+          return /* @__PURE__ */ jsx3(
+            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
+import cx3 from "classnames";
+import { useRef as useRef4 } from "react";
+
+// src/ColumnResizer.tsx
+import { useCallback as useCallback4, useRef as useRef2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var NOOP = () => void 0;
+var baseClass = "vuuColumnResizer";
+var ColumnResizer = ({
+  onDrag,
+  onDragEnd = NOOP,
+  onDragStart = NOOP
+}) => {
+  const position = useRef2(0);
+  const onMouseMove = useCallback4(
+    (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
-import { removeColumnFromFilter } from "@vuu-ui/vuu-filters";
-import {
-  addGroupColumn,
-  addSortColumn,
-  AggregationType,
-  setAggregations,
-  setSortColumn
-} from "@vuu-ui/vuu-utils";
-var removeFilterColumn = (dataSourceFilter, column) => {
-  if (dataSourceFilter.filterStruct && column) {
-    const [filterStruct, filter] = removeColumnFromFilter(
-      column,
-      dataSourceFilter.filterStruct
-    );
-    return {
-      filter,
-      filterStruct
-    };
-  } else {
-    return dataSourceFilter;
-  }
+    },
+    [onDrag]
+  );
+  const onMouseUp = useCallback4(
+    (e) => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      onDragEnd(e);
+    },
+    [onDragEnd, onMouseMove]
+  );
+  const handleMouseDown = useCallback4(
+    (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__ */ jsx4("div", { className: baseClass, "data-align": "end", onMouseDown: handleMouseDown });
 };
-var { Average, Count, High, Low, Sum } = AggregationType;
-var useContextMenu3 = ({
-  dataSource,
-  onPersistentColumnOperation
+
+// src/useTableColumnResize.tsx
+import { useCallback as useCallback5, useRef as useRef3 } from "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 = setSortColumn(dataSource.sort, column, "A"), true;
-        case "sort-dsc":
-          return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
-        case "sort-add-asc":
-          return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
-        case "sort-add-dsc":
-          return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
-        case "group":
-          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
-        case "group-add":
-          return dataSource.groupBy = 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 = setAggregations(dataSource.aggregations, column, Average), true;
-        case "agg-high":
-          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, High), true;
-        case "agg-low":
-          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Low), true;
-        case "agg-count":
-          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Count), true;
-        case "agg-sum":
-          return dataSource.aggregations = 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 = useRef3(0);
+  const isResizing = useRef3(false);
+  const { name } = column;
+  const handleResizeStart = useCallback5(() => {
+    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 = useCallback5(
+    (_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 = useCallback5(() => {
+    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
-import {
-  getColumnPinStyle as getColumnPinStyle2,
-  isGroupColumn as isGroupColumn2,
-  metadataKeys as metadataKeys5,
-  notHidden as notHidden2,
-  visibleColumnAtIndex
-} from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback9, useMemo } from "react";
-
 // src/TableGroupHeaderCell.tsx
-import cx7 from "classnames";
-import { useRef as useRef5 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var classBase5 = "vuuTable-groupHeaderCell";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase2 = "vuuTable-groupHeaderCell";
+var RemoveButton = ({
+  column,
+  onClick,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsx5(
+    "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__ */ jsxs6("div", { className: cx7(`${classBase5}-col`, className), role: "columnheader", children: [
-    /* @__PURE__ */ jsx9("span", { className: `${classBase5}-label`, children: column.name }),
-    /* @__PURE__ */ jsx9(
-      "span",
-      {
-        className: `${classBase5}-close`,
-        "data-icon": "close-circle",
-        onClick: () => onRemoveColumn == null ? void 0 : onRemoveColumn(column)
-      }
-    )
+  const { children, column, className } = props;
+  return /* @__PURE__ */ jsxs3("div", { className: cx3(`${classBase2}-col`, className), role: "columnheader", children: [
+    /* @__PURE__ */ jsx5("span", { className: `${classBase2}-label`, children: column.name }),
+    children
   ] });
 };
 var TableGroupHeaderCell = ({
@@ -828,40 +676,153 @@ var TableGroupHeaderCell = ({
   onResize,
   ...props
 }) => {
-  const rootRef = useRef5(null);
+  const rootRef = useRef4(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
     column: groupColumn,
     onResize,
     rootRef
   });
-  const className = cx7(classBase5, classNameProp, {
+  const className = cx3(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__ */ jsx9("th", { className, ref: rootRef, ...props, children: /* @__PURE__ */ jsxs6("div", { className: `${classBase5}-inner`, children: [
-    columns.map((column) => /* @__PURE__ */ jsx9(
-      ColHeader,
-      {
-        column,
-        onRemoveColumn
-      },
-      column.key
-    )),
-    groupColumn.resizeable !== false ? /* @__PURE__ */ jsx9(ColumnResizer, { ...resizeProps }) : null
+  return /* @__PURE__ */ jsx5("div", { className, ref: rootRef, ...props, children: /* @__PURE__ */ jsxs3("div", { className: `${classBase2}-inner`, children: [
+    columns.map((column) => /* @__PURE__ */ jsx5(ColHeader, { column, children: columns.length > 1 ? /* @__PURE__ */ jsx5(RemoveButton, { column, onClick: onRemoveColumn }) : null }, column.key)),
+    /* @__PURE__ */ jsx5(RemoveButton, { "data-align": "end", onClick: onRemoveColumn }),
+    groupColumn.resizeable !== false ? /* @__PURE__ */ jsx5(ColumnResizer, { ...resizeProps }) : null
   ] }) });
 };
 
+// src/TableHeaderCell.tsx
+import cx6 from "classnames";
+import { useCallback as useCallback7, useRef as useRef5 } from "react";
+
+// src/SortIndicator.tsx
+import cx4 from "classnames";
+import { jsx as jsx6, jsxs as jsxs4 } from "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__ */ jsxs4("div", { className: cx4(classBase3, "multi-col", direction), children: [
+    /* @__PURE__ */ jsx6("span", { "data-icon": `sorted-${direction}` }),
+    /* @__PURE__ */ jsx6("span", { className: "vuuSortPosition", children: Math.abs(sorted) })
+  ] }) : /* @__PURE__ */ jsx6("div", { className: cx4(classBase3, "single-col"), children: /* @__PURE__ */ jsx6("span", { "data-icon": `sorted-${direction}` }) });
+};
+
+// src/TableHeaderCell.tsx
+import { useContextMenu as useContextMenu3 } from "@vuu-ui/vuu-popups";
+
+// src/filter-indicator.tsx
+import { useContextMenu as useContextMenu2 } from "@vuu-ui/vuu-popups";
+import cx5 from "classnames";
+import { useCallback as useCallback6 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var FilterIndicator = ({ column, filter }) => {
+  const showContextMenu = useContextMenu2();
+  const handleClick = useCallback6(
+    (evt) => {
+      evt.stopPropagation();
+      showContextMenu(evt, "filter", { column, filter });
+    },
+    [column, filter, showContextMenu]
+  );
+  if (!column.filter) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cx5("vuuFilterIndicator"),
+      "data-icon": "filter",
+      onClick: handleClick
+    }
+  );
+};
+
+// src/TableHeaderCell.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var classBase4 = "vuuTable-headerCell";
+var TableHeaderCell = ({
+  column,
+  className: classNameProp,
+  onClick,
+  onDragStart,
+  onResize,
+  ...props
+}) => {
+  const rootRef = useRef5(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column,
+    onResize,
+    rootRef
+  });
+  const showContextMenu = useContextMenu3();
+  const dragTimerRef = useRef5(null);
+  const handleContextMenu = (e) => {
+    showContextMenu(e, "header", { column });
+  };
+  const handleClick = useCallback7(
+    (evt) => !isResizing && (onClick == null ? void 0 : onClick(evt)),
+    [isResizing, onClick]
+  );
+  const handleMouseDown = useCallback7(
+    (evt) => {
+      dragTimerRef.current = window.setTimeout(() => {
+        onDragStart == null ? void 0 : onDragStart(evt);
+        dragTimerRef.current = null;
+      }, 500);
+    },
+    [onDragStart]
+  );
+  const handleMouseUp = useCallback7(() => {
+    if (dragTimerRef.current !== null) {
+      window.clearTimeout(dragTimerRef.current);
+      dragTimerRef.current = null;
+    }
+  }, []);
+  const className = cx6(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__ */ jsx8(
+    "div",
+    {
+      className,
+      ...props,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      ref: rootRef,
+      children: /* @__PURE__ */ jsxs5("div", { className: `${classBase4}-inner`, children: [
+        /* @__PURE__ */ jsx8(FilterIndicator, { column }),
+        /* @__PURE__ */ jsx8("div", { className: `${classBase4}-label`, children: column.label }),
+        /* @__PURE__ */ jsx8(SortIndicator, { sorted: column.sorted }),
+        column.resizeable !== false ? /* @__PURE__ */ jsx8(ColumnResizer, { ...resizeProps }) : null
+      ] })
+    }
+  );
+};
+
 // src/RowBasedTable.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var classBase6 = "vuuTable";
-var { RENDER_IDX: RENDER_IDX2 } = metadataKeys5;
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase5 = "vuuTable";
+var { RENDER_IDX } = metadataKeys4;
 var RowBasedTable = ({
   columns,
   columnsWithinViewport,
   data,
+  getRowOffset,
   headings,
   onColumnResize,
   onHeaderCellDragStart,
@@ -870,11 +831,11 @@ var RowBasedTable = ({
   onRowClick,
   onSort,
   onToggleGroup,
+  tableId,
   virtualColSpan = 0,
-  rowCount,
-  rowHeight
+  rowCount
 }) => {
-  const handleDragStart = useCallback9(
+  const handleDragStart = useCallback8(
     (evt) => {
       onHeaderCellDragStart == null ? void 0 : onHeaderCellDragStart(evt);
     },
@@ -883,7 +844,8 @@ var RowBasedTable = ({
   const visibleColumns = useMemo(() => {
     return columns.filter(notHidden2);
   }, [columns]);
-  const handleHeaderClick = useCallback9(
+  const columnMap = useMemo(() => buildColumnMap(columns), [columns]);
+  const handleHeaderClick = useCallback8(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -897,70 +859,77 @@ var RowBasedTable = ({
     },
     [columns, onSort]
   );
-  return /* @__PURE__ */ jsxs7("table", { "aria-rowcount": rowCount, className: `${classBase6}-table`, children: [
-    /* @__PURE__ */ jsx10("colgroup", { children: visibleColumns.map((column, i) => /* @__PURE__ */ jsx10("col", { width: `${column.width}px` }, i)) }),
-    /* @__PURE__ */ jsxs7("thead", { children: [
-      headings.map((colHeaders, i) => /* @__PURE__ */ jsx10("tr", { className: "vuuTable-heading", children: colHeaders.map(({ label, span }, j) => /* @__PURE__ */ jsx10("th", { colSpan: span, className: "vuuTable-headingCell", children: label }, j)) }, i)),
-      /* @__PURE__ */ jsx10("tr", { children: visibleColumns.map((column, i) => {
-        const style = getColumnPinStyle2(column);
-        return isGroupColumn2(column) ? /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs6("div", { "aria-rowcount": rowCount, className: `${classBase5}-table`, role: "table", children: [
+    /* @__PURE__ */ jsxs6("div", { className: `${classBase5}-headers`, role: "rowGroup", children: [
+      headings.map((colHeaders, i) => /* @__PURE__ */ jsx9("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx9("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
+      /* @__PURE__ */ jsx9("div", { role: "row", children: visibleColumns.map((column, i) => {
+        const style = getColumnStyle3(column);
+        return isGroupColumn2(column) ? /* @__PURE__ */ jsx9(
           TableGroupHeaderCell,
           {
             column,
             "data-idx": i,
             onRemoveColumn: onRemoveColumnFromGroupBy,
             onResize: onColumnResize,
+            role: "columnHeader",
             style
           },
           i
-        ) : /* @__PURE__ */ jsx10(
+        ) : /* @__PURE__ */ jsx9(
           TableHeaderCell,
           {
             column,
             "data-idx": i,
+            id: `${tableId}-${i}`,
             onClick: handleHeaderClick,
             onDragStart: handleDragStart,
             onResize: onColumnResize,
+            role: "columnHeader",
             style
           },
           i
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsxs7("tbody", { onContextMenu, children: [
-      data == null ? void 0 : data.map((row, i) => /* @__PURE__ */ jsx10(
-        TableRow,
-        {
-          columns: columnsWithinViewport,
-          height: rowHeight,
-          index: i,
-          onClick: onRowClick,
-          virtualColSpan,
-          onToggleGroup,
-          row
-        },
-        row[RENDER_IDX2]
-      )),
-      /* @__PURE__ */ jsx10("tr", { className: `${classBase6}-filler` })
-    ] })
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: `${classBase5}-body`,
+        onContextMenu,
+        role: "rowGroup",
+        children: data == null ? void 0 : data.map((row) => /* @__PURE__ */ jsx9(
+          TableRow,
+          {
+            columnMap,
+            columns: columnsWithinViewport,
+            offset: getRowOffset(row),
+            onClick: onRowClick,
+            virtualColSpan,
+            onToggleGroup,
+            row
+          },
+          row[RENDER_IDX]
+        ))
+      }
+    )
   ] });
 };
 
-// src/useDataTable.ts
+// src/useTable.ts
 import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
 import {
   applySort,
-  buildColumnMap,
+  buildColumnMap as buildColumnMap2,
   isJsonGroup as isJsonGroup2,
-  metadataKeys as metadataKeys9,
+  metadataKeys as metadataKeys8,
   moveItem as moveItem2
 } from "@vuu-ui/vuu-utils";
 import {
   useCallback as useCallback18,
   useEffect as useEffect5,
   useMemo as useMemo6,
-  useRef as useRef14,
-  useState as useState6
+  useRef as useRef15,
+  useState as useState5
 } from "react";
 
 // src/useDataSource.ts
@@ -968,9 +937,9 @@ import {
   isVuuFeatureAction,
   isVuuFeatureInvocation
 } from "@vuu-ui/vuu-data";
-import { getFullRange, metadataKeys as metadataKeys6, WindowRange } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback10, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState2 } from "react";
-var { SELECTED: SELECTED2 } = metadataKeys6;
+import { getFullRange, metadataKeys as metadataKeys5, WindowRange } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback9, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState2 } from "react";
+var { SELECTED: SELECTED2 } = metadataKeys5;
 function useDataSource({
   dataSource,
   onConfigChange,
@@ -993,7 +962,7 @@ function useDataSource({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const setData = useCallback10(
+  const setData = useCallback9(
     (updates) => {
       for (const row of updates) {
         dataWindow.add(row);
@@ -1003,7 +972,7 @@ function useDataSource({
     },
     [dataWindow]
   );
-  const datasourceMessageHandler = useCallback10(
+  const datasourceMessageHandler = useCallback9(
     (message) => {
       if (message.type === "subscribed") {
         onSubscribed == null ? void 0 : onSubscribed(message);
@@ -1045,7 +1014,7 @@ function useDataSource({
     },
     []
   );
-  const refreshIfUpdated = useCallback10(() => {
+  const refreshIfUpdated = useCallback9(() => {
     if (isMounted.current) {
       if (hasUpdated.current) {
         forceUpdate({});
@@ -1057,27 +1026,27 @@ function useDataSource({
   useEffect(() => {
     rafHandle.current = requestAnimationFrame(refreshIfUpdated);
   }, [refreshIfUpdated]);
-  const adjustRange = useCallback10(
+  const adjustRange = useCallback9(
     (rowCount) => {
       const { from } = dataSource.range;
       const rowRange = { from, to: from + rowCount };
       const fullRange = getFullRange(rowRange, renderBufferSize);
+      dataWindow.setRange(fullRange);
       dataSource.range = rangeRef.current = fullRange;
       dataSource.emit("range", rowRange);
-      dataWindow.setRange(fullRange);
     },
     [dataSource, dataWindow, renderBufferSize]
   );
-  const setRange = useCallback10(
+  const setRange = useCallback9(
     (range2) => {
       const fullRange = getFullRange(range2, renderBufferSize);
-      dataSource.range = rangeRef.current = fullRange;
       dataWindow.setRange(fullRange);
+      dataSource.range = rangeRef.current = fullRange;
       dataSource.emit("range", range2);
     },
     [dataSource, dataWindow, renderBufferSize]
   );
-  const getSelectedRows = useCallback10(() => {
+  const getSelectedRows = useCallback9(() => {
     return dataWindow.getSelectedRows();
   }, [dataWindow]);
   useEffect(() => {
@@ -1136,7 +1105,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) {
@@ -1156,84 +1125,61 @@ var MovingWindow = class {
 
 // src/useDraggableColumn.ts
 import { useDragDrop } from "@heswell/salt-lab";
-import {
-  useCallback as useCallback11,
-  useLayoutEffect,
-  useRef as useRef7,
-  useState as useState3
-} from "react";
-var useDraggableColumn = ({
-  onDrop,
-  tableContainerRef,
-  tableLayout: tableLayoutProp
-}) => {
-  const [tableLayout, setTableLayout] = useState3(tableLayoutProp);
+import { useCallback as useCallback10, useRef as useRef7 } from "react";
+var useDraggableColumn = ({ onDrop }) => {
   const mousePosRef = useRef7();
-  const handleDropSettle = useCallback11(() => {
+  const containerRef = useRef7(null);
+  const handleDropSettle = useCallback10(() => {
     console.log(`handleDropSettle`);
     mousePosRef.current = void 0;
-    setTableLayout("row");
+    containerRef.current = null;
   }, []);
   const { draggable, draggedItemIndex, onMouseDown } = 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 = useCallback11((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");
-  }, []);
-  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 = useCallback10(
+    (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
 import { withinRange } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback12,
+  useCallback as useCallback11,
   useEffect as useEffect2,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect,
   useMemo as useMemo3,
   useRef as useRef8
 } from "react";
@@ -1297,8 +1243,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) {
@@ -1344,7 +1290,7 @@ var useKeyboardNavigation = ({
   const focusedCellPos = useRef8([-1, -1]);
   const focusableCell = useRef8();
   const activeCellPos = useRef8([-1, 0]);
-  const getTableCell = useCallback12(
+  const getTableCell = useCallback11(
     ([rowIdx, colIdx]) => {
       var _a2;
       const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
@@ -1354,14 +1300,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);
@@ -1370,7 +1318,7 @@ var useKeyboardNavigation = ({
     }
     return NULL_CELL_POS;
   };
-  const focusCell = useCallback12(
+  const focusCell = useCallback11(
     (cellPos) => {
       var _a2;
       if (containerRef.current) {
@@ -1392,7 +1340,7 @@ var useKeyboardNavigation = ({
     // be often whilst scrolling - store range in a a ref ?
     [containerRef, getTableCell, requestScroll, viewportRange]
   );
-  const setActiveCell = useCallback12(
+  const setActiveCell = useCallback11(
     (rowIdx, colIdx, fromKeyboard = false) => {
       const pos = [rowIdx, colIdx];
       activeCellPos.current = pos;
@@ -1403,12 +1351,12 @@ var useKeyboardNavigation = ({
     },
     [focusCell]
   );
-  const virtualizeActiveCell = useCallback12(() => {
+  const virtualizeActiveCell = useCallback11(() => {
     var _a2;
     (_a2 = focusableCell.current) == null ? void 0 : _a2.setAttribute("tabindex", "");
     focusableCell.current = void 0;
   }, []);
-  const nextPageItemIdx = useCallback12(
+  const nextPageItemIdx = useCallback11(
     async (key, cellPos) => {
       switch (key) {
         case PageDown:
@@ -1428,7 +1376,7 @@ var useKeyboardNavigation = ({
     },
     [requestScroll]
   );
-  const handleFocus = useCallback12(() => {
+  const handleFocus = useCallback11(() => {
     var _a2;
     if (disableHighlightOnFocus !== true) {
       if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
@@ -1439,7 +1387,7 @@ var useKeyboardNavigation = ({
       }
     }
   }, [disableHighlightOnFocus, containerRef]);
-  const navigateChildItems = useCallback12(
+  const navigateChildItems = useCallback11(
     async (key) => {
       const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
       const [rowIdx, colIdx] = activeCellPos.current;
@@ -1449,7 +1397,7 @@ var useKeyboardNavigation = ({
     },
     [columnCount, nextPageItemIdx, rowCount, setActiveCell]
   );
-  const handleKeyDown = useCallback12(
+  const handleKeyDown = useCallback11(
     (e) => {
       if (data.length > 0 && isNavigationKey(e.key)) {
         e.preventDefault();
@@ -1459,7 +1407,7 @@ var useKeyboardNavigation = ({
     },
     [data, navigateChildItems]
   );
-  const handleClick = useCallback12(
+  const handleClick = useCallback11(
     // Might not be a cell e.g the Settings button
     (evt) => {
       const target = evt.target;
@@ -1478,7 +1426,7 @@ var useKeyboardNavigation = ({
       onKeyDown: handleKeyDown
     };
   }, [handleClick, handleFocus, handleKeyDown]);
-  useLayoutEffect2(() => {
+  useLayoutEffect(() => {
     const { current: cellPos } = activeCellPos;
     const withinViewport = cellPos[0] >= viewportFirstRow && cellPos[0] <= viewportLastRow;
     if (focusableCell.current && !withinViewport) {
@@ -1504,10 +1452,10 @@ var useKeyboardNavigation = ({
 };
 
 // src/useMeasuredContainer.ts
-import { useCallback as useCallback14, useRef as useRef10, useState as useState4 } from "react";
+import { useCallback as useCallback13, useRef as useRef10, useState as useState3 } from "react";
 
 // src/useResizeObserver.ts
-import { useCallback as useCallback13, useEffect as useEffect3, useRef as useRef9 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect3, useRef as useRef9 } from "react";
 var observedMap = /* @__PURE__ */ new Map();
 var getTargetSize = (element, size, dimension) => {
   switch (dimension) {
@@ -1559,7 +1507,7 @@ var resizeObserver = new ResizeObserver((entries) => {
 });
 function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
   const dimensionsRef = useRef9(dimensions);
-  const measure = useCallback13((target) => {
+  const measure = useCallback12((target) => {
     const { width, height } = target.getBoundingClientRect();
     const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
     return dimensionsRef.current.reduce(
@@ -1633,14 +1581,15 @@ var useMeasuredContainer = ({
   width
 }) => {
   const containerRef = useRef10(null);
-  const [size, setSize] = useState4({
+  const [size, setSize] = useState3({
     outer: {
       height: height != null ? height : "100%",
       width: width != null ? width : "100%"
     }
   });
-  const onResize = useCallback14(
+  const onResize = useCallback13(
     ({ 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)) ? {
@@ -1663,9 +1612,9 @@ var useMeasuredContainer = ({
 };
 
 // src/useSelection.ts
-import { deselectItem, metadataKeys as metadataKeys7, selectItem } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback15, useRef as useRef11 } from "react";
-var { IDX: IDX2, SELECTED: SELECTED3 } = metadataKeys7;
+import { deselectItem, metadataKeys as metadataKeys6, selectItem } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback14, useRef as useRef11 } from "react";
+var { IDX: IDX2, SELECTED: SELECTED3 } = metadataKeys6;
 var NO_SELECTION = [];
 var useSelection = ({
   selectionModel,
@@ -1674,7 +1623,7 @@ var useSelection = ({
   selectionModel === "extended" || selectionModel === "checkbox";
   const lastActiveRef = useRef11(-1);
   const selectedRef = useRef11(NO_SELECTION);
-  const handleSelectionChange = useCallback15(
+  const handleSelectionChange = useCallback14(
     (row, rangeSelect, keepExistingSelection) => {
       const { [IDX2]: idx, [SELECTED3]: isSelected } = row;
       const { current: active } = lastActiveRef;
@@ -1715,14 +1664,14 @@ import {
   isPinned,
   isTypeDescriptor,
   logger,
-  metadataKeys as metadataKeys8,
+  metadataKeys as metadataKeys7,
   sortPinnedColumns,
   stripFilterFromColumns
 } from "@vuu-ui/vuu-utils";
 import { useReducer } from "react";
 var { info } = logger("useTableModel");
 var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = metadataKeys8.count;
+var KEY_OFFSET = metadataKeys7.count;
 var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
 var getCellRendererForColumn = (column) => {
   var _a;
@@ -2015,78 +1964,52 @@ function replaceColumn(state, column) {
 }
 
 // src/useTableScroll.ts
-import { useCallback as useCallback16, useRef as useRef12 } from "react";
+import { useCallback as useCallback15, useRef as useRef12 } from "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 = useRef12(null);
+  const callbackRef = useCallback15(
+    (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 contentContainerScrolledRef = useRef12(false);
   const scrollPosRef = useRef12({ scrollTop: 0, scrollLeft: 0 });
   const scrollbarContainerRef = useRef12(null);
   const contentContainerRef = useRef12(null);
-  const tableContainerRef = useRef12(null);
-  const contentContainerScrolledRef = useRef12(false);
   const {
     maxScrollContainerScrollHorizontal: maxScrollLeft,
     maxScrollContainerScrollVertical: maxScrollTop
   } = viewport;
-  const scrollTable = useCallback16(
-    (scrollLeft, scrollTop) => {
-      const { current: tableContainer } = tableContainerRef;
-      if (tableContainer) {
-        tableContainer.scrollTo({
-          top: scrollTop,
-          left: scrollLeft,
-          behavior: "auto"
-        });
-      }
-    },
-    [tableContainerRef]
-  );
-  const handleTableContainerScroll = useCallback16(() => {
-    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 = useCallback16(() => {
-    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 = useCallback16(() => {
+  const handleScrollbarContainerScroll = useCallback15(() => {
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
     const { current: contentContainerScrolled } = contentContainerScrolledRef;
@@ -2102,12 +2025,71 @@ var useTableScroll = ({
         top: rootScrollTop,
         behavior: "auto"
       });
-      scrollTable(rootScrollLeft, rootScrollTop);
     }
-  }, [contentContainerRef, scrollbarContainerRef, scrollTable]);
-  const requestScroll = useCallback16(
+  }, []);
+  const handleContentContainerScroll = useCallback15(() => {
+    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 = useCallback15(
+    (el) => {
+      scrollbarContainerRef.current = el;
+      el.addEventListener("scroll", handleScrollbarContainerScroll, {
+        passive: true
+      });
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleDetachScrollbarContainer = useCallback15(
+    (el) => {
+      scrollbarContainerRef.current = null;
+      el.removeEventListener("scroll", handleScrollbarContainerScroll);
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleAttachContentContainer = useCallback15(
+    (el) => {
+      contentContainerRef.current = el;
+      el.addEventListener("scroll", handleContentContainerScroll, {
+        passive: true
+      });
+    },
+    [handleContentContainerScroll]
+  );
+  const handleDetachContentContainer = useCallback15(
+    (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 = useCallback15(
     (scrollRequest) => {
-      const { current: scrollbarContainer } = scrollbarContainerRef;
+      const { current: scrollbarContainer } = contentContainerRef;
       if (scrollbarContainer) {
         contentContainerScrolledRef.current = false;
         if (scrollRequest.type === "scroll-page") {
@@ -2116,7 +2098,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,
@@ -2125,7 +2107,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,
@@ -2134,39 +2116,40 @@ 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
-import { useMemo as useMemo4 } from "react";
+import { useCallback as useCallback16, useMemo as useMemo4, useRef as useRef13 } from "react";
+import {
+  actualRowPositioning,
+  virtualRowPositioning
+} from "@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;
@@ -2193,66 +2176,101 @@ var useTableViewport = ({
   rowHeight,
   size
 }) => {
+  const pctScrollTopRef = useRef13(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 } = useMemo4(
     () => measurePinnedColumns(columns),
     [columns]
   );
-  const viewportMeasurements = useMemo4(() => {
+  const [actualRowOffset, actualRowAtPosition] = useMemo4(
+    () => actualRowPositioning(rowHeight),
+    [rowHeight]
+  );
+  const [getRowOffset, getRowAtPosition] = useMemo4(() => {
+    if (virtualisedExtent) {
+      return virtualRowPositioning(
+        rowHeight,
+        virtualisedExtent,
+        pctScrollTopRef
+      );
+    } else {
+      return [actualRowOffset, actualRowAtPosition];
+    }
+  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
+  const setPctScrollTop = useCallback16((scrollPct) => {
+    pctScrollTopRef.current = scrollPct;
+  }, []);
+  return useMemo4(() => {
     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
-import { getColumnsInViewport, itemsChanged } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback17, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef13, useState as useState5 } from "react";
+import {
+  getColumnsInViewport,
+  itemsChanged
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback17, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef14, useState as useState4 } from "react";
 var useVirtualViewport = ({
   columns,
-  rowHeight,
+  getRowAtPosition,
   setRange,
   viewportMeasurements
 }) => {
-  const firstRowRef = useRef13(-1);
+  const firstRowRef = useRef14(-1);
   const {
     rowCount: viewportRowCount,
-    scrollContentWidth: contentWidth,
+    contentWidth,
     maxScrollContainerScrollHorizontal
   } = viewportMeasurements;
   const availableWidth = contentWidth - maxScrollContainerScrollHorizontal;
-  const scrollLeftRef = useRef13(0);
+  const scrollLeftRef = useRef14(0);
   const [visibleColumns, preSpan] = useMemo5(
     () => getColumnsInViewport(
       columns,
@@ -2261,11 +2279,11 @@ var useVirtualViewport = ({
     ),
     [availableWidth, columns]
   );
-  const preSpanRef = useRef13(preSpan);
+  const preSpanRef = useRef14(preSpan);
   useEffect4(() => {
     setColumnsWithinViewport(visibleColumns);
   }, [visibleColumns]);
-  const [columnsWithinViewport, setColumnsWithinViewport] = useState5(visibleColumns);
+  const [columnsWithinViewport, setColumnsWithinViewport] = useState4(visibleColumns);
   const handleHorizontalScroll = useCallback17(
     (scrollLeft) => {
       scrollLeftRef.current = scrollLeft;
@@ -2283,13 +2301,13 @@ var useVirtualViewport = ({
   );
   const handleVerticalScroll = useCallback17(
     (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,
@@ -2300,10 +2318,10 @@ var useVirtualViewport = ({
   };
 };
 
-// src/useDataTable.ts
+// src/useTable.ts
 var NO_ROWS = [];
-var { KEY: KEY2, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys9;
-var useDataTable = ({
+var { KEY: KEY2, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys8;
+var useTable = ({
   config,
   dataSource,
   headerHeight,
@@ -2314,13 +2332,12 @@ var useDataTable = ({
   renderBufferSize = 0,
   rowHeight,
   selectionModel,
-  tableLayout,
   ...measuredProps
 }) => {
   var _a, _b;
-  const [rowCount, setRowCount] = useState6(0);
-  const expectConfigChangeRef = useRef14(false);
-  const dataSourceRef = useRef14();
+  const [rowCount, setRowCount] = useState5(0);
+  const expectConfigChangeRef = useRef15(false);
+  const dataSourceRef = useRef15();
   dataSourceRef.current = dataSource;
   if (dataSource === void 0) {
     throw Error("no data source provided to DataTable");
@@ -2340,11 +2357,16 @@ var useDataTable = ({
     },
     [dispatchColumnAction]
   );
-  const handleContextMenuAction = useContextMenu3({
+  const handleContextMenuAction = useContextMenu({
     dataSource,
     onPersistentColumnOperation: handlePersistentColumnOperation
   });
-  const viewportMeasurements = useTableViewport({
+  const {
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop,
+    ...viewportMeasurements
+  } = useTableViewport({
     columns,
     headerHeight,
     headings,
@@ -2386,7 +2408,7 @@ var useDataTable = ({
     renderBufferSize,
     viewportRowCount: viewportMeasurements.rowCount
   });
-  const dataRef = useRef14();
+  const dataRef = useRef15();
   dataRef.current = data;
   const handleSort = useCallback18(
     (column, extendSort = false, sortType) => {
@@ -2465,14 +2487,20 @@ var useDataTable = ({
     virtualColSpan
   } = useVirtualViewport({
     columns,
-    rowHeight,
+    getRowAtPosition,
     setRange,
     viewportMeasurements
   });
+  const handleVerticalScroll = useCallback18(
+    (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
   });
@@ -2486,10 +2514,14 @@ var useDataTable = ({
   });
   const handleRemoveColumnFromGroupBy = useCallback18(
     (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]
@@ -2506,9 +2538,7 @@ var useDataTable = ({
     [dataSource, dispatchColumnAction]
   );
   const draggableHook = useDraggableColumn({
-    onDrop: handleDropColumn,
-    tableContainerRef: scrollProps.tableContainerRef,
-    tableLayout
+    onDrop: handleDropColumn
   });
   useEffect5(() => {
     if (dataSourceRef.current) {
@@ -2546,11 +2576,11 @@ var useDataTable = ({
       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 = buildColumnMap(columns2);
+        const columnMap = buildColumnMap2(columns2);
         const rowIndex = parseInt((_a2 = rowEl.ariaRowIndex) != null ? _a2 : "-1");
         const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
         const row = currentData.find(([idx]) => idx === rowIndex);
@@ -2573,6 +2603,7 @@ var useDataTable = ({
     columnsWithinViewport,
     data,
     dispatchColumnAction,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     onColumnResize: handleColumnResize,
@@ -2590,10 +2621,10 @@ var useDataTable = ({
 };
 
 // src/Table.tsx
-import cx8 from "classnames";
+import cx7 from "classnames";
 import { isDataLoading } from "@vuu-ui/vuu-utils";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var classBase7 = "vuuTable";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase6 = "vuuTable";
 var Table = ({
   allowConfigEditing: showSettings = false,
   className: classNameProp,
@@ -2611,7 +2642,6 @@ var Table = ({
   rowHeight = 20,
   selectionModel = "extended",
   style: styleProp,
-  tableLayout: tableLayoutProp = "row",
   width,
   zebraStripes = false,
   ...props
@@ -2625,10 +2655,9 @@ var Table = ({
     draggedItemIndex,
     handleContextMenuAction,
     scrollProps,
-    tableLayout,
     viewportMeasurements,
     ...tableProps
-  } = useDataTable({
+  } = useTable({
     config,
     dataSource,
     renderBufferSize,
@@ -2640,43 +2669,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`
+    "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
+    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
+    "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}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
-  };
-  const Table2 = tableLayout === "column" ? ColumnBasedTable : RowBasedTable;
-  const className = cx8(classBase7, classNameProp, {
-    [`${classBase7}-zebra`]: zebraStripes,
-    [`${classBase7}-loading`]: isDataLoading(tableProps.columns)
+  const className = cx7(classBase6, classNameProp, {
+    [`${classBase6}-zebra`]: zebraStripes,
+    [`${classBase6}-loading`]: isDataLoading(tableProps.columns)
   });
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     ContextMenuProvider,
     {
       menuActionHandler: handleContextMenuAction,
       menuBuilder: buildContextMenuDescriptors(dataSource),
-      children: /* @__PURE__ */ jsxs8(
+      children: /* @__PURE__ */ jsxs7(
         "div",
         {
+          ...props,
           ...containerProps,
           className,
           id,
@@ -2684,49 +2706,36 @@ var Table = ({
           style,
           tabIndex: -1,
           children: [
-            innerSize ? /* @__PURE__ */ jsx11(
+            innerSize ? /* @__PURE__ */ jsx10(
               "div",
               {
-                className: `${classBase7}-scrollbarContainer`,
-                onScroll: scrollProps.onScrollbarContainerScroll,
+                className: `${classBase6}-scrollbarContainer`,
                 ref: scrollProps.scrollbarContainerRef,
-                style: scrollbarContainerStyle,
-                children: /* @__PURE__ */ jsx11("div", { className: `${classBase7}-scrollContent` })
+                children: /* @__PURE__ */ jsx10("div", { className: `${classBase6}-scrollbarContent` })
               }
             ) : null,
-            innerSize ? /* @__PURE__ */ jsxs8(
+            innerSize ? /* @__PURE__ */ jsxs7(
               "div",
               {
-                className: `${classBase7}-contentContainer`,
-                onScroll: scrollProps.onContentContainerScroll,
+                className: `${classBase6}-contentContainer`,
                 ref: scrollProps.contentContainerRef,
-                ...props,
                 children: [
-                  /* @__PURE__ */ jsx11("div", { className: `${classBase7}-scrollContent` }),
-                  /* @__PURE__ */ jsx11(
-                    "div",
+                  /* @__PURE__ */ jsx10(
+                    RowBasedTable,
                     {
-                      className: `${classBase7}-tableContainer`,
-                      onScroll: scrollProps.onTableContainerScroll,
-                      ref: scrollProps.tableContainerRef,
-                      children: /* @__PURE__ */ jsx11(
-                        Table2,
-                        {
-                          ...tableProps,
-                          headerHeight,
-                          rowHeight
-                        }
-                      )
+                      ...tableProps,
+                      headerHeight,
+                      tableId: id
                     }
                   ),
                   draggable
                 ]
               }
             ) : null,
-            showSettings && innerSize ? /* @__PURE__ */ jsx11(
+            showSettings && innerSize ? /* @__PURE__ */ jsx10(
               Button,
               {
-                className: `${classBase7}-settings`,
+                className: `${classBase6}-settings`,
                 "data-icon": "settings",
                 onClick: onShowSettings,
                 variant: "secondary"
@@ -2740,15 +2749,15 @@ var Table = ({
 };
 
 // src/cell-renderers/json-cell/JsonCell.tsx
-import cx9 from "classnames";
+import cx8 from "classnames";
 import {
   isJsonAttribute,
-  metadataKeys as metadataKeys10,
+  metadataKeys as metadataKeys9,
   registerComponent
 } from "@vuu-ui/vuu-utils";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var classBase8 = "vuuJsonCell";
-var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY3 } = metadataKeys10;
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var classBase7 = "vuuJsonCell";
+var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY3 } = metadataKeys9;
 var localKey = (key) => {
   const pos = key.lastIndexOf("|");
   if (pos === -1) {
@@ -2769,19 +2778,19 @@ var JsonCell = ({ column, row }) => {
     isToggle = true;
   }
   const rowKey = localKey(row[KEY3]);
-  const className = cx9({
-    [`${classBase8}-name`]: rowKey === value,
-    [`${classBase8}-value`]: rowKey !== value,
-    [`${classBase8}-group`]: isToggle
+  const className = cx8({
+    [`${classBase7}-name`]: rowKey === value,
+    [`${classBase7}-value`]: rowKey !== value,
+    [`${classBase7}-group`]: isToggle
   });
   if (isToggle) {
     const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
-    return /* @__PURE__ */ jsxs9("span", { className, children: [
-      /* @__PURE__ */ jsx12("span", { className: `${classBase8}-value`, children: value }),
-      /* @__PURE__ */ jsx12("span", { className: `${classBase8}-toggle`, "data-icon": toggleIcon })
+    return /* @__PURE__ */ jsxs8("span", { className, children: [
+      /* @__PURE__ */ jsx11("span", { className: `${classBase7}-value`, children: value }),
+      /* @__PURE__ */ jsx11("span", { className: `${classBase7}-toggle`, "data-icon": toggleIcon })
     ] });
   } else if (value) {
-    return /* @__PURE__ */ jsx12("span", { className, children: value });
+    return /* @__PURE__ */ jsx11("span", { className, children: value });
   } else {
     return null;
   }