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

package/cjs/index.js

@@ -38,8 +38,6 @@ __export(src_exports, {
   TableCell: () => TableCell,
   TableGroupCell: () => TableGroupCell,
   ToggleCell: () => ToggleCell,
-  dataAndColumnUnchanged: () => dataAndColumnUnchanged,
-  howFarIsRowOutsideViewport: () => howFarIsRowOutsideViewport,
   isShowColumnSettings: () => isShowColumnSettings,
   isShowTableSettings: () => isShowTableSettings,
   noScrolling: () => noScrolling,
@@ -52,7 +50,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/header-cell/GroupHeaderCellNext.tsx
-var import_vuu_layout = require("@vuu-ui/vuu-layout");
+var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
 var import_clsx3 = __toESM(require("clsx"));
 var import_react5 = require("react");
@@ -135,7 +133,7 @@ var ColumnResizer = ({
   onDragEnd = NOOP,
   onDragStart = NOOP
 }) => {
-  const position = (0, import_react2.useRef)(0);
+  const positionRef = (0, import_react2.useRef)({ start: 0, now: 0 });
   const onMouseMove = (0, import_react2.useCallback)(
     (e) => {
       if (e.stopPropagation) {
@@ -144,11 +142,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]
@@ -157,14 +157,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 = (0, import_react2.useCallback)(
     (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) {
@@ -186,26 +189,27 @@ var useTableColumnResize = ({
   onResize,
   rootRef
 }) => {
-  const widthRef = (0, import_react3.useRef)(0);
+  const widthRef = (0, import_react3.useRef)({ start: 0, now: 0 });
   const [isResizing, setResizing] = (0, import_react3.useState)(false);
   const { name } = column;
   const handleResizeStart = (0, import_react3.useCallback)(() => {
     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 = (0, import_react3.useCallback)(
-    (_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;
           }
         }
       }
@@ -214,7 +218,8 @@ var useTableColumnResize = ({
   );
   const handleResizeEnd = (0, import_react3.useCallback)(() => {
     if (onResize) {
-      onResize("end", name, widthRef.current);
+      const { current: width } = widthRef;
+      onResize("end", name, width.now);
       setTimeout(() => {
         setResizing(false);
       }, 80);
@@ -316,7 +321,7 @@ var GroupHeaderCellNext = ({
       style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_vuu_layout.OverflowContainer,
+          import_vuu_ui_controls.OverflowContainer,
           {
             allowDragDrop: true,
             className: `${classBase2}-inner`,
@@ -329,7 +334,7 @@ var GroupHeaderCellNext = ({
                 {
                   ...columnPillProps,
                   column,
-                  key: column.key
+                  key: column.name
                 }
               );
             })
@@ -452,8 +457,8 @@ var HeaderCell = ({
 };
 
 // src/Table.tsx
-var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
+var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
 var import_clsx9 = __toESM(require("clsx"));
@@ -477,7 +482,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 = (0, import_react9.useCallback)(
     (value) => {
@@ -504,6 +509,7 @@ var TableCell = ({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
+      "aria-colindex": index,
       className,
       onClick: onClick ? handleClick : void 0,
       role: "cell",
@@ -528,9 +534,14 @@ var import_clsx6 = __toESM(require("clsx"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var { IS_LEAF } = import_vuu_utils4.metadataKeys;
 var classBase5 = "vuuTableGroupCell";
-var TableGroupCell = ({ column, onClick, row }) => {
+var TableGroupCell = ({
+  column,
+  columnMap,
+  onClick,
+  row
+}) => {
   const { columns } = column;
-  const [value, offset] = (0, import_vuu_utils4.getGroupValueAndOffset)(columns, row);
+  const [value, offset] = (0, import_vuu_utils4.getGroupValueAndOffset)(columns, row, columnMap);
   const { className, style } = useCell(column, classBase5);
   const handleClick = (0, import_react10.useCallback)(
     (evt) => {
@@ -558,7 +569,6 @@ var TableGroupCell = ({ column, onClick, row }) => {
 
 // src/Row.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var import_react12 = require("react");
 var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils5.metadataKeys;
 var classBase6 = "vuuTableRow";
 var Row = (0, import_react11.memo)(
@@ -572,6 +582,7 @@ var Row = (0, import_react11.memo)(
     onClick,
     onDataEdited,
     onToggleGroup,
+    virtualColSpan = 0,
     zebraStripes = false,
     ...htmlAttributes
   }) => {
@@ -600,53 +611,207 @@ var Row = (0, import_react11.memo)(
     const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
     const handleGroupCellClick = (0, import_react11.useCallback)(
       (evt, column) => {
-        if ((0, import_vuu_utils5.isGroupColumn)(column) || (0, import_vuu_utils5.isJsonGroup)(column, row)) {
+        if ((0, import_vuu_utils5.isGroupColumn)(column) || (0, import_vuu_utils5.isJsonGroup)(column, row, columnMap)) {
           evt.stopPropagation();
           onToggleGroup == null ? void 0 : onToggleGroup(row, column);
         }
       },
-      [onToggleGroup, row]
+      [columnMap, onToggleGroup, row]
     );
-    return /* @__PURE__ */ (0, import_react12.createElement)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
       {
         ...htmlAttributes,
-        key: `row-${row[0]}`,
         role: "row",
         className,
         onClick: handleRowClick,
-        style
-      },
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase6}-selectionDecorator vuuStickyLeft` }),
-      columns.filter(import_vuu_utils5.isNotHidden).map((column) => {
-        const isGroup = (0, import_vuu_utils5.isGroupColumn)(column);
-        const isJsonCell = (0, import_vuu_utils5.isJsonColumn)(column);
-        const Cell = isGroup ? TableGroupCell : TableCell;
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Cell,
-          {
-            column,
-            columnMap,
-            onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
-            onDataEdited,
-            row
-          },
-          column.key
-        );
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase6}-selectionDecorator vuuStickyRight` })
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase6}-selectionDecorator vuuStickyLeft` }),
+          virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "vuuTableCell", style: { width: virtualColSpan } }) : null,
+          columns.filter(import_vuu_utils5.isNotHidden).map((column) => {
+            const isGroup = (0, import_vuu_utils5.isGroupColumn)(column);
+            const isJsonCell = (0, import_vuu_utils5.isJsonColumn)(column);
+            const Cell = isGroup ? TableGroupCell : TableCell;
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Cell,
+              {
+                column,
+                columnMap,
+                onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+                onDataEdited,
+                row
+              },
+              column.name
+            );
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase6}-selectionDecorator vuuStickyRight` })
+        ]
+      }
     );
   }
 );
 Row.displayName = "Row";
 
-// src/useTable.ts
+// src/table-header/TableHeader.tsx
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_clsx8 = __toESM(require("clsx"));
+var import_react13 = require("react");
+
+// src/table-header/useTableHeader.ts
 var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
-var import_react23 = require("react");
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_react12 = require("react");
+var useTableHeader = ({
+  columns,
+  onMoveColumn,
+  onSortColumn,
+  tableConfig
+}) => {
+  const containerRef = (0, import_react12.useRef)(null);
+  const scrollingContainerRef = (0, import_react12.useRef)(null);
+  const setContainerRef = (0, import_react12.useCallback)((el) => {
+    containerRef.current = el;
+    if (el) {
+      scrollingContainerRef.current = el.closest(".vuuTable-contentContainer");
+    } else {
+      scrollingContainerRef.current = null;
+    }
+  }, []);
+  const handleDropColumnHeader = (0, import_react12.useCallback)(
+    ({ fromIndex: moveFrom, toIndex: moveTo }) => {
+      const column = columns[moveFrom];
+      const orderedColumns = (0, import_vuu_utils6.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((0, import_vuu_utils6.moveColumnTo)(tableConfig.columns, column, insertPos - 1));
+      } else {
+        onMoveColumn((0, import_vuu_utils6.moveColumnTo)(tableConfig.columns, column, insertPos));
+      }
+    },
+    [columns, onMoveColumn, tableConfig.columns]
+  );
+  const handleColumnHeaderClick = (0, import_react12.useCallback)(
+    (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 = (0, import_vuu_utils6.visibleColumnAtIndex)(columns, colIdx);
+      const isAdditive = evt.shiftKey;
+      column && onSortColumn(column, isAdditive);
+    },
+    [columns, onSortColumn]
+  );
+  const {
+    onMouseDown: columnHeaderDragMouseDown,
+    draggable: draggableColumn,
+    ...dragDropHook
+  } = (0, import_vuu_ui_controls2.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
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TableHeader = (0, import_react13.memo)(
+  ({
+    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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase10}-col-headings`, ref: setContainerRef, children: [
+      headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase10}-col-headers`, role: "row", children: [
+        virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            role: "cell",
+            className: "vuuTableCell",
+            style: { width: virtualColSpan }
+          }
+        ) : null,
+        columns.filter(import_vuu_utils7.isNotHidden).map(
+          (col, i) => (0, import_vuu_utils7.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            GroupHeaderCellNext,
+            {
+              "aria-colindex": col.index,
+              column: col,
+              "data-index": i,
+              onMoveColumn: onMoveGroupColumn,
+              onRemoveColumn: onRemoveGroupColumn,
+              onResize: onResizeColumn
+            },
+            col.name
+          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            HeaderCell,
+            {
+              "aria-colindex": col.index,
+              className: (0, import_clsx8.default)({
+                "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
+var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_react24 = require("react");
 
 // src/context-menu/buildContextMenuDescriptors.ts
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
 var buildContextMenuDescriptors = (dataSource) => (location, options) => {
   const descriptors = [];
   if (dataSource === void 0) {
@@ -764,7 +929,7 @@ function buildAggregationMenuItems(options, dataSource) {
         { label: "Count", action: "agg-count", options },
         { label: "Distinct", action: "agg-distinct", options }
       ].concat(
-        (0, import_vuu_utils6.isNumericColumn)(column) ? [
+        (0, import_vuu_utils8.isNumericColumn)(column) ? [
           { label: "Sum", action: "agg-sum", options },
           { label: "Avg", action: "agg-avg", options },
           { label: "High", action: "agg-high", options },
@@ -856,11 +1021,11 @@ function buildGroupMenuItems(options, { groupBy }) {
 }
 
 // src/context-menu/useHandleTableContextMenu.ts
-var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
 var removeFilterColumn = (dataSourceFilter, column) => {
   if (dataSourceFilter.filterStruct && column) {
-    const [filterStruct, filter] = (0, import_vuu_utils7.removeColumnFromFilter)(
+    const [filterStruct, filter] = (0, import_vuu_utils9.removeColumnFromFilter)(
       column,
       dataSourceFilter.filterStruct
     );
@@ -872,7 +1037,7 @@ var removeFilterColumn = (dataSourceFilter, column) => {
     return dataSourceFilter;
   }
 };
-var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils8.AggregationType;
+var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils10.AggregationType;
 var useHandleTableContextMenu = ({
   dataSource,
   onPersistentColumnOperation
@@ -883,17 +1048,17 @@ var useHandleTableContextMenu = ({
       const { column } = gridOptions;
       switch (action.menuId) {
         case "sort-asc":
-          return dataSource.sort = (0, import_vuu_utils8.setSortColumn)(dataSource.sort, column, "A"), true;
+          return dataSource.sort = (0, import_vuu_utils10.setSortColumn)(dataSource.sort, column, "A"), true;
         case "sort-dsc":
-          return dataSource.sort = (0, import_vuu_utils8.setSortColumn)(dataSource.sort, column, "D"), true;
+          return dataSource.sort = (0, import_vuu_utils10.setSortColumn)(dataSource.sort, column, "D"), true;
         case "sort-add-asc":
-          return dataSource.sort = (0, import_vuu_utils8.addSortColumn)(dataSource.sort, column, "A"), true;
+          return dataSource.sort = (0, import_vuu_utils10.addSortColumn)(dataSource.sort, column, "A"), true;
         case "sort-add-dsc":
-          return dataSource.sort = (0, import_vuu_utils8.addSortColumn)(dataSource.sort, column, "D"), true;
+          return dataSource.sort = (0, import_vuu_utils10.addSortColumn)(dataSource.sort, column, "D"), true;
         case "group":
-          return dataSource.groupBy = (0, import_vuu_utils8.addGroupColumn)(dataSource.groupBy, column), true;
+          return dataSource.groupBy = (0, import_vuu_utils10.addGroupColumn)(dataSource.groupBy, column), true;
         case "group-add":
-          return dataSource.groupBy = (0, import_vuu_utils8.addGroupColumn)(dataSource.groupBy, column), true;
+          return dataSource.groupBy = (0, import_vuu_utils10.addGroupColumn)(dataSource.groupBy, column), true;
         case "column-hide":
           return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
         case "column-remove":
@@ -903,17 +1068,17 @@ var useHandleTableContextMenu = ({
         case "remove-filters":
           return dataSource.filter = { filter: "" }, true;
         case "agg-avg":
-          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Average), true;
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, Average), true;
         case "agg-high":
-          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, High), true;
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, High), true;
         case "agg-low":
-          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Low), true;
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, Low), true;
         case "agg-count":
-          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Count), true;
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, Count), true;
         case "agg-distinct":
-          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Distinct), true;
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, Distinct), true;
         case "agg-sum":
-          return dataSource.aggregations = (0, import_vuu_utils8.setAggregations)(dataSource.aggregations, column, Sum), true;
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, Sum), true;
         case "column-pin-floating":
           return onPersistentColumnOperation({ type: "pinColumn", column, pin: "floating" }), true;
         case "column-pin-left":
@@ -957,8 +1122,8 @@ var updateTableConfig = (config, action) => {
 };
 
 // src/useCellEditing.ts
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
-var import_react13 = require("react");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_react14 = require("react");
 
 // src/table-dom-utils.ts
 var headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;
@@ -976,7 +1141,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) {
@@ -989,13 +1154,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 = (0, import_react13.useCallback)(() => {
+  const commitHandler = (0, import_react14.useCallback)(() => {
     navigate();
   }, [navigate]);
-  const editInput = (0, import_react13.useCallback)(
+  const editInput = (0, import_react14.useCallback)(
     (evt) => {
       const cellEl = evt.target;
       const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
@@ -1006,7 +1192,7 @@ var useCellEditing = ({ navigate }) => {
     },
     []
   );
-  const focusInput = (0, import_react13.useCallback)(
+  const focusInput = (0, import_react14.useCallback)(
     (evt) => {
       const cellEl = evt.target;
       const input = cellEl.querySelector("input");
@@ -1017,11 +1203,11 @@ var useCellEditing = ({ navigate }) => {
     },
     []
   );
-  const handleKeyDown = (0, import_react13.useCallback)(
+  const handleKeyDown = (0, import_react14.useCallback)(
     (e) => {
       const el = e.target;
       if (cellIsTextInput(el)) {
-        if ((0, import_vuu_utils9.isCharacterKey)(e.key)) {
+        if ((0, import_vuu_utils11.isCharacterKey)(e.key)) {
           editInput(e);
         } else if (e.key === "Enter") {
           focusInput(e);
@@ -1030,7 +1216,7 @@ var useCellEditing = ({ navigate }) => {
     },
     [editInput, focusInput]
   );
-  const handleDoubleClick = (0, import_react13.useCallback)(
+  const handleDoubleClick = (0, import_react14.useCallback)(
     (e) => {
       const el = e.target;
       if (el.matches("input") || el.querySelector("input")) {
@@ -1040,14 +1226,14 @@ var useCellEditing = ({ navigate }) => {
     },
     [editInput]
   );
-  const handleBlur = (0, import_react13.useCallback)(
+  const handleBlur = (0, import_react14.useCallback)(
     (e) => {
       const el = e.target;
       el.removeEventListener("vuu-commit", commitHandler, true);
     },
     [commitHandler]
   );
-  const handleFocus = (0, import_react13.useCallback)(
+  const handleFocus = (0, import_react14.useCallback)(
     (e) => {
       const el = e.target;
       el.addEventListener("vuu-commit", commitHandler, true);
@@ -1063,12 +1249,12 @@ var useCellEditing = ({ navigate }) => {
 };
 
 // src/useDataSource.ts
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
-var import_react14 = require("react");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_react15 = require("react");
 
 // src/moving-window.ts
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
-var { SELECTED: SELECTED2 } = import_vuu_utils10.metadataKeys;
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var { SELECTED: SELECTED2 } = import_vuu_utils12.metadataKeys;
 var MovingWindow = class {
   constructor({ from, to }) {
     this.rowCount = 0;
@@ -1078,7 +1264,7 @@ var MovingWindow = class {
       }
       this.rowCount = rowCount;
     };
-    this.range = new import_vuu_utils10.WindowRange(from, to);
+    this.range = new import_vuu_utils12.WindowRange(from, to);
     this.data = new Array(Math.max(0, to - from));
     this.rowCount = 0;
   }
@@ -1089,7 +1275,7 @@ var MovingWindow = class {
       this.data[internalIndex] = data;
       if (data[SELECTED2]) {
         const previousRow = this.data[internalIndex - 1];
-        if ((0, import_vuu_utils10.isRowSelectedLast)(previousRow)) {
+        if ((0, import_vuu_utils12.isRowSelectedLast)(previousRow)) {
           this.data[internalIndex - 1] = previousRow.slice();
           this.data[internalIndex - 1][SELECTED2] -= 4;
         }
@@ -1130,20 +1316,20 @@ var useDataSource = ({
   onFeatureInvocation,
   onSizeChange,
   onSubscribed,
-  range = import_vuu_utils11.NULL_RANGE,
+  range = import_vuu_utils13.NULL_RANGE,
   renderBufferSize = 0
 }) => {
-  const [, forceUpdate] = (0, import_react14.useState)(null);
-  const data = (0, import_react14.useRef)([]);
-  const isMounted = (0, import_react14.useRef)(true);
-  const hasUpdated = (0, import_react14.useRef)(false);
-  const rangeRef = (0, import_react14.useRef)(import_vuu_utils11.NULL_RANGE);
-  const dataWindow = (0, import_react14.useMemo)(
-    () => new MovingWindow((0, import_vuu_utils11.getFullRange)(range, renderBufferSize)),
+  const [, forceUpdate] = (0, import_react15.useState)(null);
+  const data = (0, import_react15.useRef)([]);
+  const isMounted = (0, import_react15.useRef)(true);
+  const hasUpdated = (0, import_react15.useRef)(false);
+  const rangeRef = (0, import_react15.useRef)(range);
+  const dataWindow = (0, import_react15.useMemo)(
+    () => new MovingWindow((0, import_vuu_utils13.getFullRange)(range, renderBufferSize)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const setData = (0, import_react14.useCallback)(
+  const setData = (0, import_react15.useCallback)(
     (updates) => {
       for (const row of updates) {
         dataWindow.add(row);
@@ -1157,7 +1343,7 @@ var useDataSource = ({
     },
     [dataWindow]
   );
-  const datasourceMessageHandler = (0, import_react14.useCallback)(
+  const datasourceMessageHandler = (0, import_react15.useCallback)(
     (message) => {
       if (message.type === "subscribed") {
         onSubscribed == null ? void 0 : onSubscribed(message);
@@ -1180,10 +1366,10 @@ var useDataSource = ({
     },
     [dataWindow, onFeatureInvocation, onSizeChange, onSubscribed, setData]
   );
-  const getSelectedRows = (0, import_react14.useCallback)(() => {
+  const getSelectedRows = (0, import_react15.useCallback)(() => {
     return dataWindow.getSelectedRows();
   }, [dataWindow]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     var _a;
     isMounted.current = true;
     (_a = dataSource.resume) == null ? void 0 : _a.call(dataSource);
@@ -1193,23 +1379,25 @@ var useDataSource = ({
       (_a2 = dataSource.suspend) == null ? void 0 : _a2.call(dataSource);
     };
   }, [dataSource]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     var _a;
     if (dataSource.status === "disabled") {
       (_a = dataSource.enable) == null ? void 0 : _a.call(dataSource, datasourceMessageHandler);
     } else {
       dataSource == null ? void 0 : dataSource.subscribe(
-        { range: (0, import_vuu_utils11.getFullRange)(range, renderBufferSize) },
+        { range: (0, import_vuu_utils13.getFullRange)(range, renderBufferSize) },
         datasourceMessageHandler
       );
     }
   }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
-  const setRange = (0, import_react14.useCallback)(
+  const setRange = (0, import_react15.useCallback)(
     (range2) => {
-      const fullRange = (0, import_vuu_utils11.getFullRange)(range2, renderBufferSize);
-      dataWindow.setRange(fullRange);
-      dataSource.range = rangeRef.current = fullRange;
-      dataSource.emit("range", range2);
+      if (!(0, import_vuu_utils13.rangesAreSame)(range2, rangeRef.current)) {
+        const fullRange = (0, import_vuu_utils13.getFullRange)(range2, renderBufferSize);
+        dataWindow.setRange(fullRange);
+        dataSource.range = rangeRef.current = fullRange;
+        dataSource.emit("range", range2);
+      }
     },
     [dataSource, dataWindow, renderBufferSize]
   );
@@ -1223,16 +1411,16 @@ var useDataSource = ({
 };
 
 // src/useInitialValue.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var useInitialValue = (value) => {
-  const ref = (0, import_react15.useRef)(value);
-  return (0, import_react15.useMemo)(() => ref.current, []);
+  const ref = (0, import_react16.useRef)(value);
+  return (0, import_react16.useMemo)(() => ref.current, []);
 };
 
 // src/useKeyboardNavigation.ts
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
 var import_core = require("@salt-ds/core");
-var import_react16 = require("react");
+var import_react17 = require("react");
 var rowNavigationKeys = /* @__PURE__ */ new Set([
   "Home",
   "End",
@@ -1301,17 +1489,17 @@ var useKeyboardNavigation = ({
   viewportRowCount
 }) => {
   var _a;
-  const focusedCellPos = (0, import_react16.useRef)([-1, -1]);
-  const focusableCell = (0, import_react16.useRef)();
-  const activeCellPos = (0, import_react16.useRef)([-1, 0]);
-  const highlightedIndexRef = (0, import_react16.useRef)();
+  const focusedCellPos = (0, import_react17.useRef)([-1, -1]);
+  const focusableCell = (0, import_react17.useRef)();
+  const activeCellPos = (0, import_react17.useRef)([-1, 0]);
+  const highlightedIndexRef = (0, import_react17.useRef)();
   const [highlightedIndex, setHighlightedIdx] = (0, import_core.useControlled)({
     controlled: highlightedIndexProp,
     default: defaultHighlightedIndex,
     name: "UseKeyboardNavigation"
   });
   highlightedIndexRef.current = highlightedIndex;
-  const setHighlightedIndex = (0, import_react16.useCallback)(
+  const setHighlightedIndex = (0, import_react17.useCallback)(
     (idx, fromKeyboard = false) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
@@ -1331,14 +1519,14 @@ var useKeyboardNavigation = ({
     } else {
       const focusedRow = tableCell.closest("[role='row']");
       if (focusedRow) {
-        const rowIdx = (0, import_vuu_utils12.getIndexFromRowElement)(focusedRow);
+        const rowIdx = (0, import_vuu_utils14.getIndexFromRowElement)(focusedRow);
         const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
         return [rowIdx, colIdx];
       }
     }
     return NULL_CELL_POS;
   };
-  const focusCell = (0, import_react16.useCallback)(
+  const focusCell = (0, import_react17.useCallback)(
     (cellPos) => {
       var _a2;
       if (containerRef.current) {
@@ -1349,7 +1537,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 });
         }
@@ -1359,7 +1546,7 @@ var useKeyboardNavigation = ({
     // be often whilst scrolling - store range in a a ref ?
     [containerRef, requestScroll]
   );
-  const setActiveCell = (0, import_react16.useCallback)(
+  const setActiveCell = (0, import_react17.useCallback)(
     (rowIdx, colIdx, fromKeyboard = false) => {
       const pos = [rowIdx, colIdx];
       activeCellPos.current = pos;
@@ -1374,34 +1561,46 @@ var useKeyboardNavigation = ({
     },
     [focusCell, navigationStyle, setHighlightedIdx]
   );
-  const nextPageItemIdx = (0, import_react16.useCallback)(
+  const nextPageItemIdx = (0, import_react17.useCallback)(
     (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 = (0, import_react16.useCallback)(() => {
+  const handleFocus = (0, import_react17.useCallback)(() => {
     var _a2;
     if (disableHighlightOnFocus !== true) {
       if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
@@ -1420,7 +1619,7 @@ var useKeyboardNavigation = ({
     navigationStyle,
     setHighlightedIdx
   ]);
-  const navigateChildItems = (0, import_react16.useCallback)(
+  const navigateChildItems = (0, import_react17.useCallback)(
     async (key) => {
       const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
       const [rowIdx, colIdx] = activeCellPos.current;
@@ -1430,13 +1629,13 @@ var useKeyboardNavigation = ({
     },
     [columnCount, nextPageItemIdx, rowCount, setActiveCell]
   );
-  const scrollRowIntoViewIfNecessary = (0, import_react16.useCallback)(
+  const scrollRowIntoViewIfNecessary = (0, import_react17.useCallback)(
     (rowIndex) => {
       requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex });
     },
     [requestScroll]
   );
-  const moveHighlightedRow = (0, import_react16.useCallback)(
+  const moveHighlightedRow = (0, import_react17.useCallback)(
     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);
@@ -1453,12 +1652,12 @@ var useKeyboardNavigation = ({
       setHighlightedIndex
     ]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (highlightedIndexProp !== void 0 && highlightedIndexProp !== -1) {
       scrollRowIntoViewIfNecessary(highlightedIndexProp);
     }
   }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
-  const handleKeyDown = (0, import_react16.useCallback)(
+  const handleKeyDown = (0, import_react17.useCallback)(
     (e) => {
       if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
         e.preventDefault();
@@ -1472,7 +1671,7 @@ var useKeyboardNavigation = ({
     },
     [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]
   );
-  const handleClick = (0, import_react16.useCallback)(
+  const handleClick = (0, import_react17.useCallback)(
     // Might not be a cell e.g the Settings button
     (evt) => {
       const target = evt.target;
@@ -1484,10 +1683,10 @@ var useKeyboardNavigation = ({
     },
     [setActiveCell]
   );
-  const handleMouseLeave = (0, import_react16.useCallback)(() => {
+  const handleMouseLeave = (0, import_react17.useCallback)(() => {
     setHighlightedIndex(-1);
   }, [setHighlightedIndex]);
-  const handleMouseMove = (0, import_react16.useCallback)(
+  const handleMouseMove = (0, import_react17.useCallback)(
     (evt) => {
       const idx = closestRowIndex(evt.target);
       if (idx !== -1 && idx !== highlightedIndexRef.current) {
@@ -1496,11 +1695,11 @@ var useKeyboardNavigation = ({
     },
     [setHighlightedIndex]
   );
-  const navigate = (0, import_react16.useCallback)(() => {
+  const navigate = (0, import_react17.useCallback)(() => {
     navigateChildItems("ArrowDown");
   }, [navigateChildItems]);
   const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (fullyRendered && focusableCell.current === void 0 && !disableFocus) {
       const { current: container } = containerRef;
       const cell = (container == null ? void 0 : container.querySelector(headerCellQuery(0))) || (container == null ? void 0 : container.querySelector(dataCellQuery(0, 0)));
@@ -1522,9 +1721,9 @@ var useKeyboardNavigation = ({
 };
 
 // src/useSelection.ts
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
-var import_react17 = require("react");
-var { IDX: IDX2 } = import_vuu_utils13.metadataKeys;
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_react18 = require("react");
+var { IDX: IDX2 } = import_vuu_utils15.metadataKeys;
 var NO_SELECTION = [];
 var defaultSelectionKeys = ["Enter", " "];
 var useSelection = ({
@@ -1535,18 +1734,18 @@ var useSelection = ({
   onSelectionChange
 }) => {
   selectionModel === "extended" || selectionModel === "checkbox";
-  const lastActiveRef = (0, import_react17.useRef)(-1);
-  const selectedRef = (0, import_react17.useRef)(NO_SELECTION);
-  const isSelectionEvent = (0, import_react17.useCallback)(
+  const lastActiveRef = (0, import_react18.useRef)(-1);
+  const selectedRef = (0, import_react18.useRef)(NO_SELECTION);
+  const isSelectionEvent = (0, import_react18.useCallback)(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
-  const handleRowClick = (0, import_react17.useCallback)(
+  const handleRowClick = (0, import_react18.useCallback)(
     (row, rangeSelect, keepExistingSelection) => {
       const { [IDX2]: idx } = row;
       const { current: active } = lastActiveRef;
       const { current: selected } = selectedRef;
-      const selectOperation = (0, import_vuu_utils13.isRowSelected)(row) ? import_vuu_utils13.deselectItem : import_vuu_utils13.selectItem;
+      const selectOperation = (0, import_vuu_utils15.isRowSelected)(row) ? import_vuu_utils15.deselectItem : import_vuu_utils15.selectItem;
       const newSelected = selectOperation(
         selectionModel,
         selected,
@@ -1562,7 +1761,7 @@ var useSelection = ({
     },
     [onSelect, onSelectionChange, selectionModel]
   );
-  const handleKeyDown = (0, import_react17.useCallback)(
+  const handleKeyDown = (0, import_react18.useCallback)(
     (e) => {
       if (isSelectionEvent(e)) {
         const { current: rowIndex } = highlightedIndexRef;
@@ -1571,7 +1770,7 @@ var useSelection = ({
             `[aria-rowindex="${rowIndex}"]`
           );
           if (rowEl) {
-            (0, import_vuu_utils13.dispatchMouseEvent)(rowEl, "click");
+            (0, import_vuu_utils15.dispatchMouseEvent)(rowEl, "click");
           }
         }
       }
@@ -1586,8 +1785,8 @@ var useSelection = ({
 
 // src/useTableContextMenu.ts
 var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
-var import_react18 = require("react");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var import_react19 = require("react");
 var NO_ROWS = [];
 var useTableContextMenu = ({
   columns,
@@ -1596,15 +1795,15 @@ var useTableContextMenu = ({
   getSelectedRows
 }) => {
   const [showContextMenu] = (0, import_vuu_popups2.useContextMenu)();
-  const onContextMenu = (0, import_react18.useCallback)(
+  const onContextMenu = (0, import_react19.useCallback)(
     (evt) => {
       const target = evt.target;
       const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
       const rowEl = target == null ? void 0 : target.closest("div[role='row']");
       if (cellEl && rowEl) {
         const { selectedRowsCount } = dataSource;
-        const columnMap = (0, import_vuu_utils14.buildColumnMap)(columns);
-        const rowIndex = (0, import_vuu_utils14.getIndexFromRowElement)(rowEl);
+        const columnMap = (0, import_vuu_utils16.buildColumnMap)(columns);
+        const rowIndex = (0, import_vuu_utils16.getIndexFromRowElement)(rowEl);
         const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
         const row = data.find(([idx]) => idx === rowIndex);
         const columnName = columns[cellIndex];
@@ -1623,12 +1822,11 @@ var useTableContextMenu = ({
 };
 
 // src/useTableModel.ts
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
-var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
-var import_react19 = require("react");
-var { info } = (0, import_vuu_utils15.logger)("useTableModel");
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
+var import_react20 = require("react");
+var { info } = (0, import_vuu_utils17.logger)("useTableModel");
 var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = import_vuu_utils15.metadataKeys.count;
 var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
 var getDataType = (column, tableSchema) => {
   const schemaColumn = tableSchema == null ? void 0 : tableSchema.columns.find(
@@ -1671,7 +1869,7 @@ var columnReducer = (state, action) => {
   }
 };
 var useTableModel = (tableConfigProp, dataSource) => {
-  const [state, dispatchColumnAction] = (0, import_react19.useReducer)(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
+  const [state, dispatchColumnAction] = (0, import_react20.useReducer)(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
   const { columns, headings, tableConfig, ...tableAttributes } = state;
   return {
     columns,
@@ -1684,13 +1882,13 @@ var useTableModel = (tableConfigProp, dataSource) => {
 function init({ dataSource, tableConfig }) {
   const { columns, ...tableAttributes } = tableConfig;
   const { config: dataSourceConfig, tableSchema } = dataSource;
-  const runtimeColumns = columns.filter((0, import_vuu_utils15.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
+  const runtimeColumns = columns.filter((0, import_vuu_utils17.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
     columnDescriptorToRuntimeColumDescriptor(tableAttributes, tableSchema)
   );
-  const maybePinnedColumns = runtimeColumns.some(import_vuu_utils15.isPinned) ? (0, import_vuu_utils15.sortPinnedColumns)(runtimeColumns) : runtimeColumns;
+  const maybePinnedColumns = runtimeColumns.some(import_vuu_utils17.isPinned) ? (0, import_vuu_utils17.sortPinnedColumns)(runtimeColumns) : runtimeColumns;
   let state = {
     columns: maybePinnedColumns,
-    headings: (0, import_vuu_utils15.getTableHeadings)(maybePinnedColumns),
+    headings: (0, import_vuu_utils17.getTableHeadings)(maybePinnedColumns),
     tableConfig,
     ...tableAttributes
   };
@@ -1716,33 +1914,29 @@ var columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema) =>
   const serverDataType = getDataType(column, tableSchema);
   const {
     align = getDefaultAlignment(serverDataType),
-    key,
     name,
-    label = (0, import_vuu_utils15.getColumnLabel)(column),
+    label = (0, import_vuu_utils17.getColumnLabel)(column),
     width = columnDefaultWidth,
     ...rest
   } = column;
   const runtimeColumnWithDefaults = {
     ...rest,
     align,
-    CellRenderer: (0, import_vuu_utils15.getCellRenderer)(column),
-    HeaderCellContentRenderer: (0, import_vuu_utils15.getColumnHeaderContentRenderer)(column),
-    HeaderCellLabelRenderer: (0, import_vuu_utils15.getColumnHeaderLabelRenderer)(column),
-    clientSideEditValidationCheck: (0, import_vuu_utils15.hasValidationRules)(column.type) ? (0, import_vuu_ui_controls.buildValidationChecker)(column.type.renderer.rules) : void 0,
+    CellRenderer: (0, import_vuu_utils17.getCellRenderer)(column),
+    HeaderCellContentRenderer: (0, import_vuu_utils17.getColumnHeaderContentRenderer)(column),
+    HeaderCellLabelRenderer: (0, import_vuu_utils17.getColumnHeaderLabelRenderer)(column),
+    clientSideEditValidationCheck: (0, import_vuu_utils17.hasValidationRules)(column.type) ? (0, import_vuu_ui_controls3.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: (0, import_vuu_utils15.getValueFormatter)(column, serverDataType),
+    valueFormatter: (0, import_vuu_utils17.getValueFormatter)(column, serverDataType),
     width
   };
-  if ((0, import_vuu_utils15.isGroupColumn)(runtimeColumnWithDefaults)) {
+  if ((0, import_vuu_utils17.isGroupColumn)(runtimeColumnWithDefaults)) {
     runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(
-      (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(
-        col,
-        col.key
-      )
+      (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(col, index)
     );
   }
   return runtimeColumnWithDefaults;
@@ -1834,8 +2028,8 @@ function pinColumn2(state, action) {
   const { column, pin } = action;
   const targetColumn = columns.find((col) => col.name === column.name);
   if (targetColumn) {
-    columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, pin });
-    columns = (0, import_vuu_utils15.sortPinnedColumns)(columns);
+    columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, pin });
+    columns = (0, import_vuu_utils17.sortPinnedColumns)(columns);
     return {
       ...state,
       columns
@@ -1850,26 +2044,26 @@ function updateColumnProp(state, action) {
   const targetColumn = columns.find((col) => col.name === column.name);
   if (targetColumn) {
     if (align === "left" || align === "right") {
-      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, align });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, align });
     }
     if (typeof label === "string") {
-      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, label });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, label });
     }
     if (typeof resizing === "boolean") {
-      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, resizing });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, resizing });
     }
     if (typeof hidden === "boolean") {
-      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, hidden });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, hidden });
     }
     if (typeof width === "number") {
-      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, width });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, width });
       const targetConfigColumn = tableConfig.columns.find(
         (col) => col.name === column.name
       );
       if (targetConfigColumn) {
         tableConfig = {
           ...tableConfig,
-          columns: (0, import_vuu_utils15.replaceColumn)(tableConfig.columns, {
+          columns: (0, import_vuu_utils17.replaceColumn)(tableConfig.columns, {
             ...targetConfigColumn,
             width
           })
@@ -1891,70 +2085,84 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
   if (hasGroupBy) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils15.applyGroupByToColumns)(result.columns, groupBy, confirmed)
+      columns: (0, import_vuu_utils17.applyGroupByToColumns)(result.columns, groupBy, confirmed)
     };
   }
   if (hasSort) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils15.applySortToColumns)(result.columns, sort)
+      columns: (0, import_vuu_utils17.applySortToColumns)(result.columns, sort)
     };
   }
   if (hasFilter) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils15.applyFilterToColumns)(result.columns, filter)
+      columns: (0, import_vuu_utils17.applyFilterToColumns)(result.columns, filter)
     };
-  } else if (result.columns.some(import_vuu_utils15.isFilteredColumn)) {
+  } else if (result.columns.some(import_vuu_utils17.isFilteredColumn)) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils15.stripFilterFromColumns)(result.columns)
+      columns: (0, import_vuu_utils17.stripFilterFromColumns)(result.columns)
     };
   }
   return result;
 }
 
 // src/useTableScroll.ts
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
-var import_react20 = require("react");
-var getPctScroll = (container) => {
-  const { scrollLeft, scrollTop } = container;
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_react21 = require("react");
+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 = (0, import_react20.useRef)(null);
-  const callbackRef = (0, import_react20.useCallback)(
+  const ref = (0, import_react21.useRef)(null);
+  const callbackRef = (0, import_react21.useCallback)(
     (el) => {
       if (el) {
         ref.current = el;
@@ -1970,75 +2178,142 @@ var useCallbackRef = ({
   return callbackRef;
 };
 var useTableScroll = ({
+  columns,
   getRowAtPosition,
   onHorizontalScroll,
   onVerticalScroll,
+  onVerticalScrollInSitu,
   scrollingApiRef,
   setRange,
   viewportMeasurements
 }) => {
-  const firstRowRef = (0, import_react20.useRef)(0);
-  const contentContainerScrolledRef = (0, import_react20.useRef)(false);
-  const scrollPosRef = (0, import_react20.useRef)({ scrollTop: 0, scrollLeft: 0 });
-  const scrollbarContainerRef = (0, import_react20.useRef)(null);
-  const contentContainerRef = (0, import_react20.useRef)(null);
+  const firstRowRef = (0, import_react21.useRef)(0);
+  const contentContainerScrolledRef = (0, import_react21.useRef)(false);
+  const contentContainerPosRef = (0, import_react21.useRef)({
+    scrollTop: 0,
+    scrollLeft: 0
+  });
+  const scrollbarContainerScrolledRef = (0, import_react21.useRef)(false);
+  const scrollbarContainerPosRef = (0, import_react21.useRef)({
+    scrollTop: 0,
+    scrollLeft: 0
+  });
+  const scrollbarContainerRef = (0, import_react21.useRef)(null);
+  const contentContainerRef = (0, import_react21.useRef)(null);
+  const lastHorizontalScrollCheckPoint = (0, import_react21.useRef)(0);
   const {
     appliedPageSize,
     isVirtualScroll,
-    maxScrollContainerScrollHorizontal: maxScrollLeft,
-    maxScrollContainerScrollVertical: maxScrollTop,
     rowCount: viewportRowCount,
-    totalHeaderHeight
+    totalHeaderHeight,
+    viewportWidth
   } = viewportMeasurements;
-  const handleVerticalScroll = (0, import_react20.useCallback)(
+  const columnsWithinViewportRef = (0, import_react21.useRef)([]);
+  const [, forceRefresh] = (0, import_react21.useState)({});
+  const preSpanRef = (0, import_react21.useRef)(0);
+  (0, import_react21.useMemo)(() => {
+    const [visibleColumns, offset] = (0, import_vuu_utils18.getColumnsInViewport)(
+      columns,
+      contentContainerPosRef.current.scrollLeft,
+      contentContainerPosRef.current.scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER
+    );
+    preSpanRef.current = offset;
+    columnsWithinViewportRef.current = visibleColumns;
+  }, [viewportWidth, columns]);
+  const handleHorizontalScroll = (0, import_react21.useCallback)(
+    (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] = (0, import_vuu_utils18.getColumnsInViewport)(
+          columns,
+          scrollLeft,
+          scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER
+        );
+        if ((0, import_vuu_utils18.itemsChanged)(columnsWithinViewportRef.current, visibleColumns)) {
+          preSpanRef.current = pre;
+          columnsWithinViewportRef.current = visibleColumns;
+          forceRefresh({});
+        }
+      }
+    },
+    [columns, onHorizontalScroll, viewportWidth]
+  );
+  const handleVerticalScroll = (0, import_react21.useCallback)(
     (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 = (0, import_react20.useCallback)(() => {
+  const handleScrollbarContainerScroll = (0, import_react21.useCallback)(() => {
     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 = (0, import_react20.useCallback)(() => {
+    onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(0);
+  }, [onVerticalScrollInSitu]);
+  const handleContentContainerScroll = (0, import_react21.useCallback)(() => {
+    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 = (0, import_react20.useCallback)(
+  }, [handleVerticalScroll, handleHorizontalScroll]);
+  const handleAttachScrollbarContainer = (0, import_react21.useCallback)(
     (el) => {
       scrollbarContainerRef.current = el;
       el.addEventListener("scroll", handleScrollbarContainerScroll, {
@@ -2047,14 +2322,14 @@ var useTableScroll = ({
     },
     [handleScrollbarContainerScroll]
   );
-  const handleDetachScrollbarContainer = (0, import_react20.useCallback)(
+  const handleDetachScrollbarContainer = (0, import_react21.useCallback)(
     (el) => {
       scrollbarContainerRef.current = null;
       el.removeEventListener("scroll", handleScrollbarContainerScroll);
     },
     [handleScrollbarContainerScroll]
   );
-  const handleAttachContentContainer = (0, import_react20.useCallback)(
+  const handleAttachContentContainer = (0, import_react21.useCallback)(
     (el) => {
       contentContainerRef.current = el;
       el.addEventListener("scroll", handleContentContainerScroll, {
@@ -2063,7 +2338,7 @@ var useTableScroll = ({
     },
     [handleContentContainerScroll]
   );
-  const handleDetachContentContainer = (0, import_react20.useCallback)(
+  const handleDetachContentContainer = (0, import_react21.useCallback)(
     (el) => {
       contentContainerRef.current = null;
       el.removeEventListener("scroll", handleContentContainerScroll);
@@ -2078,15 +2353,16 @@ var useTableScroll = ({
     onAttach: handleAttachScrollbarContainer,
     onDetach: handleDetachScrollbarContainer
   });
-  const requestScroll = (0, import_react20.useCallback)(
+  const requestScroll = (0, import_react21.useCallback)(
     (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 = (0, import_vuu_utils16.getRowElementAtIndex)(
-            scrollbarContainer,
+          const activeRow = (0, import_vuu_utils18.getRowElementAtIndex)(
+            contentContainer,
             scrollRequest.rowIndex
           );
           if (activeRow !== null) {
@@ -2096,10 +2372,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;
@@ -2114,7 +2394,7 @@ var useTableScroll = ({
                     maxScrollLeft
                   );
                 }
-                scrollbarContainer.scrollTo({
+                contentContainer.scrollTo({
                   top: newScrollTop,
                   left: newScrollLeft,
                   behavior: "smooth"
@@ -2125,14 +2405,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"
@@ -2141,9 +2425,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"
           });
         }
@@ -2152,14 +2436,14 @@ var useTableScroll = ({
     [
       appliedPageSize,
       isVirtualScroll,
-      maxScrollLeft,
-      maxScrollTop,
+      onVerticalScrollInSitu,
       setRange,
       totalHeaderHeight,
       viewportRowCount
     ]
   );
-  const scrollHandles = (0, import_react20.useMemo)(
+  const scrollHandles = (0, import_react21.useMemo)(
+    // TODO not complete yet
     () => ({
       scrollToIndex: (rowIndex) => {
         if (scrollbarContainerRef.current) {
@@ -2173,7 +2457,7 @@ var useTableScroll = ({
     }),
     []
   );
-  (0, import_react20.useImperativeHandle)(
+  (0, import_react21.useImperativeHandle)(
     scrollingApiRef,
     () => {
       if (scrollbarContainerRef.current) {
@@ -2184,25 +2468,28 @@ var useTableScroll = ({
     },
     [scrollHandles]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     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
-var import_react21 = require("react");
-var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
-var MAX_RAW_ROWS = 1e5;
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var import_react22 = require("react");
+var MAX_PIXEL_HEIGHT = 1e7;
 var UNMEASURED_VIEWPORT = {
   appliedPageSize: 0,
   contentHeight: 0,
@@ -2211,36 +2498,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,
@@ -2248,48 +2514,58 @@ var useTableViewport = ({
   headings,
   rowCount,
   rowHeight,
+  selectionEndSize = 4,
   size
 }) => {
-  const pctScrollTopRef = (0, import_react21.useRef)(0);
-  const pixelContentHeight = rowHeight * Math.min(rowCount, MAX_RAW_ROWS);
+  const inSituRowOffsetRef = (0, import_react22.useRef)(0);
+  const pctScrollTopRef = (0, import_react22.useRef)(0);
+  const pixelContentHeight = Math.min(rowHeight * rowCount, MAX_PIXEL_HEIGHT);
   const virtualContentHeight = rowCount * rowHeight;
   const virtualisedExtent = virtualContentHeight - pixelContentHeight;
-  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react21.useMemo)(
-    () => measurePinnedColumns(columns),
-    [columns]
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react22.useMemo)(
+    () => (0, import_vuu_utils19.measurePinnedColumns)(columns, selectionEndSize),
+    [columns, selectionEndSize]
   );
-  const totalHeaderHeightRef = (0, import_react21.useRef)(headerHeight);
-  (0, import_react21.useMemo)(() => {
+  const totalHeaderHeightRef = (0, import_react22.useRef)(headerHeight);
+  (0, import_react22.useMemo)(() => {
     totalHeaderHeightRef.current = headerHeight * (1 + headings.length);
   }, [headerHeight, headings.length]);
-  const [getRowOffset, getRowAtPosition, isVirtualScroll] = (0, import_react21.useMemo)(() => {
+  const [getRowOffset, getRowAtPosition, isVirtualScroll] = (0, import_react22.useMemo)(() => {
     if (virtualisedExtent) {
-      return (0, import_vuu_utils17.virtualRowPositioning)(
-        rowHeight,
-        virtualisedExtent,
-        pctScrollTopRef
-      );
+      const [_getRowOffset, getRowAtPosition2, _isVirtual] = (0, import_vuu_utils19.virtualRowPositioning)(rowHeight, virtualisedExtent, pctScrollTopRef);
+      const getOffset = (row) => {
+        return _getRowOffset(row, inSituRowOffsetRef.current);
+      };
+      return [getOffset, getRowAtPosition2, _isVirtual];
     } else {
-      return (0, import_vuu_utils17.actualRowPositioning)(rowHeight);
+      return (0, import_vuu_utils19.actualRowPositioning)(rowHeight);
     }
   }, [virtualisedExtent, rowHeight]);
-  const setPctScrollTop = (0, import_react21.useCallback)((scrollPct) => {
+  const setScrollTop = (0, import_react22.useCallback)((_, scrollPct) => {
     pctScrollTopRef.current = scrollPct;
   }, []);
-  return (0, import_react21.useMemo)(() => {
-    var _a;
+  const setInSituRowOffset = (0, import_react22.useCallback)((rowIndexOffset) => {
+    if (rowIndexOffset === 0) {
+      inSituRowOffsetRef.current = 0;
+    } else {
+      inSituRowOffsetRef.current = Math.max(
+        0,
+        inSituRowOffsetRef.current + rowIndexOffset
+      );
+    }
+  }, []);
+  return (0, import_react22.useMemo)(() => {
     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,
@@ -2298,15 +2574,15 @@ var useTableViewport = ({
         getRowOffset,
         isVirtualScroll,
         horizontalScrollbarHeight,
-        maxScrollContainerScrollHorizontal,
-        maxScrollContainerScrollVertical,
         pinnedWidthLeft,
         pinnedWidthRight,
         rowCount: count,
-        setPctScrollTop,
+        setInSituRowOffset,
+        setScrollTop,
         totalHeaderHeight,
         verticalScrollbarWidth,
-        viewportBodyHeight
+        viewportBodyHeight,
+        viewportWidth
       };
     } else {
       return UNMEASURED_VIEWPORT;
@@ -2321,16 +2597,17 @@ var useTableViewport = ({
     pinnedWidthRight,
     pixelContentHeight,
     rowHeight,
-    setPctScrollTop,
+    setInSituRowOffset,
+    setScrollTop,
     size,
     virtualContentHeight
   ]);
 };
 
 // src/useTableAndColumnSettings.ts
-var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
-var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
-var import_react22 = require("react");
+var import_vuu_layout = require("@vuu-ui/vuu-layout");
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_react23 = require("react");
 var useTableAndColumnSettings = ({
   availableColumns: availableColumnsProps,
   onAvailableColumnsChange,
@@ -2339,12 +2616,12 @@ var useTableAndColumnSettings = ({
   onDataSourceConfigChange,
   tableConfig
 }) => {
-  const dispatchLayoutAction = (0, import_vuu_layout2.useLayoutProviderDispatch)();
-  const showTableSettingsRef = (0, import_react22.useRef)();
-  const [availableColumns, setAvailableColumns] = (0, import_react22.useState)(
+  const dispatchLayoutAction = (0, import_vuu_layout.useLayoutProviderDispatch)();
+  const showTableSettingsRef = (0, import_react23.useRef)();
+  const [availableColumns, setAvailableColumns] = (0, import_react23.useState)(
     availableColumnsProps
   );
-  const showContextPanel = (0, import_react22.useCallback)(
+  const showContextPanel = (0, import_react23.useCallback)(
     (componentType, title, props) => {
       dispatchLayoutAction({
         type: "set-props",
@@ -2361,17 +2638,17 @@ var useTableAndColumnSettings = ({
     },
     [dispatchLayoutAction]
   );
-  const handleCancelCreateColumn = (0, import_react22.useCallback)(() => {
+  const handleCancelCreateColumn = (0, import_react23.useCallback)(() => {
     requestAnimationFrame(() => {
       var _a;
       (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
     });
   }, []);
-  const handleCreateCalculatedColumn = (0, import_react22.useCallback)(
+  const handleCreateCalculatedColumn = (0, import_react23.useCallback)(
     (column) => {
       const newAvailableColumns = availableColumns.concat({
         name: column.name,
-        serverDataType: (0, import_vuu_utils18.getCalculatedColumnType)(column)
+        serverDataType: (0, import_vuu_utils20.getCalculatedColumnType)(column)
       });
       setAvailableColumns(newAvailableColumns);
       onAvailableColumnsChange == null ? void 0 : onAvailableColumnsChange(newAvailableColumns);
@@ -2383,7 +2660,7 @@ var useTableAndColumnSettings = ({
     },
     [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
   );
-  const showColumnSettingsPanel = (0, import_react22.useCallback)(
+  const showColumnSettingsPanel = (0, import_react23.useCallback)(
     (action) => {
       showContextPanel("ColumnSettings", "Column Settings", {
         column: action.column,
@@ -2402,7 +2679,7 @@ var useTableAndColumnSettings = ({
       tableConfig
     ]
   );
-  const handleAddCalculatedColumn = (0, import_react22.useCallback)(() => {
+  const handleAddCalculatedColumn = (0, import_react23.useCallback)(() => {
     showColumnSettingsPanel({
       column: {
         name: "::",
@@ -2412,7 +2689,7 @@ var useTableAndColumnSettings = ({
       vuuTable: { module: "SIMUL", table: "instruments" }
     });
   }, [showColumnSettingsPanel]);
-  const handleNavigateToColumn = (0, import_react22.useCallback)(
+  const handleNavigateToColumn = (0, import_react23.useCallback)(
     (columnName) => {
       const column = tableConfig.columns.find((c) => c.name === columnName);
       if (column) {
@@ -2426,7 +2703,7 @@ var useTableAndColumnSettings = ({
     },
     [showColumnSettingsPanel, tableConfig.columns]
   );
-  showTableSettingsRef.current = (0, import_react22.useCallback)(() => {
+  showTableSettingsRef.current = (0, import_react23.useCallback)(() => {
     showContextPanel("TableSettings", "DataGrid Settings", {
       availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType }) => ({
         name,
@@ -2457,7 +2734,7 @@ var useTableAndColumnSettings = ({
 var stripInternalProperties = (tableConfig) => {
   return tableConfig;
 };
-var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils19.metadataKeys;
+var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils21.metadataKeys;
 var NULL_DRAG_DROP = {
   draggable: void 0,
   onMouseDown: void 0
@@ -2493,33 +2770,33 @@ var useTable = ({
   selectionModel,
   size
 }) => {
-  const [rowCount, setRowCount] = (0, import_react23.useState)(dataSource.size);
+  const [rowCount, setRowCount] = (0, import_react24.useState)(dataSource.size);
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
-  const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls2.useDragDrop : useNullDragDrop;
-  const menuBuilder = (0, import_react23.useMemo)(
+  const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls4.useDragDrop : useNullDragDrop;
+  const menuBuilder = (0, import_react24.useMemo)(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = (0, import_react23.useCallback)((size2) => {
+  const onDataRowcountChange = (0, import_react24.useCallback)((size2) => {
     setRowCount(size2);
   }, []);
   const {
-    columns: runtimeColumns,
+    columns,
     dispatchColumnAction,
     headings,
     tableAttributes,
     tableConfig
   } = useTableModel(config, dataSource);
-  (0, import_vuu_utils19.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils21.useLayoutEffectSkipFirst)(() => {
     dispatchColumnAction({
       type: "init",
-      dataSource,
-      tableConfig
+      tableConfig: config,
+      dataSource
     });
-  }, [tableConfig, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = (0, import_react23.useCallback)(
+  }, [config, dataSource, dispatchColumnAction]);
+  const applyTableConfigChange = (0, import_react24.useCallback)(
     (config2) => {
       dispatchColumnAction({
         type: "init",
@@ -2530,22 +2807,28 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const [stateColumns, setStateColumns] = (0, import_react23.useState)();
-  const [columns, setColumnSize] = (0, import_react23.useMemo)(() => {
-    const setSize = (columnName, width) => {
-      const cols = (0, import_vuu_utils19.updateColumn)(runtimeColumns, columnName, { width });
-      setStateColumns(cols);
-    };
-    return [stateColumns != null ? stateColumns : runtimeColumns, setSize];
-  }, [runtimeColumns, stateColumns]);
-  const columnMap = (0, import_react23.useMemo)(
-    () => (0, import_vuu_utils19.buildColumnMap)(dataSource.columns),
+  const columnMap = (0, import_react24.useMemo)(
+    () => (0, import_vuu_utils21.buildColumnMap)(dataSource.columns),
     [dataSource.columns]
   );
+  const onSubscribed = (0, import_react24.useCallback)(
+    ({ 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,
@@ -2557,21 +2840,8 @@ var useTable = ({
   });
   const initialRange = useInitialValue({
     from: 0,
-    to: viewportMeasurements.rowCount === 0 ? 0 : viewportMeasurements.rowCount + 1
+    to: viewportMeasurements.rowCount
   });
-  const onSubscribed = (0, import_react23.useCallback)(
-    ({ 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
@@ -2581,7 +2851,17 @@ var useTable = ({
     onSubscribed,
     range: initialRange
   });
-  const handleConfigEditedInSettingsPanel = (0, import_react23.useCallback)(
+  const { requestScroll, ...scrollProps } = useTableScroll({
+    columns,
+    getRowAtPosition,
+    rowHeight,
+    scrollingApiRef,
+    setRange,
+    onVerticalScroll: viewportHookSetScrollTop,
+    onVerticalScrollInSitu: viewportHookSetInSituRowOffset,
+    viewportMeasurements
+  });
+  const handleConfigEditedInSettingsPanel = (0, import_react24.useCallback)(
     (tableConfig2) => {
       dispatchColumnAction({
         type: "init",
@@ -2592,7 +2872,7 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = (0, import_react23.useCallback)(
+  const handleDataSourceConfigChanged = (0, import_react24.useCallback)(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2601,7 +2881,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     dataSource.on("config", (config2, confirmed) => {
       dispatchColumnAction({
         type: "tableConfig",
@@ -2610,14 +2890,14 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchColumnAction]);
-  const handleCreateCalculatedColumn = (0, import_react23.useCallback)(
+  const handleCreateCalculatedColumn = (0, import_react24.useCallback)(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
       applyTableConfigChange(addColumn(tableConfig, column));
     },
     [dataSource, tableConfig, applyTableConfigChange]
   );
-  const hideColumns2 = (0, import_react23.useCallback)(
+  const hideColumns2 = (0, import_react24.useCallback)(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -2631,11 +2911,11 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = (0, import_react23.useCallback)(
+  const pinColumn3 = (0, import_react24.useCallback)(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
-        columns: (0, import_vuu_utils19.updateColumn)(tableConfig.columns, {
+        columns: (0, import_vuu_utils21.updateColumn)(tableConfig.columns, {
           ...action.column,
           pin: action.pin
         })
@@ -2654,7 +2934,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = (0, import_react23.useCallback)(
+  const onPersistentColumnOperation = (0, import_react24.useCallback)(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -2683,10 +2963,10 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = (0, import_react23.useCallback)(
+  const handleSort = (0, import_react24.useCallback)(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
-        dataSource.sort = (0, import_vuu_utils19.applySort)(
+        dataSource.sort = (0, import_vuu_utils21.applySort)(
           dataSource.sort,
           column,
           extendSort,
@@ -2696,23 +2976,25 @@ var useTable = ({
     },
     [dataSource]
   );
-  const onResizeColumn = (0, import_react23.useCallback)(
+  const resizeCells = (0, import_react24.useRef)();
+  const onResizeColumn = (0, import_react24.useCallback)(
     (phase, columnName, width) => {
+      var _a, _b, _c;
       const column = columns.find((column2) => column2.name === columnName);
       if (column) {
         if (phase === "resize") {
-          if ((0, import_vuu_utils19.isValidNumber)(width)) {
-            setColumnSize(columnName, width);
-          }
+          (_a = resizeCells.current) == null ? void 0 : _a.forEach((cell) => {
+            cell.style.width = `${width}px`;
+          });
         } else if (phase === "end") {
-          if ((0, import_vuu_utils19.isValidNumber)(width)) {
+          resizeCells.current = void 0;
+          if ((0, import_vuu_utils21.isValidNumber)(width)) {
             dispatchColumnAction({
               type: "resizeColumn",
               phase,
               column,
               width
             });
-            setStateColumns(void 0);
             onConfigChange == null ? void 0 : onConfigChange(
               stripInternalProperties(
                 updateTableConfig(tableConfig, {
@@ -2724,7 +3006,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,
@@ -2738,12 +3025,12 @@ var useTable = ({
         );
       }
     },
-    [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
+    [columns, dispatchColumnAction, onConfigChange, tableConfig, containerRef]
   );
-  const onToggleGroup = (0, import_react23.useCallback)(
+  const onToggleGroup = (0, import_react24.useCallback)(
     (row, column) => {
       var _a, _b;
-      const isJson = (0, import_vuu_utils19.isJsonGroup)(column, row);
+      const isJson = (0, import_vuu_utils21.isJsonGroup)(column, row, columnMap);
       const key = row[KEY];
       if (row[IS_EXPANDED2]) {
         dataSource.closeTreeNode(key, true);
@@ -2775,22 +3062,8 @@ var useTable = ({
         }
       }
     },
-    [columns, dataSource, dispatchColumnAction]
-  );
-  const handleVerticalScroll = (0, import_react23.useCallback)(
-    (_, pctScrollTop) => {
-      setPctScrollTop(pctScrollTop);
-    },
-    [setPctScrollTop]
+    [columnMap, columns, dataSource, dispatchColumnAction]
   );
-  const { requestScroll, ...scrollProps } = useTableScroll({
-    getRowAtPosition,
-    rowHeight,
-    scrollingApiRef,
-    setRange,
-    onVerticalScroll: handleVerticalScroll,
-    viewportMeasurements
-  });
   const {
     highlightedIndexRef,
     navigate,
@@ -2817,7 +3090,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = (0, import_react23.useCallback)(
+  const handleFocus = (0, import_react24.useCallback)(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -2832,15 +3105,15 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = (0, import_react23.useCallback)(
+  const onMoveGroupColumn = (0, import_react24.useCallback)(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = (0, import_react23.useCallback)(
+  const onRemoveGroupColumn = (0, import_react24.useCallback)(
     (column) => {
-      if ((0, import_vuu_utils19.isGroupColumn)(column)) {
+      if ((0, import_vuu_utils21.isGroupColumn)(column)) {
         dataSource.groupBy = [];
       } else {
         if (dataSource && dataSource.groupBy.includes(column.name)) {
@@ -2852,7 +3125,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = (0, import_react23.useCallback)(
+  const handleSelectionChange = (0, import_react24.useCallback)(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -2868,7 +3141,7 @@ var useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = (0, import_react23.useCallback)(
+  const handleKeyDown = (0, import_react24.useCallback)(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -2880,25 +3153,15 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = (0, import_react23.useCallback)(
+  const handleRowClick = (0, import_react24.useCallback)(
     (row, rangeSelect, keepExistingSelection) => {
       selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
       onRowClickProp == null ? void 0 : onRowClickProp(row);
     },
     [onRowClickProp, selectionHookOnRowClick]
   );
-  (0, import_vuu_utils19.useLayoutEffectSkipFirst)(() => {
-    dispatchColumnAction({
-      type: "init",
-      tableConfig: config,
-      dataSource
-    });
-  }, [config, dataSource, dispatchColumnAction]);
-  const onMoveColumn = (0, import_react23.useCallback)(
+  const onMoveColumn = (0, import_react24.useCallback)(
     (columns2) => {
-      console.log(`useTable onMoveColumn`, {
-        columns: columns2
-      });
       const newTableConfig = {
         ...tableConfig,
         columns: columns2
@@ -2912,20 +3175,20 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = (0, import_react23.useCallback)(
+  const handleDropRow = (0, import_react24.useCallback)(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = (0, import_react23.useCallback)(
+  const handleDataEdited = (0, import_react24.useCallback)(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = (0, import_react23.useCallback)(
+  const handleDragStartRow = (0, import_react24.useCallback)(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
-      const rowIndex = (0, import_vuu_utils19.getIndexFromRowElement)(initialDragElement);
+      const rowIndex = (0, import_vuu_utils21.getIndexFromRowElement)(initialDragElement);
       const row = dataRef.current.find((row2) => row2[0] === rowIndex);
       if (row) {
         dragDropState.setPayload(row);
@@ -2979,133 +3242,6 @@ var useTable = ({
   };
 };
 
-// src/table-header/TableHeader.tsx
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
-var import_clsx8 = __toESM(require("clsx"));
-
-// src/table-header/useTableHeader.ts
-var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
-var import_react24 = require("react");
-var useTableHeader = ({
-  columns,
-  onMoveColumn,
-  onSortColumn,
-  tableConfig
-}) => {
-  const containerRef = (0, import_react24.useRef)(null);
-  const handleDropColumnHeader = (0, import_react24.useCallback)(
-    (moveFrom, moveTo) => {
-      const column = columns[moveFrom];
-      const orderedColumns = (0, import_vuu_utils20.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((0, import_vuu_utils20.moveColumnTo)(tableConfig.columns, column, insertPos - 1));
-      } else {
-        onMoveColumn((0, import_vuu_utils20.moveColumnTo)(tableConfig.columns, column, insertPos));
-      }
-    },
-    [columns, onMoveColumn, tableConfig.columns]
-  );
-  const handleColumnHeaderClick = (0, import_react24.useCallback)(
-    (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 = (0, import_vuu_utils20.visibleColumnAtIndex)(columns, colIdx);
-      const isAdditive = evt.shiftKey;
-      column && onSortColumn(column, isAdditive);
-    },
-    [columns, onSortColumn]
-  );
-  const {
-    onMouseDown: columnHeaderDragMouseDown,
-    draggable: draggableColumn,
-    ...dragDropHook
-  } = (0, import_vuu_ui_controls3.useDragDrop)({
-    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
-var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase10}-col-headings`, ref: containerRef, children: [
-    headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase10}-col-headers`, role: "row", children: [
-      columns.filter(import_vuu_utils21.isNotHidden).map(
-        (col, i) => (0, import_vuu_utils21.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          GroupHeaderCellNext,
-          {
-            column: col,
-            "data-index": i,
-            onMoveColumn: onMoveGroupColumn,
-            onRemoveColumn: onRemoveGroupColumn,
-            onResize: onResizeColumn
-          },
-          col.name
-        ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          HeaderCell,
-          {
-            className: (0, import_clsx8.default)({
-              "vuuDraggable-dragAway": i === draggedColumnIndex
-            }),
-            column: col,
-            "data-index": i,
-            id: `${tableId}-col-${i}`,
-            onClick,
-            onMouseDown,
-            onResize: onResizeColumn
-          },
-          col.name
-        )
-      ),
-      draggableColumn
-    ] })
-  ] });
-};
-
 // src/Table.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var classBase7 = "vuuTable";
@@ -3191,9 +3327,7 @@ var TableCore = ({
   const contentContainerClassName = (0, import_clsx9.default)(`${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`,
@@ -3239,7 +3373,7 @@ var TableCore = ({
                   showColumnHeaders ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     TableHeader,
                     {
-                      columns,
+                      columns: scrollProps.columnsWithinViewport,
                       headings,
                       onMoveColumn,
                       onMoveGroupColumn,
@@ -3247,7 +3381,8 @@ var TableCore = ({
                       onResizeColumn,
                       onSortColumn,
                       tableConfig,
-                      tableId: id
+                      tableId: id,
+                      virtualColSpan: scrollProps.virtualColSpan
                     }
                   ) : null,
                   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase7}-body`, children: data.map((data2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -3255,13 +3390,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]
@@ -3316,7 +3452,7 @@ var Table = (0, import_react25.forwardRef)(function TableNext({
     throw Error("vuu Table requires dataSource prop");
   }
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_vuu_layout3.MeasuredContainer,
+    import_vuu_ui_controls5.MeasuredContainer,
     {
       ...htmlAttributes,
       className: (0, import_clsx9.default)(classBase7, classNameProp),
@@ -3360,17 +3496,12 @@ var Table = (0, import_react25.forwardRef)(function TableNext({
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
 var import_react26 = require("react");
-var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
 var import_core3 = require("@salt-ds/core");
-
-// src/cell-renderers/cell-utils.ts
-var dataAndColumnUnchanged = (p, p1) => p.column === p1.column && p.column.valueFormatter(p.row[p.columnMap[p.column.name]]) === p1.column.valueFormatter(p1.row[p1.columnMap[p1.column.name]]);
-
-// src/cell-renderers/checkbox-cell/CheckboxCell.tsx
 var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var CheckboxCell = (0, import_react26.memo)(
-  ({ column, columnMap, onCommit = import_vuu_ui_controls4.WarnCommit, row }) => {
+  ({ column, columnMap, onCommit = import_vuu_ui_controls6.WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
     const isChecked = row[dataIdx];
     const handleCommit = (0, import_react26.useCallback)(
@@ -3383,9 +3514,9 @@ var CheckboxCell = (0, import_react26.memo)(
       },
       [onCommit]
     );
-    return column.editable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core3.Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_ui_controls4.CheckboxIcon, { checked: isChecked, disabled: true });
+    return column.editable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core3.Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_ui_controls6.CheckboxIcon, { checked: isChecked, disabled: true });
   },
-  dataAndColumnUnchanged
+  import_vuu_utils23.dataAndColumnUnchanged
 );
 CheckboxCell.displayName = "CheckboxCell";
 (0, import_vuu_utils23.registerComponent)("checkbox-cell", CheckboxCell, "cell-renderer", {
@@ -3395,7 +3526,7 @@ CheckboxCell.displayName = "CheckboxCell";
 // src/cell-renderers/input-cell/InputCell.tsx
 var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
 var import_core4 = require("@salt-ds/core");
-var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
 var import_clsx10 = __toESM(require("clsx"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var classBase8 = "vuuTableInputCell";
@@ -3413,7 +3544,7 @@ var InputCell = ({
 }) => {
   const dataIdx = columnMap[column.name];
   const { align = "left", clientSideEditValidationCheck } = column;
-  const { warningMessage, ...editProps } = (0, import_vuu_ui_controls5.useEditableText)({
+  const { warningMessage, ...editProps } = (0, import_vuu_ui_controls7.useEditableText)({
     initialValue: row[dataIdx],
     onCommit,
     clientSideEditValidationCheck
@@ -3435,11 +3566,11 @@ var InputCell = ({
 (0, import_vuu_utils24.registerComponent)("input-cell", InputCell, "cell-renderer", {});
 
 // src/cell-renderers/toggle-cell/ToggleCell.tsx
-var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
 var import_clsx11 = __toESM(require("clsx"));
 var import_react27 = require("react");
-var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var classBase9 = "vuuTableToggleCell";
 var getValueList = ({ name, type }) => {
@@ -3455,7 +3586,7 @@ var ToggleCell = (0, import_react27.memo)(
   function ToggleCell2({
     column,
     columnMap,
-    onCommit = import_vuu_ui_controls6.WarnCommit,
+    onCommit = import_vuu_ui_controls8.WarnCommit,
     row
   }) {
     const values = getValueList(column);
@@ -3473,7 +3604,7 @@ var ToggleCell = (0, import_react27.memo)(
       [onCommit]
     );
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_vuu_ui_controls7.CycleStateButton,
+      import_vuu_ui_controls9.CycleStateButton,
       {
         className: (0, import_clsx11.default)(classBase9, `${classBase9}-${column.name}`),
         onCommit: handleCommit,
@@ -3484,17 +3615,17 @@ var ToggleCell = (0, import_react27.memo)(
       }
     );
   },
-  dataAndColumnUnchanged
+  import_vuu_utils25.dataAndColumnUnchanged
 );
 (0, import_vuu_utils25.registerComponent)("toggle-cell", ToggleCell, "cell-renderer", {});
 
 // src/useControlledTableNavigation.ts
-var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
 var import_react28 = require("react");
 var useControlledTableNavigation = (initialValue, rowCount) => {
   const tableRef = (0, import_react28.useRef)(null);
-  const [highlightedIndexRef, setHighlightedIndex] = (0, import_vuu_ui_controls8.useStateRef)(initialValue);
+  const [highlightedIndexRef, setHighlightedIndex] = (0, import_vuu_ui_controls10.useStateRef)(initialValue);
   const handleKeyDown = (0, import_react28.useCallback)(
     (e) => {
       var _a;