@vuu-ui/vuu-table 0.8.22-debug → 0.8.23-debug

package/esm/index.js

@@ -1,5 +1,5 @@
 // src/header-cell/GroupHeaderCellNext.tsx
-import { OverflowContainer } from "@vuu-ui/vuu-layout";
+import { OverflowContainer } from "@vuu-ui/vuu-ui-controls";
 import { useLayoutEffectSkipFirst } from "@vuu-ui/vuu-utils";
 import cx3 from "clsx";
 import { useCallback as useCallback4, useRef as useRef3, useState as useState2 } from "react";
@@ -82,7 +82,7 @@ var ColumnResizer = ({
   onDragEnd = NOOP,
   onDragStart = NOOP
 }) => {
-  const position = useRef(0);
+  const positionRef = useRef({ start: 0, now: 0 });
   const onMouseMove = useCallback2(
     (e) => {
       if (e.stopPropagation) {
@@ -91,11 +91,13 @@ var ColumnResizer = ({
       if (e.preventDefault) {
         e.preventDefault();
       }
+      const { current: position } = positionRef;
       const x = Math.round(e.clientX);
-      const moveBy = x - position.current;
-      position.current = x;
+      const moveBy = x - position.now;
+      const distanceMoved = position.now - position.start;
+      positionRef.current.now = x;
       if (moveBy !== 0) {
-        onDrag(e, moveBy);
+        onDrag(e, moveBy, distanceMoved);
       }
     },
     [onDrag]
@@ -104,14 +106,17 @@ var ColumnResizer = ({
     (e) => {
       window.removeEventListener("mouseup", onMouseUp);
       window.removeEventListener("mousemove", onMouseMove);
-      onDragEnd(e);
+      const { current: position } = positionRef;
+      const distanceMoved = position.now - position.start;
+      onDragEnd(e, distanceMoved);
     },
     [onDragEnd, onMouseMove]
   );
   const handleMouseDown = useCallback2(
     (e) => {
+      const { current: position } = positionRef;
       onDragStart(e);
-      position.current = Math.round(e.clientX);
+      position.now = position.start = Math.round(e.clientX);
       window.addEventListener("mouseup", onMouseUp);
       window.addEventListener("mousemove", onMouseMove);
       if (e.stopPropagation) {
@@ -133,26 +138,27 @@ var useTableColumnResize = ({
   onResize,
   rootRef
 }) => {
-  const widthRef = useRef2(0);
+  const widthRef = useRef2({ start: 0, now: 0 });
   const [isResizing, setResizing] = useState(false);
   const { name } = column;
   const handleResizeStart = useCallback3(() => {
     if (onResize && rootRef.current) {
-      const { width } = rootRef.current.getBoundingClientRect();
-      widthRef.current = Math.round(width);
+      const { current: width } = widthRef;
+      const { width: measuredWidth } = rootRef.current.getBoundingClientRect();
+      width.start = width.now = Math.round(measuredWidth);
       setResizing(true);
       onResize == null ? void 0 : onResize("begin", name);
     }
   }, [name, onResize, rootRef]);
   const handleResize = useCallback3(
-    (_evt, moveBy) => {
+    (_evt, moveBy, totalDistanceMoved) => {
       if (rootRef.current) {
         if (onResize) {
-          const { width } = rootRef.current.getBoundingClientRect();
-          const newWidth = Math.round(width) + moveBy;
-          if (newWidth !== widthRef.current && newWidth > 0) {
+          const { current: width } = widthRef;
+          const newWidth = width.start + totalDistanceMoved;
+          if (newWidth !== width.now && newWidth > 0) {
             onResize("resize", name, newWidth);
-            widthRef.current = newWidth;
+            width.now = newWidth;
           }
         }
       }
@@ -161,7 +167,8 @@ var useTableColumnResize = ({
   );
   const handleResizeEnd = useCallback3(() => {
     if (onResize) {
-      onResize("end", name, widthRef.current);
+      const { current: width } = widthRef;
+      onResize("end", name, width.now);
       setTimeout(() => {
         setResizing(false);
       }, 80);
@@ -276,7 +283,7 @@ var GroupHeaderCellNext = ({
                 {
                   ...columnPillProps,
                   column,
-                  key: column.key
+                  key: column.name
                 }
               );
             })
@@ -403,17 +410,17 @@ var HeaderCell = ({
 };
 
 // src/Table.tsx
+import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
 import {
   MeasuredContainer
-} from "@vuu-ui/vuu-layout";
-import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
-import { metadataKeys as metadataKeys7, useId } from "@vuu-ui/vuu-utils";
+} from "@vuu-ui/vuu-ui-controls";
+import { metadataKeys as metadataKeys6, useId } from "@vuu-ui/vuu-utils";
 import { useForkRef } from "@salt-ds/core";
 import cx9 from "clsx";
 import {
   forwardRef,
-  useRef as useRef14,
-  useState as useState7
+  useRef as useRef15,
+  useState as useState8
 } from "react";
 
 // src/Row.tsx
@@ -441,7 +448,7 @@ var TableCell = ({
   row
 }) => {
   const { className, style } = useCell(column, classBase4);
-  const { CellRenderer, name, valueFormatter } = column;
+  const { CellRenderer, index, name, valueFormatter } = column;
   const dataIdx = columnMap[name];
   const handleDataItemEdited = useCallback7(
     (value) => {
@@ -468,6 +475,7 @@ var TableCell = ({
   return /* @__PURE__ */ jsx8(
     "div",
     {
+      "aria-colindex": index,
       className,
       onClick: onClick ? handleClick : void 0,
       role: "cell",
@@ -492,9 +500,14 @@ import cx6 from "clsx";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var { IS_LEAF } = metadataKeys;
 var classBase5 = "vuuTableGroupCell";
-var TableGroupCell = ({ column, onClick, row }) => {
+var TableGroupCell = ({
+  column,
+  columnMap,
+  onClick,
+  row
+}) => {
   const { columns } = column;
-  const [value, offset] = getGroupValueAndOffset(columns, row);
+  const [value, offset] = getGroupValueAndOffset(columns, row, columnMap);
   const { className, style } = useCell(column, classBase5);
   const handleClick = useCallback8(
     (evt) => {
@@ -521,8 +534,7 @@ var TableGroupCell = ({ column, onClick, row }) => {
 };
 
 // src/Row.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-import { createElement as createElement2 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var { IDX, IS_EXPANDED, SELECTED } = metadataKeys2;
 var classBase6 = "vuuTableRow";
 var Row = memo(
@@ -536,6 +548,7 @@ var Row = memo(
     onClick,
     onDataEdited,
     onToggleGroup,
+    virtualColSpan = 0,
     zebraStripes = false,
     ...htmlAttributes
   }) => {
@@ -564,66 +577,223 @@ var Row = memo(
     const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
     const handleGroupCellClick = useCallback9(
       (evt, column) => {
-        if (isGroupColumn(column) || isJsonGroup(column, row)) {
+        if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {
           evt.stopPropagation();
           onToggleGroup == null ? void 0 : onToggleGroup(row, column);
         }
       },
-      [onToggleGroup, row]
+      [columnMap, onToggleGroup, row]
     );
-    return /* @__PURE__ */ createElement2(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         ...htmlAttributes,
-        key: `row-${row[0]}`,
         role: "row",
         className,
         onClick: handleRowClick,
-        style
-      },
-      /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyLeft` }),
-      columns.filter(isNotHidden).map((column) => {
-        const isGroup = isGroupColumn(column);
-        const isJsonCell = isJsonColumn(column);
-        const Cell = isGroup ? TableGroupCell : TableCell;
-        return /* @__PURE__ */ jsx10(
-          Cell,
-          {
-            column,
-            columnMap,
-            onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
-            onDataEdited,
-            row
-          },
-          column.key
-        );
-      }),
-      /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyRight` })
+        style,
+        children: [
+          /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyLeft` }),
+          virtualColSpan > 0 ? /* @__PURE__ */ jsx10("div", { className: "vuuTableCell", style: { width: virtualColSpan } }) : null,
+          columns.filter(isNotHidden).map((column) => {
+            const isGroup = isGroupColumn(column);
+            const isJsonCell = isJsonColumn(column);
+            const Cell = isGroup ? TableGroupCell : TableCell;
+            return /* @__PURE__ */ jsx10(
+              Cell,
+              {
+                column,
+                columnMap,
+                onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+                onDataEdited,
+                row
+              },
+              column.name
+            );
+          }),
+          /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyRight` })
+        ]
+      }
     );
   }
 );
 Row.displayName = "Row";
 
-// src/useTable.ts
+// src/table-header/TableHeader.tsx
+import { isGroupColumn as isGroupColumn2, isNotHidden as isNotHidden2 } from "@vuu-ui/vuu-utils";
+import cx8 from "clsx";
+import { memo as memo2 } from "react";
+
+// src/table-header/useTableHeader.ts
 import {
   useDragDrop
 } from "@vuu-ui/vuu-ui-controls";
+import { moveColumnTo, visibleColumnAtIndex } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback10, useRef as useRef6 } from "react";
+var useTableHeader = ({
+  columns,
+  onMoveColumn,
+  onSortColumn,
+  tableConfig
+}) => {
+  const containerRef = useRef6(null);
+  const scrollingContainerRef = useRef6(null);
+  const setContainerRef = useCallback10((el) => {
+    containerRef.current = el;
+    if (el) {
+      scrollingContainerRef.current = el.closest(".vuuTable-contentContainer");
+    } else {
+      scrollingContainerRef.current = null;
+    }
+  }, []);
+  const handleDropColumnHeader = useCallback10(
+    ({ fromIndex: moveFrom, toIndex: moveTo }) => {
+      const column = columns[moveFrom];
+      const orderedColumns = moveColumnTo(columns, column, moveTo);
+      const ofColumn = ({ name }) => (col) => col.name === name;
+      const targetIndex = orderedColumns.findIndex(ofColumn(column));
+      const nextColumn = orderedColumns[targetIndex + 1];
+      const insertPos = nextColumn ? tableConfig.columns.findIndex(ofColumn(nextColumn)) : -1;
+      if (moveTo > moveFrom && insertPos !== -1) {
+        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));
+      } else {
+        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));
+      }
+    },
+    [columns, onMoveColumn, tableConfig.columns]
+  );
+  const handleColumnHeaderClick = useCallback10(
+    (evt) => {
+      var _a;
+      const targetElement = evt.target;
+      const headerCell = targetElement.closest(
+        ".vuuTableHeaderCell"
+      );
+      const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
+      const column = visibleColumnAtIndex(columns, colIdx);
+      const isAdditive = evt.shiftKey;
+      column && onSortColumn(column, isAdditive);
+    },
+    [columns, onSortColumn]
+  );
+  const {
+    onMouseDown: columnHeaderDragMouseDown,
+    draggable: draggableColumn,
+    ...dragDropHook
+  } = useDragDrop({
+    allowDragDrop: true,
+    containerRef,
+    draggableClassName: `vuuTable`,
+    itemQuery: ".vuuTableHeaderCell",
+    onDrop: handleDropColumnHeader,
+    orientation: "horizontal",
+    scrollingContainerRef
+  });
+  return {
+    draggableColumn,
+    draggedColumnIndex: dragDropHook.draggedItemIndex,
+    onClick: handleColumnHeaderClick,
+    onMouseDown: columnHeaderDragMouseDown,
+    setContainerRef
+  };
+};
+
+// src/table-header/TableHeader.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var TableHeader = memo2(
+  ({
+    classBase: classBase10 = "vuuTable",
+    columns,
+    headings,
+    onMoveColumn,
+    onMoveGroupColumn,
+    onRemoveGroupColumn,
+    onResizeColumn,
+    onSortColumn,
+    tableConfig,
+    tableId,
+    virtualColSpan = 0
+  }) => {
+    const {
+      draggableColumn,
+      draggedColumnIndex,
+      onClick,
+      onMouseDown,
+      setContainerRef
+    } = useTableHeader({
+      columns,
+      onMoveColumn,
+      onSortColumn,
+      tableConfig
+    });
+    return /* @__PURE__ */ jsxs8("div", { className: `${classBase10}-col-headings`, ref: setContainerRef, children: [
+      headings.map((colHeaders, i) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
+      /* @__PURE__ */ jsxs8("div", { className: `${classBase10}-col-headers`, role: "row", children: [
+        virtualColSpan > 0 ? /* @__PURE__ */ jsx11(
+          "div",
+          {
+            role: "cell",
+            className: "vuuTableCell",
+            style: { width: virtualColSpan }
+          }
+        ) : null,
+        columns.filter(isNotHidden2).map(
+          (col, i) => isGroupColumn2(col) ? /* @__PURE__ */ jsx11(
+            GroupHeaderCellNext,
+            {
+              "aria-colindex": col.index,
+              column: col,
+              "data-index": i,
+              onMoveColumn: onMoveGroupColumn,
+              onRemoveColumn: onRemoveGroupColumn,
+              onResize: onResizeColumn
+            },
+            col.name
+          ) : /* @__PURE__ */ jsx11(
+            HeaderCell,
+            {
+              "aria-colindex": col.index,
+              className: cx8({
+                "vuuDraggable-dragAway": i === draggedColumnIndex
+              }),
+              column: col,
+              "data-index": i,
+              id: `${tableId}-col-${i}`,
+              onClick,
+              onMouseDown,
+              onResize: onResizeColumn
+            },
+            col.name
+          )
+        ),
+        draggableColumn
+      ] })
+    ] });
+  }
+);
+TableHeader.displayName = "TableHeader";
+
+// src/useTable.ts
+import {
+  useDragDrop as useDragDrop2
+} from "@vuu-ui/vuu-ui-controls";
 import {
   applySort,
   buildColumnMap as buildColumnMap2,
   getIndexFromRowElement as getIndexFromRowElement3,
-  isGroupColumn as isGroupColumn3,
+  isGroupColumn as isGroupColumn4,
   isJsonGroup as isJsonGroup2,
   isValidNumber,
-  metadataKeys as metadataKeys6,
+  metadataKeys as metadataKeys5,
   updateColumn,
   useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback18,
+  useCallback as useCallback19,
   useEffect as useEffect4,
   useMemo as useMemo6,
-  useState as useState6
+  useRef as useRef14,
+  useState as useState7
 } from "react";
 
 // src/context-menu/buildContextMenuDescriptors.ts
@@ -946,7 +1116,7 @@ var updateTableConfig = (config, action) => {
 // src/useCellEditing.ts
 import { isCharacterKey } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback10
+  useCallback as useCallback11
 } from "react";
 
 // src/table-dom-utils.ts
@@ -965,7 +1135,7 @@ var getTableCell = (containerRef, [rowIdx, colIdx]) => {
     return cell;
   }
 };
-var cellIsEditable = (cell) => cell.classList.contains("vuuTableCell-editable");
+var cellIsEditable = (cell) => cell == null ? void 0 : cell.classList.contains("vuuTableCell-editable");
 var cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
 function getRowIndex(rowEl) {
   if (rowEl) {
@@ -978,13 +1148,34 @@ function getRowIndex(rowEl) {
 }
 var closestRow = (el) => el.closest('[role="row"]');
 var closestRowIndex = (el) => getRowIndex(closestRow(el));
+var NO_SCROLL_NECESSARY = [void 0, void 0];
+var howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
+  if (contentContainer) {
+    const viewport = contentContainer == null ? void 0 : contentContainer.getBoundingClientRect();
+    const upperBoundary = viewport.top + totalHeaderHeight;
+    const row = rowEl.getBoundingClientRect();
+    if (row) {
+      if (row.bottom > viewport.bottom) {
+        return ["down", row.bottom - viewport.bottom];
+      } else if (row.top < upperBoundary) {
+        return ["up", row.top - upperBoundary];
+      } else {
+        return NO_SCROLL_NECESSARY;
+      }
+    } else {
+      throw Error("Whats going on, row not found");
+    }
+  } else {
+    throw Error("Whats going on, scrollbar container not found");
+  }
+};
 
 // src/useCellEditing.ts
 var useCellEditing = ({ navigate }) => {
-  const commitHandler = useCallback10(() => {
+  const commitHandler = useCallback11(() => {
     navigate();
   }, [navigate]);
-  const editInput = useCallback10(
+  const editInput = useCallback11(
     (evt) => {
       const cellEl = evt.target;
       const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
@@ -995,7 +1186,7 @@ var useCellEditing = ({ navigate }) => {
     },
     []
   );
-  const focusInput = useCallback10(
+  const focusInput = useCallback11(
     (evt) => {
       const cellEl = evt.target;
       const input = cellEl.querySelector("input");
@@ -1006,7 +1197,7 @@ var useCellEditing = ({ navigate }) => {
     },
     []
   );
-  const handleKeyDown = useCallback10(
+  const handleKeyDown = useCallback11(
     (e) => {
       const el = e.target;
       if (cellIsTextInput(el)) {
@@ -1019,7 +1210,7 @@ var useCellEditing = ({ navigate }) => {
     },
     [editInput, focusInput]
   );
-  const handleDoubleClick = useCallback10(
+  const handleDoubleClick = useCallback11(
     (e) => {
       const el = e.target;
       if (el.matches("input") || el.querySelector("input")) {
@@ -1029,14 +1220,14 @@ var useCellEditing = ({ navigate }) => {
     },
     [editInput]
   );
-  const handleBlur = useCallback10(
+  const handleBlur = useCallback11(
     (e) => {
       const el = e.target;
       el.removeEventListener("vuu-commit", commitHandler, true);
     },
     [commitHandler]
   );
-  const handleFocus = useCallback10(
+  const handleFocus = useCallback11(
     (e) => {
       const el = e.target;
       el.addEventListener("vuu-commit", commitHandler, true);
@@ -1052,8 +1243,8 @@ var useCellEditing = ({ navigate }) => {
 };
 
 // src/useDataSource.ts
-import { getFullRange, NULL_RANGE } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback11, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState4 } from "react";
+import { getFullRange, NULL_RANGE, rangesAreSame } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback12, useEffect, useMemo as useMemo2, useRef as useRef7, useState as useState4 } from "react";
 
 // src/moving-window.ts
 import {
@@ -1127,16 +1318,16 @@ var useDataSource = ({
   renderBufferSize = 0
 }) => {
   const [, forceUpdate] = useState4(null);
-  const data = useRef6([]);
-  const isMounted = useRef6(true);
-  const hasUpdated = useRef6(false);
-  const rangeRef = useRef6(NULL_RANGE);
+  const data = useRef7([]);
+  const isMounted = useRef7(true);
+  const hasUpdated = useRef7(false);
+  const rangeRef = useRef7(range);
   const dataWindow = useMemo2(
     () => new MovingWindow(getFullRange(range, renderBufferSize)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const setData = useCallback11(
+  const setData = useCallback12(
     (updates) => {
       for (const row of updates) {
         dataWindow.add(row);
@@ -1150,7 +1341,7 @@ var useDataSource = ({
     },
     [dataWindow]
   );
-  const datasourceMessageHandler = useCallback11(
+  const datasourceMessageHandler = useCallback12(
     (message) => {
       if (message.type === "subscribed") {
         onSubscribed == null ? void 0 : onSubscribed(message);
@@ -1173,7 +1364,7 @@ var useDataSource = ({
     },
     [dataWindow, onFeatureInvocation, onSizeChange, onSubscribed, setData]
   );
-  const getSelectedRows = useCallback11(() => {
+  const getSelectedRows = useCallback12(() => {
     return dataWindow.getSelectedRows();
   }, [dataWindow]);
   useEffect(() => {
@@ -1197,12 +1388,14 @@ var useDataSource = ({
       );
     }
   }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
-  const setRange = useCallback11(
+  const setRange = useCallback12(
     (range2) => {
-      const fullRange = getFullRange(range2, renderBufferSize);
-      dataWindow.setRange(fullRange);
-      dataSource.range = rangeRef.current = fullRange;
-      dataSource.emit("range", range2);
+      if (!rangesAreSame(range2, rangeRef.current)) {
+        const fullRange = getFullRange(range2, renderBufferSize);
+        dataWindow.setRange(fullRange);
+        dataSource.range = rangeRef.current = fullRange;
+        dataSource.emit("range", range2);
+      }
     },
     [dataSource, dataWindow, renderBufferSize]
   );
@@ -1216,9 +1409,9 @@ var useDataSource = ({
 };
 
 // src/useInitialValue.ts
-import { useMemo as useMemo3, useRef as useRef7 } from "react";
+import { useMemo as useMemo3, useRef as useRef8 } from "react";
 var useInitialValue = (value) => {
-  const ref = useRef7(value);
+  const ref = useRef8(value);
   return useMemo3(() => ref.current, []);
 };
 
@@ -1226,9 +1419,9 @@ var useInitialValue = (value) => {
 import { getIndexFromRowElement } from "@vuu-ui/vuu-utils";
 import { useControlled } from "@salt-ds/core";
 import {
-  useCallback as useCallback12,
+  useCallback as useCallback13,
   useEffect as useEffect2,
-  useRef as useRef8
+  useRef as useRef9
 } from "react";
 var rowNavigationKeys = /* @__PURE__ */ new Set([
   "Home",
@@ -1298,17 +1491,17 @@ var useKeyboardNavigation = ({
   viewportRowCount
 }) => {
   var _a;
-  const focusedCellPos = useRef8([-1, -1]);
-  const focusableCell = useRef8();
-  const activeCellPos = useRef8([-1, 0]);
-  const highlightedIndexRef = useRef8();
+  const focusedCellPos = useRef9([-1, -1]);
+  const focusableCell = useRef9();
+  const activeCellPos = useRef9([-1, 0]);
+  const highlightedIndexRef = useRef9();
   const [highlightedIndex, setHighlightedIdx] = useControlled({
     controlled: highlightedIndexProp,
     default: defaultHighlightedIndex,
     name: "UseKeyboardNavigation"
   });
   highlightedIndexRef.current = highlightedIndex;
-  const setHighlightedIndex = useCallback12(
+  const setHighlightedIndex = useCallback13(
     (idx, fromKeyboard = false) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
@@ -1335,7 +1528,7 @@ var useKeyboardNavigation = ({
     }
     return NULL_CELL_POS;
   };
-  const focusCell = useCallback12(
+  const focusCell = useCallback13(
     (cellPos) => {
       var _a2;
       if (containerRef.current) {
@@ -1346,7 +1539,6 @@ var useKeyboardNavigation = ({
             focusableCell.current = activeCell;
             activeCell.setAttribute("tabindex", "0");
           }
-          console.log(`scroll row ${cellPos[0]}`);
           requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex: cellPos[0] });
           activeCell.focus({ preventScroll: true });
         }
@@ -1356,7 +1548,7 @@ var useKeyboardNavigation = ({
     // be often whilst scrolling - store range in a a ref ?
     [containerRef, requestScroll]
   );
-  const setActiveCell = useCallback12(
+  const setActiveCell = useCallback13(
     (rowIdx, colIdx, fromKeyboard = false) => {
       const pos = [rowIdx, colIdx];
       activeCellPos.current = pos;
@@ -1371,34 +1563,46 @@ var useKeyboardNavigation = ({
     },
     [focusCell, navigationStyle, setHighlightedIdx]
   );
-  const nextPageItemIdx = useCallback12(
+  const nextPageItemIdx = useCallback13(
     (key, [rowIdx, colIdx]) => new Promise((resolve) => {
       let newRowIdx = rowIdx;
       switch (key) {
-        case "PageDown":
+        case "PageDown": {
           newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "down" });
+          if (newRowIdx !== rowIdx) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "down" });
+          }
           break;
-        case "PageUp":
+        }
+        case "PageUp": {
           newRowIdx = Math.max(0, rowIdx - viewportRowCount);
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
+          if (newRowIdx !== rowIdx) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
+          }
           break;
-        case "Home":
+        }
+        case "Home": {
           newRowIdx = 0;
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "home" });
+          if (newRowIdx !== rowIdx) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "home" });
+          }
           break;
-        case "End":
+        }
+        case "End": {
           newRowIdx = rowCount - 1;
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "end" });
+          if (newRowIdx !== rowIdx) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "end" });
+          }
           break;
+        }
       }
       setTimeout(() => {
         resolve([newRowIdx, colIdx]);
-      }, 90);
+      }, 35);
     }),
     [requestScroll, rowCount, viewportRowCount]
   );
-  const handleFocus = useCallback12(() => {
+  const handleFocus = useCallback13(() => {
     var _a2;
     if (disableHighlightOnFocus !== true) {
       if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
@@ -1417,7 +1621,7 @@ var useKeyboardNavigation = ({
     navigationStyle,
     setHighlightedIdx
   ]);
-  const navigateChildItems = useCallback12(
+  const navigateChildItems = useCallback13(
     async (key) => {
       const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
       const [rowIdx, colIdx] = activeCellPos.current;
@@ -1427,13 +1631,13 @@ var useKeyboardNavigation = ({
     },
     [columnCount, nextPageItemIdx, rowCount, setActiveCell]
   );
-  const scrollRowIntoViewIfNecessary = useCallback12(
+  const scrollRowIntoViewIfNecessary = useCallback13(
     (rowIndex) => {
       requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex });
     },
     [requestScroll]
   );
-  const moveHighlightedRow = useCallback12(
+  const moveHighlightedRow = useCallback13(
     async (key) => {
       const { current: highlighted } = highlightedIndexRef;
       const [nextRowIdx] = isPagingKey(key) ? await nextPageItemIdx(key, [highlighted != null ? highlighted : -1, 0]) : nextCellPos(key, [highlighted != null ? highlighted : -1, 0], columnCount, rowCount);
@@ -1455,7 +1659,7 @@ var useKeyboardNavigation = ({
       scrollRowIntoViewIfNecessary(highlightedIndexProp);
     }
   }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
-  const handleKeyDown = useCallback12(
+  const handleKeyDown = useCallback13(
     (e) => {
       if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
         e.preventDefault();
@@ -1469,7 +1673,7 @@ var useKeyboardNavigation = ({
     },
     [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]
   );
-  const handleClick = useCallback12(
+  const handleClick = useCallback13(
     // Might not be a cell e.g the Settings button
     (evt) => {
       const target = evt.target;
@@ -1481,10 +1685,10 @@ var useKeyboardNavigation = ({
     },
     [setActiveCell]
   );
-  const handleMouseLeave = useCallback12(() => {
+  const handleMouseLeave = useCallback13(() => {
     setHighlightedIndex(-1);
   }, [setHighlightedIndex]);
-  const handleMouseMove = useCallback12(
+  const handleMouseMove = useCallback13(
     (evt) => {
       const idx = closestRowIndex(evt.target);
       if (idx !== -1 && idx !== highlightedIndexRef.current) {
@@ -1493,7 +1697,7 @@ var useKeyboardNavigation = ({
     },
     [setHighlightedIndex]
   );
-  const navigate = useCallback12(() => {
+  const navigate = useCallback13(() => {
     navigateChildItems("ArrowDown");
   }, [navigateChildItems]);
   const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
@@ -1527,8 +1731,8 @@ import {
   selectItem
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback13,
-  useRef as useRef9
+  useCallback as useCallback14,
+  useRef as useRef10
 } from "react";
 var { IDX: IDX2 } = metadataKeys4;
 var NO_SELECTION = [];
@@ -1541,13 +1745,13 @@ var useSelection = ({
   onSelectionChange
 }) => {
   selectionModel === "extended" || selectionModel === "checkbox";
-  const lastActiveRef = useRef9(-1);
-  const selectedRef = useRef9(NO_SELECTION);
-  const isSelectionEvent = useCallback13(
+  const lastActiveRef = useRef10(-1);
+  const selectedRef = useRef10(NO_SELECTION);
+  const isSelectionEvent = useCallback14(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
-  const handleRowClick = useCallback13(
+  const handleRowClick = useCallback14(
     (row, rangeSelect, keepExistingSelection) => {
       const { [IDX2]: idx } = row;
       const { current: active } = lastActiveRef;
@@ -1568,7 +1772,7 @@ var useSelection = ({
     },
     [onSelect, onSelectionChange, selectionModel]
   );
-  const handleKeyDown = useCallback13(
+  const handleKeyDown = useCallback14(
     (e) => {
       if (isSelectionEvent(e)) {
         const { current: rowIndex } = highlightedIndexRef;
@@ -1593,7 +1797,7 @@ var useSelection = ({
 // src/useTableContextMenu.ts
 import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
 import { buildColumnMap, getIndexFromRowElement as getIndexFromRowElement2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback15 } from "react";
 var NO_ROWS = [];
 var useTableContextMenu = ({
   columns,
@@ -1602,7 +1806,7 @@ var useTableContextMenu = ({
   getSelectedRows
 }) => {
   const [showContextMenu] = usePopupContextMenu();
-  const onContextMenu = useCallback14(
+  const onContextMenu = useCallback15(
     (evt) => {
       const target = evt.target;
       const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
@@ -1641,10 +1845,9 @@ import {
   getValueFormatter,
   hasValidationRules,
   isFilteredColumn,
-  isGroupColumn as isGroupColumn2,
+  isGroupColumn as isGroupColumn3,
   isPinned,
   logger,
-  metadataKeys as metadataKeys5,
   replaceColumn,
   sortPinnedColumns,
   stripFilterFromColumns,
@@ -1654,7 +1857,6 @@ import { buildValidationChecker } from "@vuu-ui/vuu-ui-controls";
 import { useReducer } from "react";
 var { info } = logger("useTableModel");
 var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = metadataKeys5.count;
 var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
 var getDataType = (column, tableSchema) => {
   const schemaColumn = tableSchema == null ? void 0 : tableSchema.columns.find(
@@ -1742,7 +1944,6 @@ var columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema) =>
   const serverDataType = getDataType(column, tableSchema);
   const {
     align = getDefaultAlignment(serverDataType),
-    key,
     name,
     label = getColumnLabel(column),
     width = columnDefaultWidth,
@@ -1755,20 +1956,17 @@ var columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema) =>
     HeaderCellContentRenderer: getColumnHeaderContentRenderer(column),
     HeaderCellLabelRenderer: getColumnHeaderLabelRenderer(column),
     clientSideEditValidationCheck: hasValidationRules(column.type) ? buildValidationChecker(column.type.renderer.rules) : void 0,
+    index: index + 1,
     label: getLabel(label, columnFormatHeader),
-    key: key != null ? key : index + KEY_OFFSET,
     name,
     originalIdx: index,
     serverDataType,
     valueFormatter: getValueFormatter(column, serverDataType),
     width
   };
-  if (isGroupColumn2(runtimeColumnWithDefaults)) {
+  if (isGroupColumn3(runtimeColumnWithDefaults)) {
     runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(
-      (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(
-        col,
-        col.key
-      )
+      (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(col, index)
     );
   }
   return runtimeColumnWithDefaults;
@@ -1941,52 +2139,71 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
 }
 
 // src/useTableScroll.ts
-import { getRowElementAtIndex } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback15,
+  getColumnsInViewport,
+  getRowElementAtIndex,
+  itemsChanged
+} from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback16,
   useEffect as useEffect3,
   useImperativeHandle,
   useMemo as useMemo4,
-  useRef as useRef10
+  useRef as useRef11,
+  useState as useState5
 } from "react";
-var getPctScroll = (container) => {
-  const { scrollLeft, scrollTop } = container;
+var SCROLL_MOVE_CHECK_THRESHOLD = 100;
+var HORIZONTAL_SCROLL_BUFFER = 200;
+var getMaxScroll = (container) => {
   const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
+  return [scrollWidth - clientWidth, scrollHeight - clientHeight];
+};
+var getScrollDirection = (prevScrollPositions, scrollPos) => {
+  if (prevScrollPositions === void 0) {
+    return void 0;
+  } else {
+    const { scrollTop: prevTop } = prevScrollPositions;
+    return scrollPos > prevTop ? "fwd" : "bwd";
+  }
+};
+var getPctScroll = (container, currentScrollPos) => {
+  const {
+    clientHeight,
+    clientWidth,
+    scrollHeight,
+    scrollLeft,
+    scrollTop,
+    scrollWidth
+  } = container;
+  const maxScrollLeft = scrollWidth - clientWidth;
   const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
-  const pctScrollTop = scrollTop / (scrollHeight - clientHeight);
-  return [pctScrollLeft, pctScrollTop];
+  const maxScrollTop = scrollHeight - clientHeight;
+  let pctScrollTop = scrollTop / (scrollHeight - clientHeight);
+  const scrollDirection = getScrollDirection(currentScrollPos, scrollTop);
+  if (scrollDirection === "fwd" && pctScrollTop > 0.99) {
+    pctScrollTop = 1;
+  } else if (scrollDirection === "bwd" && pctScrollTop < 0.02) {
+    pctScrollTop = 0;
+  }
+  return [
+    scrollLeft,
+    pctScrollLeft,
+    maxScrollLeft,
+    scrollTop,
+    pctScrollTop,
+    maxScrollTop
+  ];
 };
 var noScrolling = {
   scrollToIndex: () => void 0,
   scrollToKey: () => void 0
 };
-var NO_SCROLL_NECESSARY = [void 0, void 0];
-var howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
-  if (contentContainer) {
-    const viewport = contentContainer == null ? void 0 : contentContainer.getBoundingClientRect();
-    const upperBoundary = viewport.top + totalHeaderHeight;
-    const row = rowEl.getBoundingClientRect();
-    if (row) {
-      if (row.bottom > viewport.bottom) {
-        return ["down", row.bottom - viewport.bottom];
-      } else if (row.top < upperBoundary) {
-        return ["up", row.top - upperBoundary];
-      } else {
-        return NO_SCROLL_NECESSARY;
-      }
-    } else {
-      throw Error("Whats going on, row not found");
-    }
-  } else {
-    throw Error("Whats going on, scrollbar container not found");
-  }
-};
 var useCallbackRef = ({
   onAttach,
   onDetach
 }) => {
-  const ref = useRef10(null);
-  const callbackRef = useCallback15(
+  const ref = useRef11(null);
+  const callbackRef = useCallback16(
     (el) => {
       if (el) {
         ref.current = el;
@@ -2002,75 +2219,142 @@ var useCallbackRef = ({
   return callbackRef;
 };
 var useTableScroll = ({
+  columns,
   getRowAtPosition,
   onHorizontalScroll,
   onVerticalScroll,
+  onVerticalScrollInSitu,
   scrollingApiRef,
   setRange,
   viewportMeasurements
 }) => {
-  const firstRowRef = useRef10(0);
-  const contentContainerScrolledRef = useRef10(false);
-  const scrollPosRef = useRef10({ scrollTop: 0, scrollLeft: 0 });
-  const scrollbarContainerRef = useRef10(null);
-  const contentContainerRef = useRef10(null);
+  const firstRowRef = useRef11(0);
+  const contentContainerScrolledRef = useRef11(false);
+  const contentContainerPosRef = useRef11({
+    scrollTop: 0,
+    scrollLeft: 0
+  });
+  const scrollbarContainerScrolledRef = useRef11(false);
+  const scrollbarContainerPosRef = useRef11({
+    scrollTop: 0,
+    scrollLeft: 0
+  });
+  const scrollbarContainerRef = useRef11(null);
+  const contentContainerRef = useRef11(null);
+  const lastHorizontalScrollCheckPoint = useRef11(0);
   const {
     appliedPageSize,
     isVirtualScroll,
-    maxScrollContainerScrollHorizontal: maxScrollLeft,
-    maxScrollContainerScrollVertical: maxScrollTop,
     rowCount: viewportRowCount,
-    totalHeaderHeight
+    totalHeaderHeight,
+    viewportWidth
   } = viewportMeasurements;
-  const handleVerticalScroll = useCallback15(
+  const columnsWithinViewportRef = useRef11([]);
+  const [, forceRefresh] = useState5({});
+  const preSpanRef = useRef11(0);
+  useMemo4(() => {
+    const [visibleColumns, offset] = getColumnsInViewport(
+      columns,
+      contentContainerPosRef.current.scrollLeft,
+      contentContainerPosRef.current.scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER
+    );
+    preSpanRef.current = offset;
+    columnsWithinViewportRef.current = visibleColumns;
+  }, [viewportWidth, columns]);
+  const handleHorizontalScroll = useCallback16(
+    (scrollLeft) => {
+      contentContainerPosRef.current.scrollLeft = scrollLeft;
+      onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
+      if (Math.abs(scrollLeft - lastHorizontalScrollCheckPoint.current) > SCROLL_MOVE_CHECK_THRESHOLD) {
+        lastHorizontalScrollCheckPoint.current = scrollLeft;
+        const [visibleColumns, pre] = getColumnsInViewport(
+          columns,
+          scrollLeft,
+          scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER
+        );
+        if (itemsChanged(columnsWithinViewportRef.current, visibleColumns)) {
+          preSpanRef.current = pre;
+          columnsWithinViewportRef.current = visibleColumns;
+          forceRefresh({});
+        }
+      }
+    },
+    [columns, onHorizontalScroll, viewportWidth]
+  );
+  const handleVerticalScroll = useCallback16(
     (scrollTop, pctScrollTop) => {
+      contentContainerPosRef.current.scrollTop = scrollTop;
       onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
       const firstRow = getRowAtPosition(scrollTop);
       if (firstRow !== firstRowRef.current) {
         firstRowRef.current = firstRow;
-        setRange({ from: firstRow, to: firstRow + viewportRowCount + 1 });
+        setRange({ from: firstRow, to: firstRow + viewportRowCount });
       }
+      onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(0);
     },
-    [getRowAtPosition, onVerticalScroll, setRange, viewportRowCount]
+    [
+      getRowAtPosition,
+      onVerticalScroll,
+      onVerticalScrollInSitu,
+      setRange,
+      viewportRowCount
+    ]
   );
-  const handleScrollbarContainerScroll = useCallback15(() => {
+  const handleScrollbarContainerScroll = useCallback16(() => {
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
     const { current: contentContainerScrolled } = contentContainerScrolledRef;
+    const { current: scrollPos } = scrollbarContainerPosRef;
     if (contentContainerScrolled) {
       contentContainerScrolledRef.current = false;
     } else if (contentContainer && scrollbarContainer) {
-      const [pctScrollLeft, pctScrollTop] = getPctScroll(scrollbarContainer);
-      const rootScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
-      const rootScrollTop = pctScrollTop * maxScrollTop;
+      scrollbarContainerScrolledRef.current = true;
+      const [scrollLeft, pctScrollLeft, , scrollTop, pctScrollTop] = getPctScroll(scrollbarContainer, scrollPos);
+      scrollPos.scrollLeft = scrollLeft;
+      scrollPos.scrollTop = scrollTop;
+      const [maxScrollLeft, maxScrollTop] = getMaxScroll(scrollbarContainer);
+      const contentScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      const contentScrollTop = pctScrollTop * maxScrollTop;
       contentContainer.scrollTo({
-        left: rootScrollLeft,
-        top: rootScrollTop,
+        left: contentScrollLeft,
+        top: contentScrollTop,
         behavior: "auto"
       });
     }
-  }, [maxScrollLeft, maxScrollTop]);
-  const handleContentContainerScroll = useCallback15(() => {
+    onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(0);
+  }, [onVerticalScrollInSitu]);
+  const handleContentContainerScroll = useCallback16(() => {
+    const { current: scrollbarContainerScrolled } = scrollbarContainerScrolledRef;
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
-    const { current: scrollPos } = scrollPosRef;
+    const { current: scrollPos } = contentContainerPosRef;
     if (contentContainer && scrollbarContainer) {
-      const { scrollLeft, scrollTop } = contentContainer;
-      const [pctScrollLeft, pctScrollTop] = getPctScroll(contentContainer);
+      const [
+        scrollLeft,
+        pctScrollLeft,
+        maxScrollLeft,
+        scrollTop,
+        pctScrollTop,
+        maxScrollTop
+      ] = getPctScroll(contentContainer);
       contentContainerScrolledRef.current = true;
-      scrollbarContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
-      scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;
+      if (scrollbarContainerScrolled) {
+        scrollbarContainerScrolledRef.current = false;
+      } else {
+        scrollbarContainer.scrollLeft = Math.round(
+          pctScrollLeft * maxScrollLeft
+        );
+        scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;
+      }
       if (scrollPos.scrollTop !== scrollTop) {
-        scrollPos.scrollTop = scrollTop;
         handleVerticalScroll(scrollTop, pctScrollTop);
       }
       if (scrollPos.scrollLeft !== scrollLeft) {
-        scrollPos.scrollLeft = scrollLeft;
-        onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
+        handleHorizontalScroll(scrollLeft);
       }
     }
-  }, [handleVerticalScroll, maxScrollLeft, maxScrollTop, onHorizontalScroll]);
-  const handleAttachScrollbarContainer = useCallback15(
+  }, [handleVerticalScroll, handleHorizontalScroll]);
+  const handleAttachScrollbarContainer = useCallback16(
     (el) => {
       scrollbarContainerRef.current = el;
       el.addEventListener("scroll", handleScrollbarContainerScroll, {
@@ -2079,14 +2363,14 @@ var useTableScroll = ({
     },
     [handleScrollbarContainerScroll]
   );
-  const handleDetachScrollbarContainer = useCallback15(
+  const handleDetachScrollbarContainer = useCallback16(
     (el) => {
       scrollbarContainerRef.current = null;
       el.removeEventListener("scroll", handleScrollbarContainerScroll);
     },
     [handleScrollbarContainerScroll]
   );
-  const handleAttachContentContainer = useCallback15(
+  const handleAttachContentContainer = useCallback16(
     (el) => {
       contentContainerRef.current = el;
       el.addEventListener("scroll", handleContentContainerScroll, {
@@ -2095,7 +2379,7 @@ var useTableScroll = ({
     },
     [handleContentContainerScroll]
   );
-  const handleDetachContentContainer = useCallback15(
+  const handleDetachContentContainer = useCallback16(
     (el) => {
       contentContainerRef.current = null;
       el.removeEventListener("scroll", handleContentContainerScroll);
@@ -2110,15 +2394,16 @@ var useTableScroll = ({
     onAttach: handleAttachScrollbarContainer,
     onDetach: handleDetachScrollbarContainer
   });
-  const requestScroll = useCallback15(
+  const requestScroll = useCallback16(
     (scrollRequest) => {
-      const { current: scrollbarContainer } = contentContainerRef;
-      if (scrollbarContainer) {
-        const { scrollLeft, scrollTop } = scrollbarContainer;
+      const { current: contentContainer } = contentContainerRef;
+      if (contentContainer) {
+        const [maxScrollLeft, maxScrollTop] = getMaxScroll(contentContainer);
+        const { scrollLeft, scrollTop } = contentContainer;
         contentContainerScrolledRef.current = false;
         if (scrollRequest.type === "scroll-row") {
           const activeRow = getRowElementAtIndex(
-            scrollbarContainer,
+            contentContainer,
             scrollRequest.rowIndex
           );
           if (activeRow !== null) {
@@ -2128,10 +2413,14 @@ var useTableScroll = ({
             );
             if (direction && distance) {
               if (isVirtualScroll) {
-                console.log(
-                  `virtual scroll row required ${direction} ${distance} 
-                  first Row ${firstRowRef.current}`
-                );
+                const offset = direction === "down" ? 1 : -1;
+                onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(offset);
+                const firstRow = firstRowRef.current + offset;
+                firstRowRef.current = firstRow;
+                setRange({
+                  from: firstRow,
+                  to: firstRow + viewportRowCount
+                });
               } else {
                 let newScrollLeft = scrollLeft;
                 let newScrollTop = scrollTop;
@@ -2146,7 +2435,7 @@ var useTableScroll = ({
                     maxScrollLeft
                   );
                 }
-                scrollbarContainer.scrollTo({
+                contentContainer.scrollTo({
                   top: newScrollTop,
                   left: newScrollLeft,
                   behavior: "smooth"
@@ -2157,14 +2446,18 @@ var useTableScroll = ({
         } else if (scrollRequest.type === "scroll-page") {
           const { direction } = scrollRequest;
           if (isVirtualScroll) {
-            console.log(`need a virtual page scroll`);
+            const offset = direction === "down" ? viewportRowCount : -viewportRowCount;
+            onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(offset);
+            const firstRow = firstRowRef.current + offset;
+            firstRowRef.current = firstRow;
+            setRange({ from: firstRow, to: firstRow + viewportRowCount });
           } else {
             const scrollBy = direction === "down" ? appliedPageSize : -appliedPageSize;
             const newScrollTop = Math.min(
               Math.max(0, scrollTop + scrollBy),
               maxScrollTop
             );
-            scrollbarContainer.scrollTo({
+            contentContainer.scrollTo({
               top: newScrollTop,
               left: scrollLeft,
               behavior: "auto"
@@ -2173,9 +2466,9 @@ var useTableScroll = ({
         } else if (scrollRequest.type === "scroll-end") {
           const { direction } = scrollRequest;
           const scrollTo = direction === "end" ? maxScrollTop : 0;
-          scrollbarContainer.scrollTo({
+          contentContainer.scrollTo({
             top: scrollTo,
-            left: scrollbarContainer.scrollLeft,
+            left: contentContainer.scrollLeft,
             behavior: "auto"
           });
         }
@@ -2184,14 +2477,14 @@ var useTableScroll = ({
     [
       appliedPageSize,
       isVirtualScroll,
-      maxScrollLeft,
-      maxScrollTop,
+      onVerticalScrollInSitu,
       setRange,
       totalHeaderHeight,
       viewportRowCount
     ]
   );
   const scrollHandles = useMemo4(
+    // TODO not complete yet
     () => ({
       scrollToIndex: (rowIndex) => {
         if (scrollbarContainerRef.current) {
@@ -2218,26 +2511,30 @@ var useTableScroll = ({
   );
   useEffect3(() => {
     const { current: from } = firstRowRef;
-    const rowRange = { from, to: from + viewportRowCount + 1 };
+    const rowRange = { from, to: from + viewportRowCount };
     setRange(rowRange);
   }, [setRange, viewportRowCount]);
   return {
+    columnsWithinViewport: columnsWithinViewportRef.current,
     /** Ref to be assigned to ScrollbarContainer */
     scrollbarContainerRef: scrollbarContainerCallbackRef,
     /** Ref to be assigned to ContentContainer */
     contentContainerRef: contentContainerCallbackRef,
     /** Scroll the table  */
-    requestScroll
+    requestScroll,
+    /** number of leading columns not rendered because of virtualization  */
+    virtualColSpan: preSpanRef.current
   };
 };
 
 // src/useTableViewport.ts
-import { useCallback as useCallback16, useMemo as useMemo5, useRef as useRef11 } from "react";
 import {
   actualRowPositioning,
+  measurePinnedColumns,
   virtualRowPositioning
 } from "@vuu-ui/vuu-utils";
-var MAX_RAW_ROWS = 1e5;
+import { useCallback as useCallback17, useMemo as useMemo5, useRef as useRef12 } from "react";
+var MAX_PIXEL_HEIGHT = 1e7;
 var UNMEASURED_VIEWPORT = {
   appliedPageSize: 0,
   contentHeight: 0,
@@ -2246,36 +2543,15 @@ var UNMEASURED_VIEWPORT = {
   getRowOffset: () => -1,
   horizontalScrollbarHeight: 0,
   isVirtualScroll: false,
-  maxScrollContainerScrollHorizontal: 0,
-  maxScrollContainerScrollVertical: 0,
   pinnedWidthLeft: 0,
   pinnedWidthRight: 0,
   rowCount: 0,
-  setPctScrollTop: () => void 0,
+  setInSituRowOffset: () => void 0,
+  setScrollTop: () => void 0,
   totalHeaderHeight: 0,
   verticalScrollbarWidth: 0,
-  viewportBodyHeight: 0
-};
-var measurePinnedColumns = (columns) => {
-  let pinnedWidthLeft = 0;
-  let pinnedWidthRight = 0;
-  let unpinnedWidth = 0;
-  for (const column of columns) {
-    const { hidden, pin, width } = column;
-    const visibleWidth = hidden ? 0 : width;
-    if (pin === "left") {
-      pinnedWidthLeft += visibleWidth;
-    } else if (pin === "right") {
-      pinnedWidthRight += visibleWidth;
-    } else {
-      unpinnedWidth += visibleWidth;
-    }
-  }
-  return {
-    pinnedWidthLeft: pinnedWidthLeft + 4,
-    pinnedWidthRight: pinnedWidthRight + 4,
-    unpinnedWidth
-  };
+  viewportBodyHeight: 0,
+  viewportWidth: 0
 };
 var useTableViewport = ({
   columns,
@@ -2283,48 +2559,58 @@ var useTableViewport = ({
   headings,
   rowCount,
   rowHeight,
+  selectionEndSize = 4,
   size
 }) => {
-  const pctScrollTopRef = useRef11(0);
-  const pixelContentHeight = rowHeight * Math.min(rowCount, MAX_RAW_ROWS);
+  const inSituRowOffsetRef = useRef12(0);
+  const pctScrollTopRef = useRef12(0);
+  const pixelContentHeight = Math.min(rowHeight * rowCount, MAX_PIXEL_HEIGHT);
   const virtualContentHeight = rowCount * rowHeight;
   const virtualisedExtent = virtualContentHeight - pixelContentHeight;
   const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo5(
-    () => measurePinnedColumns(columns),
-    [columns]
+    () => measurePinnedColumns(columns, selectionEndSize),
+    [columns, selectionEndSize]
   );
-  const totalHeaderHeightRef = useRef11(headerHeight);
+  const totalHeaderHeightRef = useRef12(headerHeight);
   useMemo5(() => {
     totalHeaderHeightRef.current = headerHeight * (1 + headings.length);
   }, [headerHeight, headings.length]);
   const [getRowOffset, getRowAtPosition, isVirtualScroll] = useMemo5(() => {
     if (virtualisedExtent) {
-      return virtualRowPositioning(
-        rowHeight,
-        virtualisedExtent,
-        pctScrollTopRef
-      );
+      const [_getRowOffset, getRowAtPosition2, _isVirtual] = virtualRowPositioning(rowHeight, virtualisedExtent, pctScrollTopRef);
+      const getOffset = (row) => {
+        return _getRowOffset(row, inSituRowOffsetRef.current);
+      };
+      return [getOffset, getRowAtPosition2, _isVirtual];
     } else {
       return actualRowPositioning(rowHeight);
     }
   }, [virtualisedExtent, rowHeight]);
-  const setPctScrollTop = useCallback16((scrollPct) => {
+  const setScrollTop = useCallback17((_, scrollPct) => {
     pctScrollTopRef.current = scrollPct;
   }, []);
+  const setInSituRowOffset = useCallback17((rowIndexOffset) => {
+    if (rowIndexOffset === 0) {
+      inSituRowOffsetRef.current = 0;
+    } else {
+      inSituRowOffsetRef.current = Math.max(
+        0,
+        inSituRowOffsetRef.current + rowIndexOffset
+      );
+    }
+  }, []);
   return useMemo5(() => {
-    var _a;
     if (size) {
       const { current: totalHeaderHeight } = totalHeaderHeightRef;
       const scrollbarSize = 15;
       const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
       const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
-      const maxScrollContainerScrollVertical = pixelContentHeight - (((_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 : Math.ceil(visibleRows);
       const viewportBodyHeight = size.height - totalHeaderHeight;
       const verticalScrollbarWidth = pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
       const appliedPageSize = count * rowHeight * (pixelContentHeight / virtualContentHeight);
+      const viewportWidth = size.width;
       return {
         appliedPageSize,
         contentHeight: pixelContentHeight,
@@ -2333,15 +2619,15 @@ var useTableViewport = ({
         getRowOffset,
         isVirtualScroll,
         horizontalScrollbarHeight,
-        maxScrollContainerScrollHorizontal,
-        maxScrollContainerScrollVertical,
         pinnedWidthLeft,
         pinnedWidthRight,
         rowCount: count,
-        setPctScrollTop,
+        setInSituRowOffset,
+        setScrollTop,
         totalHeaderHeight,
         verticalScrollbarWidth,
-        viewportBodyHeight
+        viewportBodyHeight,
+        viewportWidth
       };
     } else {
       return UNMEASURED_VIEWPORT;
@@ -2356,7 +2642,8 @@ var useTableViewport = ({
     pinnedWidthRight,
     pixelContentHeight,
     rowHeight,
-    setPctScrollTop,
+    setInSituRowOffset,
+    setScrollTop,
     size,
     virtualContentHeight
   ]);
@@ -2365,7 +2652,7 @@ var useTableViewport = ({
 // src/useTableAndColumnSettings.ts
 import { useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
 import { getCalculatedColumnType } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback17, useRef as useRef12, useState as useState5 } from "react";
+import { useCallback as useCallback18, useRef as useRef13, useState as useState6 } from "react";
 var useTableAndColumnSettings = ({
   availableColumns: availableColumnsProps,
   onAvailableColumnsChange,
@@ -2375,11 +2662,11 @@ var useTableAndColumnSettings = ({
   tableConfig
 }) => {
   const dispatchLayoutAction = useLayoutProviderDispatch();
-  const showTableSettingsRef = useRef12();
-  const [availableColumns, setAvailableColumns] = useState5(
+  const showTableSettingsRef = useRef13();
+  const [availableColumns, setAvailableColumns] = useState6(
     availableColumnsProps
   );
-  const showContextPanel = useCallback17(
+  const showContextPanel = useCallback18(
     (componentType, title, props) => {
       dispatchLayoutAction({
         type: "set-props",
@@ -2396,13 +2683,13 @@ var useTableAndColumnSettings = ({
     },
     [dispatchLayoutAction]
   );
-  const handleCancelCreateColumn = useCallback17(() => {
+  const handleCancelCreateColumn = useCallback18(() => {
     requestAnimationFrame(() => {
       var _a;
       (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
     });
   }, []);
-  const handleCreateCalculatedColumn = useCallback17(
+  const handleCreateCalculatedColumn = useCallback18(
     (column) => {
       const newAvailableColumns = availableColumns.concat({
         name: column.name,
@@ -2418,7 +2705,7 @@ var useTableAndColumnSettings = ({
     },
     [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
   );
-  const showColumnSettingsPanel = useCallback17(
+  const showColumnSettingsPanel = useCallback18(
     (action) => {
       showContextPanel("ColumnSettings", "Column Settings", {
         column: action.column,
@@ -2437,7 +2724,7 @@ var useTableAndColumnSettings = ({
       tableConfig
     ]
   );
-  const handleAddCalculatedColumn = useCallback17(() => {
+  const handleAddCalculatedColumn = useCallback18(() => {
     showColumnSettingsPanel({
       column: {
         name: "::",
@@ -2447,7 +2734,7 @@ var useTableAndColumnSettings = ({
       vuuTable: { module: "SIMUL", table: "instruments" }
     });
   }, [showColumnSettingsPanel]);
-  const handleNavigateToColumn = useCallback17(
+  const handleNavigateToColumn = useCallback18(
     (columnName) => {
       const column = tableConfig.columns.find((c) => c.name === columnName);
       if (column) {
@@ -2461,7 +2748,7 @@ var useTableAndColumnSettings = ({
     },
     [showColumnSettingsPanel, tableConfig.columns]
   );
-  showTableSettingsRef.current = useCallback17(() => {
+  showTableSettingsRef.current = useCallback18(() => {
     showContextPanel("TableSettings", "DataGrid Settings", {
       availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType }) => ({
         name,
@@ -2492,7 +2779,7 @@ var useTableAndColumnSettings = ({
 var stripInternalProperties = (tableConfig) => {
   return tableConfig;
 };
-var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys6;
+var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys5;
 var NULL_DRAG_DROP = {
   draggable: void 0,
   onMouseDown: void 0
@@ -2528,20 +2815,20 @@ var useTable = ({
   selectionModel,
   size
 }) => {
-  const [rowCount, setRowCount] = useState6(dataSource.size);
+  const [rowCount, setRowCount] = useState7(dataSource.size);
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
-  const useRowDragDrop = allowDragDrop ? useDragDrop : useNullDragDrop;
+  const useRowDragDrop = allowDragDrop ? useDragDrop2 : useNullDragDrop;
   const menuBuilder = useMemo6(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = useCallback18((size2) => {
+  const onDataRowcountChange = useCallback19((size2) => {
     setRowCount(size2);
   }, []);
   const {
-    columns: runtimeColumns,
+    columns,
     dispatchColumnAction,
     headings,
     tableAttributes,
@@ -2550,11 +2837,11 @@ var useTable = ({
   useLayoutEffectSkipFirst2(() => {
     dispatchColumnAction({
       type: "init",
-      dataSource,
-      tableConfig
+      tableConfig: config,
+      dataSource
     });
-  }, [tableConfig, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = useCallback18(
+  }, [config, dataSource, dispatchColumnAction]);
+  const applyTableConfigChange = useCallback19(
     (config2) => {
       dispatchColumnAction({
         type: "init",
@@ -2565,22 +2852,28 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const [stateColumns, setStateColumns] = useState6();
-  const [columns, setColumnSize] = useMemo6(() => {
-    const setSize = (columnName, width) => {
-      const cols = updateColumn(runtimeColumns, columnName, { width });
-      setStateColumns(cols);
-    };
-    return [stateColumns != null ? stateColumns : runtimeColumns, setSize];
-  }, [runtimeColumns, stateColumns]);
   const columnMap = useMemo6(
     () => buildColumnMap2(dataSource.columns),
     [dataSource.columns]
   );
+  const onSubscribed = useCallback19(
+    ({ tableSchema }) => {
+      if (tableSchema) {
+        dispatchColumnAction({
+          type: "setTableSchema",
+          tableSchema
+        });
+      } else {
+        console.log("subscription message with no schema");
+      }
+    },
+    [dispatchColumnAction]
+  );
   const {
     getRowAtPosition,
     getRowOffset,
-    setPctScrollTop,
+    setInSituRowOffset: viewportHookSetInSituRowOffset,
+    setScrollTop: viewportHookSetScrollTop,
     ...viewportMeasurements
   } = useTableViewport({
     columns,
@@ -2592,21 +2885,8 @@ var useTable = ({
   });
   const initialRange = useInitialValue({
     from: 0,
-    to: viewportMeasurements.rowCount === 0 ? 0 : viewportMeasurements.rowCount + 1
+    to: viewportMeasurements.rowCount
   });
-  const onSubscribed = useCallback18(
-    ({ tableSchema }) => {
-      if (tableSchema) {
-        dispatchColumnAction({
-          type: "setTableSchema",
-          tableSchema
-        });
-      } else {
-        console.log("subscription message with no schema");
-      }
-    },
-    [dispatchColumnAction]
-  );
   const { data, dataRef, getSelectedRows, range, setRange } = useDataSource({
     dataSource,
     // We need to factor this out of Table
@@ -2616,7 +2896,17 @@ var useTable = ({
     onSubscribed,
     range: initialRange
   });
-  const handleConfigEditedInSettingsPanel = useCallback18(
+  const { requestScroll, ...scrollProps } = useTableScroll({
+    columns,
+    getRowAtPosition,
+    rowHeight,
+    scrollingApiRef,
+    setRange,
+    onVerticalScroll: viewportHookSetScrollTop,
+    onVerticalScrollInSitu: viewportHookSetInSituRowOffset,
+    viewportMeasurements
+  });
+  const handleConfigEditedInSettingsPanel = useCallback19(
     (tableConfig2) => {
       dispatchColumnAction({
         type: "init",
@@ -2627,7 +2917,7 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = useCallback18(
+  const handleDataSourceConfigChanged = useCallback19(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2645,14 +2935,14 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchColumnAction]);
-  const handleCreateCalculatedColumn = useCallback18(
+  const handleCreateCalculatedColumn = useCallback19(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
       applyTableConfigChange(addColumn(tableConfig, column));
     },
     [dataSource, tableConfig, applyTableConfigChange]
   );
-  const hideColumns2 = useCallback18(
+  const hideColumns2 = useCallback19(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -2666,7 +2956,7 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = useCallback18(
+  const pinColumn3 = useCallback19(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
@@ -2689,7 +2979,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = useCallback18(
+  const onPersistentColumnOperation = useCallback19(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -2718,7 +3008,7 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = useCallback18(
+  const handleSort = useCallback19(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
         dataSource.sort = applySort(
@@ -2731,15 +3021,18 @@ var useTable = ({
     },
     [dataSource]
   );
-  const onResizeColumn = useCallback18(
+  const resizeCells = useRef14();
+  const onResizeColumn = useCallback19(
     (phase, columnName, width) => {
+      var _a, _b, _c;
       const column = columns.find((column2) => column2.name === columnName);
       if (column) {
         if (phase === "resize") {
-          if (isValidNumber(width)) {
-            setColumnSize(columnName, width);
-          }
+          (_a = resizeCells.current) == null ? void 0 : _a.forEach((cell) => {
+            cell.style.width = `${width}px`;
+          });
         } else if (phase === "end") {
+          resizeCells.current = void 0;
           if (isValidNumber(width)) {
             dispatchColumnAction({
               type: "resizeColumn",
@@ -2747,7 +3040,6 @@ var useTable = ({
               column,
               width
             });
-            setStateColumns(void 0);
             onConfigChange == null ? void 0 : onConfigChange(
               stripInternalProperties(
                 updateTableConfig(tableConfig, {
@@ -2759,7 +3051,12 @@ var useTable = ({
             );
           }
         } else {
-          setStateColumns(void 0);
+          const byColIndex = `[aria-colindex='${column.index}']`;
+          resizeCells.current = Array.from(
+            (_c = (_b = containerRef.current) == null ? void 0 : _b.querySelectorAll(
+              `.vuuTableCell${byColIndex},.vuuTableHeaderCell${byColIndex}`
+            )) != null ? _c : []
+          );
           dispatchColumnAction({
             type: "resizeColumn",
             phase,
@@ -2773,12 +3070,12 @@ var useTable = ({
         );
       }
     },
-    [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
+    [columns, dispatchColumnAction, onConfigChange, tableConfig, containerRef]
   );
-  const onToggleGroup = useCallback18(
+  const onToggleGroup = useCallback19(
     (row, column) => {
       var _a, _b;
-      const isJson = isJsonGroup2(column, row);
+      const isJson = isJsonGroup2(column, row, columnMap);
       const key = row[KEY];
       if (row[IS_EXPANDED2]) {
         dataSource.closeTreeNode(key, true);
@@ -2810,22 +3107,8 @@ var useTable = ({
         }
       }
     },
-    [columns, dataSource, dispatchColumnAction]
+    [columnMap, columns, dataSource, dispatchColumnAction]
   );
-  const handleVerticalScroll = useCallback18(
-    (_, pctScrollTop) => {
-      setPctScrollTop(pctScrollTop);
-    },
-    [setPctScrollTop]
-  );
-  const { requestScroll, ...scrollProps } = useTableScroll({
-    getRowAtPosition,
-    rowHeight,
-    scrollingApiRef,
-    setRange,
-    onVerticalScroll: handleVerticalScroll,
-    viewportMeasurements
-  });
   const {
     highlightedIndexRef,
     navigate,
@@ -2852,7 +3135,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = useCallback18(
+  const handleFocus = useCallback19(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -2867,15 +3150,15 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = useCallback18(
+  const onMoveGroupColumn = useCallback19(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = useCallback18(
+  const onRemoveGroupColumn = useCallback19(
     (column) => {
-      if (isGroupColumn3(column)) {
+      if (isGroupColumn4(column)) {
         dataSource.groupBy = [];
       } else {
         if (dataSource && dataSource.groupBy.includes(column.name)) {
@@ -2887,7 +3170,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = useCallback18(
+  const handleSelectionChange = useCallback19(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -2903,7 +3186,7 @@ var useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = useCallback18(
+  const handleKeyDown = useCallback19(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -2915,25 +3198,15 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = useCallback18(
+  const handleRowClick = useCallback19(
     (row, rangeSelect, keepExistingSelection) => {
       selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
       onRowClickProp == null ? void 0 : onRowClickProp(row);
     },
     [onRowClickProp, selectionHookOnRowClick]
   );
-  useLayoutEffectSkipFirst2(() => {
-    dispatchColumnAction({
-      type: "init",
-      tableConfig: config,
-      dataSource
-    });
-  }, [config, dataSource, dispatchColumnAction]);
-  const onMoveColumn = useCallback18(
+  const onMoveColumn = useCallback19(
     (columns2) => {
-      console.log(`useTable onMoveColumn`, {
-        columns: columns2
-      });
       const newTableConfig = {
         ...tableConfig,
         columns: columns2
@@ -2947,17 +3220,17 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = useCallback18(
+  const handleDropRow = useCallback19(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = useCallback18(
+  const handleDataEdited = useCallback19(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = useCallback18(
+  const handleDragStartRow = useCallback19(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
       const rowIndex = getIndexFromRowElement3(initialDragElement);
@@ -3014,137 +3287,10 @@ var useTable = ({
   };
 };
 
-// src/table-header/TableHeader.tsx
-import { isGroupColumn as isGroupColumn4, isNotHidden as isNotHidden2 } from "@vuu-ui/vuu-utils";
-import cx8 from "clsx";
-
-// src/table-header/useTableHeader.ts
-import { useDragDrop as useDragDrop2 } from "@vuu-ui/vuu-ui-controls";
-import { moveColumnTo, visibleColumnAtIndex } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback19, useRef as useRef13 } from "react";
-var useTableHeader = ({
-  columns,
-  onMoveColumn,
-  onSortColumn,
-  tableConfig
-}) => {
-  const containerRef = useRef13(null);
-  const handleDropColumnHeader = useCallback19(
-    (moveFrom, moveTo) => {
-      const column = columns[moveFrom];
-      const orderedColumns = moveColumnTo(columns, column, moveTo);
-      const ofColumn = ({ name }) => (col) => col.name === name;
-      const targetIndex = orderedColumns.findIndex(ofColumn(column));
-      const nextColumn = orderedColumns[targetIndex + 1];
-      const insertPos = nextColumn ? tableConfig.columns.findIndex(ofColumn(nextColumn)) : -1;
-      if (moveTo > moveFrom && insertPos !== -1) {
-        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));
-      } else {
-        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));
-      }
-    },
-    [columns, onMoveColumn, tableConfig.columns]
-  );
-  const handleColumnHeaderClick = useCallback19(
-    (evt) => {
-      var _a;
-      const targetElement = evt.target;
-      const headerCell = targetElement.closest(
-        ".vuuTableHeaderCell"
-      );
-      const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
-      const column = visibleColumnAtIndex(columns, colIdx);
-      const isAdditive = evt.shiftKey;
-      column && onSortColumn(column, isAdditive);
-    },
-    [columns, onSortColumn]
-  );
-  const {
-    onMouseDown: columnHeaderDragMouseDown,
-    draggable: draggableColumn,
-    ...dragDropHook
-  } = useDragDrop2({
-    allowDragDrop: true,
-    containerRef,
-    draggableClassName: `vuuTable`,
-    onDrop: handleDropColumnHeader,
-    orientation: "horizontal",
-    itemQuery: ".vuuTableHeaderCell"
-  });
-  return {
-    containerRef,
-    draggableColumn,
-    draggedColumnIndex: dragDropHook.draggedItemIndex,
-    onClick: handleColumnHeaderClick,
-    onMouseDown: columnHeaderDragMouseDown
-  };
-};
-
-// src/table-header/TableHeader.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var TableHeader = ({
-  classBase: classBase10 = "vuuTable",
-  columns,
-  headings,
-  onMoveColumn,
-  onMoveGroupColumn,
-  onRemoveGroupColumn,
-  onResizeColumn,
-  onSortColumn,
-  tableConfig,
-  tableId
-}) => {
-  const {
-    containerRef,
-    draggableColumn,
-    draggedColumnIndex,
-    onClick,
-    onMouseDown
-  } = useTableHeader({
-    columns,
-    onMoveColumn,
-    onSortColumn,
-    tableConfig
-  });
-  return /* @__PURE__ */ jsxs7("div", { className: `${classBase10}-col-headings`, ref: containerRef, children: [
-    headings.map((colHeaders, i) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
-    /* @__PURE__ */ jsxs7("div", { className: `${classBase10}-col-headers`, role: "row", children: [
-      columns.filter(isNotHidden2).map(
-        (col, i) => isGroupColumn4(col) ? /* @__PURE__ */ jsx11(
-          GroupHeaderCellNext,
-          {
-            column: col,
-            "data-index": i,
-            onMoveColumn: onMoveGroupColumn,
-            onRemoveColumn: onRemoveGroupColumn,
-            onResize: onResizeColumn
-          },
-          col.name
-        ) : /* @__PURE__ */ jsx11(
-          HeaderCell,
-          {
-            className: cx8({
-              "vuuDraggable-dragAway": i === draggedColumnIndex
-            }),
-            column: col,
-            "data-index": i,
-            id: `${tableId}-col-${i}`,
-            onClick,
-            onMouseDown,
-            onResize: onResizeColumn
-          },
-          col.name
-        )
-      ),
-      draggableColumn
-    ] })
-  ] });
-};
-
 // src/Table.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var classBase7 = "vuuTable";
-var { IDX: IDX3, RENDER_IDX } = metadataKeys7;
+var { IDX: IDX3, RENDER_IDX } = metadataKeys6;
 var TableCore = ({
   Row: Row2 = Row,
   allowDragDrop,
@@ -3226,9 +3372,7 @@ var TableCore = ({
   const contentContainerClassName = cx9(`${classBase7}-contentContainer`, {
     [`${classBase7}-colLines`]: tableAttributes.columnSeparators,
     [`${classBase7}-rowLines`]: tableAttributes.rowSeparators,
-    // [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
     [`${classBase7}-zebra`]: tableAttributes.zebraStripes
-    // [`${classBase}-loading`]: isDataLoading(tableProps.columns),
   });
   const cssVariables = {
     "--content-height": `${viewportMeasurements.contentHeight}px`,
@@ -3242,7 +3386,7 @@ var TableCore = ({
     "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
     "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     ContextMenuProvider,
     {
       menuActionHandler: handleContextMenuAction,
@@ -3263,7 +3407,7 @@ var TableCore = ({
             className: contentContainerClassName,
             ref: scrollProps.contentContainerRef,
             style: cssVariables,
-            children: /* @__PURE__ */ jsxs8(
+            children: /* @__PURE__ */ jsxs9(
               "div",
               {
                 ...tableProps,
@@ -3274,7 +3418,7 @@ var TableCore = ({
                   showColumnHeaders ? /* @__PURE__ */ jsx12(
                     TableHeader,
                     {
-                      columns,
+                      columns: scrollProps.columnsWithinViewport,
                       headings,
                       onMoveColumn,
                       onMoveGroupColumn,
@@ -3282,7 +3426,8 @@ var TableCore = ({
                       onResizeColumn,
                       onSortColumn,
                       tableConfig,
-                      tableId: id
+                      tableId: id,
+                      virtualColSpan: scrollProps.virtualColSpan
                     }
                   ) : null,
                   /* @__PURE__ */ jsx12("div", { className: `${classBase7}-body`, children: data.map((data2) => /* @__PURE__ */ jsx12(
@@ -3290,13 +3435,14 @@ var TableCore = ({
                     {
                       "aria-rowindex": data2[0] + 1,
                       columnMap,
-                      columns,
+                      columns: scrollProps.columnsWithinViewport,
                       highlighted: highlightedIndex === data2[IDX3],
                       onClick: onRowClick,
                       onDataEdited,
                       row: data2,
                       offset: getRowOffset(data2),
                       onToggleGroup,
+                      virtualColSpan: scrollProps.virtualColSpan,
                       zebraStripes: tableAttributes.zebraStripes
                     },
                     data2[RENDER_IDX]
@@ -3340,8 +3486,8 @@ var Table = forwardRef(function TableNext({
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = useRef14(null);
-  const [size, setSize] = useState7();
+  const containerRef = useRef15(null);
+  const [size, setSize] = useState8();
   if (config === void 0) {
     throw Error(
       "vuu Table requires config prop. Minimum config is list of Column Descriptors"
@@ -3394,17 +3540,16 @@ var Table = forwardRef(function TableNext({
 });
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-import { memo as memo2, useCallback as useCallback20 } from "react";
+import { memo as memo3, useCallback as useCallback20 } from "react";
 import { CheckboxIcon, WarnCommit } from "@vuu-ui/vuu-ui-controls";
 import { Checkbox } from "@salt-ds/core";
-
-// src/cell-renderers/cell-utils.ts
-var dataAndColumnUnchanged = (p, p1) => p.column === p1.column && p.column.valueFormatter(p.row[p.columnMap[p.column.name]]) === p1.column.valueFormatter(p1.row[p1.columnMap[p1.column.name]]);
-
-// src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-import { dispatchCustomEvent, registerComponent } from "@vuu-ui/vuu-utils";
+import {
+  dataAndColumnUnchanged,
+  dispatchCustomEvent,
+  registerComponent
+} from "@vuu-ui/vuu-utils";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var CheckboxCell = memo2(
+var CheckboxCell = memo3(
   ({ column, columnMap, onCommit = WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
     const isChecked = row[dataIdx];
@@ -3472,13 +3617,14 @@ registerComponent2("input-cell", InputCell, "cell-renderer", {});
 // src/cell-renderers/toggle-cell/ToggleCell.tsx
 import { WarnCommit as WarnCommit3 } from "@vuu-ui/vuu-ui-controls";
 import {
+  dataAndColumnUnchanged as dataAndColumnUnchanged2,
   dispatchCustomEvent as dispatchCustomEvent2,
   isTypeDescriptor,
   isValueListRenderer,
   registerComponent as registerComponent3
 } from "@vuu-ui/vuu-utils";
 import cx11 from "clsx";
-import { memo as memo3, useCallback as useCallback21 } from "react";
+import { memo as memo4, useCallback as useCallback21 } from "react";
 import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var classBase9 = "vuuTableToggleCell";
@@ -3491,7 +3637,7 @@ var getValueList = ({ name, type }) => {
     );
   }
 };
-var ToggleCell = memo3(
+var ToggleCell = memo4(
   function ToggleCell2({
     column,
     columnMap,
@@ -3524,16 +3670,16 @@ var ToggleCell = memo3(
       }
     );
   },
-  dataAndColumnUnchanged
+  dataAndColumnUnchanged2
 );
 registerComponent3("toggle-cell", ToggleCell, "cell-renderer", {});
 
 // src/useControlledTableNavigation.ts
 import { useStateRef } from "@vuu-ui/vuu-ui-controls";
 import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback22, useRef as useRef15 } from "react";
+import { useCallback as useCallback22, useRef as useRef16 } from "react";
 var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = useRef15(null);
+  const tableRef = useRef16(null);
   const [highlightedIndexRef, setHighlightedIndex] = useStateRef(initialValue);
   const handleKeyDown = useCallback22(
     (e) => {
@@ -3576,8 +3722,6 @@ export {
   TableCell,
   TableGroupCell,
   ToggleCell,
-  dataAndColumnUnchanged,
-  howFarIsRowOutsideViewport,
   isShowColumnSettings,
   isShowTableSettings,
   noScrolling,