@vuu-ui/vuu-table 0.8.20-debug → 0.8.21-debug

package/cjs/index.js

@@ -39,11 +39,14 @@ __export(src_exports, {
   TableGroupCell: () => TableGroupCell,
   ToggleCell: () => ToggleCell,
   dataAndColumnUnchanged: () => dataAndColumnUnchanged,
+  howFarIsRowOutsideViewport: () => howFarIsRowOutsideViewport,
   isShowColumnSettings: () => isShowColumnSettings,
   isShowTableSettings: () => isShowTableSettings,
+  noScrolling: () => noScrolling,
   updateTableConfig: () => updateTableConfig,
   useControlledTableNavigation: () => useControlledTableNavigation,
   useTableModel: () => useTableModel,
+  useTableScroll: () => useTableScroll,
   useTableViewport: () => useTableViewport
 });
 module.exports = __toCommonJS(src_exports);
@@ -451,10 +454,10 @@ 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_utils20 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
 var import_clsx9 = __toESM(require("clsx"));
-var import_react26 = require("react");
+var import_react25 = require("react");
 
 // src/Row.tsx
 var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
@@ -608,7 +611,6 @@ var Row = (0, import_react11.memo)(
       "div",
       {
         ...htmlAttributes,
-        "aria-rowindex": row[0] + 1,
         key: `row-${row[0]}`,
         role: "row",
         className,
@@ -640,8 +642,8 @@ Row.displayName = "Row";
 
 // src/useTable.ts
 var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
-var import_react24 = require("react");
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var import_react23 = require("react");
 
 // src/context-menu/buildContextMenuDescriptors.ts
 var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
@@ -960,7 +962,7 @@ var import_react13 = require("react");
 
 // src/table-dom-utils.ts
 var headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;
-var dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx}'] > [role='cell']:nth-child(${colIdx + 1})`;
+var dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [role='cell']:nth-child(${colIdx + 1})`;
 var getTableCell = (containerRef, [rowIdx, colIdx]) => {
   var _a;
   const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
@@ -1228,6 +1230,7 @@ var useInitialValue = (value) => {
 };
 
 // src/useKeyboardNavigation.ts
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
 var import_core = require("@salt-ds/core");
 var import_react16 = require("react");
 var rowNavigationKeys = /* @__PURE__ */ new Set([
@@ -1254,51 +1257,6 @@ var isNavigationKey = (key, navigationStyle) => {
 var PageKeys = ["Home", "End", "PageUp", "PageDown"];
 var isPagingKey = (key) => PageKeys.includes(key);
 var NULL_CELL_POS = [-1, -1];
-var NO_SCROLL_NECESSARY = [void 0, void 0];
-var howFarIsRowOutsideViewport = (rowEl, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
-  if (contentContainer) {
-    const viewport = contentContainer == null ? void 0 : contentContainer.getBoundingClientRect();
-    const row = rowEl.getBoundingClientRect();
-    if (row) {
-      if (row.bottom > viewport.bottom) {
-        return ["down", row.bottom - viewport.bottom];
-      } else if (row.top < viewport.top) {
-        return ["up", row.top - viewport.top];
-      } 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 howFarIsCellOutsideViewport = (cellEl) => {
-  var _a;
-  const contentContainer = cellEl.closest(".vuuTable-contentContainer");
-  if (contentContainer) {
-    const rowEl = cellEl.closest(".vuuTableRow");
-    if (rowEl) {
-      const result = howFarIsRowOutsideViewport(rowEl, contentContainer);
-      if (result !== NO_SCROLL_NECESSARY) {
-        return result;
-      }
-      const viewport = contentContainer == null ? void 0 : contentContainer.getBoundingClientRect();
-      const cell = (_a = cellEl.closest(".vuuTableCell")) == null ? void 0 : _a.getBoundingClientRect();
-      if (cell) {
-        if (cell.right > viewport.right) {
-          return ["right", cell.right + 6 - viewport.right];
-        } else if (cell.left < viewport.left) {
-          return ["left", cell.left - viewport.left];
-        }
-      } else {
-        throw Error("Whats going on, cell not found");
-      }
-    }
-  }
-  return NO_SCROLL_NECESSARY;
-};
 function nextCellPos(key, [rowIdx, colIdx], columnCount, rowCount) {
   if (key === "ArrowUp") {
     if (rowIdx > -1) {
@@ -1366,14 +1324,14 @@ var useKeyboardNavigation = ({
     "[role='columnHeader'],[role='cell']"
   );
   const getTableCellPos = (tableCell) => {
-    var _a2, _b;
+    var _a2;
     if (tableCell.role === "columnHeader") {
       const colIdx = parseInt((_a2 = tableCell.dataset.idx) != null ? _a2 : "-1", 10);
       return [-1, colIdx];
     } else {
       const focusedRow = tableCell.closest("[role='row']");
       if (focusedRow) {
-        const rowIdx = parseInt((_b = focusedRow.ariaRowIndex) != null ? _b : "-1", 10);
+        const rowIdx = (0, import_vuu_utils12.getIndexFromRowElement)(focusedRow);
         const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
         return [rowIdx, colIdx];
       }
@@ -1391,11 +1349,8 @@ var useKeyboardNavigation = ({
             focusableCell.current = activeCell;
             activeCell.setAttribute("tabindex", "0");
           }
-          const [direction, distance] = howFarIsCellOutsideViewport(activeCell);
-          if (direction && distance) {
-            requestScroll == null ? void 0 : requestScroll({ type: "scroll-distance", distance, direction });
-          }
-          console.log(`activeCell focus`);
+          console.log(`scroll row ${cellPos[0]}`);
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex: cellPos[0] });
           activeCell.focus({ preventScroll: true });
         }
       }
@@ -1477,18 +1432,9 @@ var useKeyboardNavigation = ({
   );
   const scrollRowIntoViewIfNecessary = (0, import_react16.useCallback)(
     (rowIndex) => {
-      const { current: container } = containerRef;
-      const activeRow = container == null ? void 0 : container.querySelector(
-        `[aria-rowindex="${rowIndex}"]`
-      );
-      if (activeRow) {
-        const [direction, distance] = howFarIsRowOutsideViewport(activeRow);
-        if (direction && distance) {
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-distance", distance, direction });
-        }
-      }
+      requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex });
     },
-    [containerRef, requestScroll]
+    [requestScroll]
   );
   const moveHighlightedRow = (0, import_react16.useCallback)(
     async (key) => {
@@ -1576,9 +1522,9 @@ var useKeyboardNavigation = ({
 };
 
 // src/useSelection.ts
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
 var import_react17 = require("react");
-var { IDX: IDX2 } = import_vuu_utils12.metadataKeys;
+var { IDX: IDX2 } = import_vuu_utils13.metadataKeys;
 var NO_SELECTION = [];
 var defaultSelectionKeys = ["Enter", " "];
 var useSelection = ({
@@ -1600,7 +1546,7 @@ var useSelection = ({
       const { [IDX2]: idx } = row;
       const { current: active } = lastActiveRef;
       const { current: selected } = selectedRef;
-      const selectOperation = (0, import_vuu_utils12.isRowSelected)(row) ? import_vuu_utils12.deselectItem : import_vuu_utils12.selectItem;
+      const selectOperation = (0, import_vuu_utils13.isRowSelected)(row) ? import_vuu_utils13.deselectItem : import_vuu_utils13.selectItem;
       const newSelected = selectOperation(
         selectionModel,
         selected,
@@ -1625,7 +1571,7 @@ var useSelection = ({
             `[aria-rowindex="${rowIndex}"]`
           );
           if (rowEl) {
-            (0, import_vuu_utils12.dispatchMouseEvent)(rowEl, "click");
+            (0, import_vuu_utils13.dispatchMouseEvent)(rowEl, "click");
           }
         }
       }
@@ -1640,7 +1586,7 @@ var useSelection = ({
 
 // src/useTableContextMenu.ts
 var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
 var import_react18 = require("react");
 var NO_ROWS = [];
 var useTableContextMenu = ({
@@ -1657,8 +1603,8 @@ var useTableContextMenu = ({
       const rowEl = target == null ? void 0 : target.closest("div[role='row']");
       if (cellEl && rowEl) {
         const { selectedRowsCount } = dataSource;
-        const columnMap = (0, import_vuu_utils13.buildColumnMap)(columns);
-        const rowIndex = (0, import_vuu_utils13.getIndexFromRowElement)(rowEl);
+        const columnMap = (0, import_vuu_utils14.buildColumnMap)(columns);
+        const rowIndex = (0, import_vuu_utils14.getIndexFromRowElement)(rowEl);
         const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
         const row = data.find(([idx]) => idx === rowIndex);
         const columnName = columns[cellIndex];
@@ -1677,12 +1623,12 @@ var useTableContextMenu = ({
 };
 
 // src/useTableModel.ts
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+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_utils14.logger)("useTableModel");
+var { info } = (0, import_vuu_utils15.logger)("useTableModel");
 var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = import_vuu_utils14.metadataKeys.count;
+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(
@@ -1738,13 +1684,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_utils14.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
+  const runtimeColumns = columns.filter((0, import_vuu_utils15.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
     columnDescriptorToRuntimeColumDescriptor(tableAttributes, tableSchema)
   );
-  const maybePinnedColumns = runtimeColumns.some(import_vuu_utils14.isPinned) ? (0, import_vuu_utils14.sortPinnedColumns)(runtimeColumns) : runtimeColumns;
+  const maybePinnedColumns = runtimeColumns.some(import_vuu_utils15.isPinned) ? (0, import_vuu_utils15.sortPinnedColumns)(runtimeColumns) : runtimeColumns;
   let state = {
     columns: maybePinnedColumns,
-    headings: (0, import_vuu_utils14.getTableHeadings)(maybePinnedColumns),
+    headings: (0, import_vuu_utils15.getTableHeadings)(maybePinnedColumns),
     tableConfig,
     ...tableAttributes
   };
@@ -1772,26 +1718,26 @@ var columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema) =>
     align = getDefaultAlignment(serverDataType),
     key,
     name,
-    label = (0, import_vuu_utils14.getColumnLabel)(column),
+    label = (0, import_vuu_utils15.getColumnLabel)(column),
     width = columnDefaultWidth,
     ...rest
   } = column;
   const runtimeColumnWithDefaults = {
     ...rest,
     align,
-    CellRenderer: (0, import_vuu_utils14.getCellRenderer)(column),
-    HeaderCellContentRenderer: (0, import_vuu_utils14.getColumnHeaderContentRenderer)(column),
-    HeaderCellLabelRenderer: (0, import_vuu_utils14.getColumnHeaderLabelRenderer)(column),
-    clientSideEditValidationCheck: (0, import_vuu_utils14.hasValidationRules)(column.type) ? (0, import_vuu_ui_controls.buildValidationChecker)(column.type.renderer.rules) : void 0,
+    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,
     label: getLabel(label, columnFormatHeader),
     key: key != null ? key : index + KEY_OFFSET,
     name,
     originalIdx: index,
     serverDataType,
-    valueFormatter: (0, import_vuu_utils14.getValueFormatter)(column, serverDataType),
+    valueFormatter: (0, import_vuu_utils15.getValueFormatter)(column, serverDataType),
     width
   };
-  if ((0, import_vuu_utils14.isGroupColumn)(runtimeColumnWithDefaults)) {
+  if ((0, import_vuu_utils15.isGroupColumn)(runtimeColumnWithDefaults)) {
     runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(
       (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(
         col,
@@ -1888,8 +1834,8 @@ function pinColumn2(state, action) {
   const { column, pin } = action;
   const targetColumn = columns.find((col) => col.name === column.name);
   if (targetColumn) {
-    columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, pin });
-    columns = (0, import_vuu_utils14.sortPinnedColumns)(columns);
+    columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, pin });
+    columns = (0, import_vuu_utils15.sortPinnedColumns)(columns);
     return {
       ...state,
       columns
@@ -1904,26 +1850,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_utils14.replaceColumn)(columns, { ...targetColumn, align });
+      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, align });
     }
     if (typeof label === "string") {
-      columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, label });
+      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, label });
     }
     if (typeof resizing === "boolean") {
-      columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, resizing });
+      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, resizing });
     }
     if (typeof hidden === "boolean") {
-      columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, hidden });
+      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, hidden });
     }
     if (typeof width === "number") {
-      columns = (0, import_vuu_utils14.replaceColumn)(columns, { ...targetColumn, width });
+      columns = (0, import_vuu_utils15.replaceColumn)(columns, { ...targetColumn, width });
       const targetConfigColumn = tableConfig.columns.find(
         (col) => col.name === column.name
       );
       if (targetConfigColumn) {
         tableConfig = {
           ...tableConfig,
-          columns: (0, import_vuu_utils14.replaceColumn)(tableConfig.columns, {
+          columns: (0, import_vuu_utils15.replaceColumn)(tableConfig.columns, {
             ...targetConfigColumn,
             width
           })
@@ -1945,30 +1891,31 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
   if (hasGroupBy) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils14.applyGroupByToColumns)(result.columns, groupBy, confirmed)
+      columns: (0, import_vuu_utils15.applyGroupByToColumns)(result.columns, groupBy, confirmed)
     };
   }
   if (hasSort) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils14.applySortToColumns)(result.columns, sort)
+      columns: (0, import_vuu_utils15.applySortToColumns)(result.columns, sort)
     };
   }
   if (hasFilter) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils14.applyFilterToColumns)(result.columns, filter)
+      columns: (0, import_vuu_utils15.applyFilterToColumns)(result.columns, filter)
     };
-  } else if (result.columns.some(import_vuu_utils14.isFilteredColumn)) {
+  } else if (result.columns.some(import_vuu_utils15.isFilteredColumn)) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils14.stripFilterFromColumns)(result.columns)
+      columns: (0, import_vuu_utils15.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;
@@ -1977,6 +1924,31 @@ var getPctScroll = (container) => {
   const pctScrollTop = scrollTop / (scrollHeight - clientHeight);
   return [pctScrollLeft, pctScrollTop];
 };
+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
@@ -1998,17 +1970,37 @@ var useCallbackRef = ({
   return callbackRef;
 };
 var useTableScroll = ({
-  maxScrollLeft,
-  maxScrollTop,
+  getRowAtPosition,
   onHorizontalScroll,
   onVerticalScroll,
-  rowHeight,
-  viewportRowCount
+  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 {
+    appliedPageSize,
+    isVirtualScroll,
+    maxScrollContainerScrollHorizontal: maxScrollLeft,
+    maxScrollContainerScrollVertical: maxScrollTop,
+    rowCount: viewportRowCount,
+    totalHeaderHeight
+  } = viewportMeasurements;
+  const handleVerticalScroll = (0, import_react20.useCallback)(
+    (scrollTop, pctScrollTop) => {
+      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 });
+      }
+    },
+    [getRowAtPosition, onVerticalScroll, setRange, viewportRowCount]
+  );
   const handleScrollbarContainerScroll = (0, import_react20.useCallback)(() => {
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
@@ -2018,7 +2010,7 @@ var useTableScroll = ({
     } else if (contentContainer && scrollbarContainer) {
       const [pctScrollLeft, pctScrollTop] = getPctScroll(scrollbarContainer);
       const rootScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
-      const rootScrollTop = Math.round(pctScrollTop * maxScrollTop);
+      const rootScrollTop = pctScrollTop * maxScrollTop;
       contentContainer.scrollTo({
         left: rootScrollLeft,
         top: rootScrollTop,
@@ -2035,17 +2027,17 @@ var useTableScroll = ({
       const [pctScrollLeft, pctScrollTop] = getPctScroll(contentContainer);
       contentContainerScrolledRef.current = true;
       scrollbarContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
-      scrollbarContainer.scrollTop = Math.round(pctScrollTop * maxScrollTop);
+      scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;
       if (scrollPos.scrollTop !== scrollTop) {
         scrollPos.scrollTop = scrollTop;
-        onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
+        handleVerticalScroll(scrollTop, pctScrollTop);
       }
       if (scrollPos.scrollLeft !== scrollLeft) {
         scrollPos.scrollLeft = scrollLeft;
         onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
       }
     }
-  }, [maxScrollLeft, maxScrollTop, onHorizontalScroll, onVerticalScroll]);
+  }, [handleVerticalScroll, maxScrollLeft, maxScrollTop, onHorizontalScroll]);
   const handleAttachScrollbarContainer = (0, import_react20.useCallback)(
     (el) => {
       scrollbarContainerRef.current = el;
@@ -2092,37 +2084,60 @@ var useTableScroll = ({
       if (scrollbarContainer) {
         const { scrollLeft, scrollTop } = scrollbarContainer;
         contentContainerScrolledRef.current = false;
-        if (scrollRequest.type === "scroll-distance") {
-          let newScrollLeft = scrollLeft;
-          let newScrollTop = scrollTop;
-          if (scrollRequest.direction === "up" || scrollRequest.direction === "down") {
-            newScrollTop = Math.min(
-              Math.max(0, scrollTop + scrollRequest.distance),
-              maxScrollTop
-            );
-          } else {
-            newScrollLeft = Math.min(
-              Math.max(0, scrollLeft + scrollRequest.distance),
-              maxScrollLeft
+        if (scrollRequest.type === "scroll-row") {
+          const activeRow = (0, import_vuu_utils16.getRowElementAtIndex)(
+            scrollbarContainer,
+            scrollRequest.rowIndex
+          );
+          if (activeRow !== null) {
+            const [direction, distance] = howFarIsRowOutsideViewport(
+              activeRow,
+              totalHeaderHeight
             );
+            if (direction && distance) {
+              if (isVirtualScroll) {
+                console.log(
+                  `virtual scroll row required ${direction} ${distance} 
+                  first Row ${firstRowRef.current}`
+                );
+              } else {
+                let newScrollLeft = scrollLeft;
+                let newScrollTop = scrollTop;
+                if (direction === "up" || direction === "down") {
+                  newScrollTop = Math.min(
+                    Math.max(0, scrollTop + distance),
+                    maxScrollTop
+                  );
+                } else {
+                  newScrollLeft = Math.min(
+                    Math.max(0, scrollLeft + distance),
+                    maxScrollLeft
+                  );
+                }
+                scrollbarContainer.scrollTo({
+                  top: newScrollTop,
+                  left: newScrollLeft,
+                  behavior: "smooth"
+                });
+              }
+            }
           }
-          scrollbarContainer.scrollTo({
-            top: newScrollTop,
-            left: newScrollLeft,
-            behavior: "smooth"
-          });
         } else if (scrollRequest.type === "scroll-page") {
           const { direction } = scrollRequest;
-          const scrollBy = viewportRowCount * (direction === "down" ? rowHeight : -rowHeight);
-          const newScrollTop = Math.min(
-            Math.max(0, scrollTop + scrollBy),
-            maxScrollTop
-          );
-          scrollbarContainer.scrollTo({
-            top: newScrollTop,
-            left: scrollLeft,
-            behavior: "auto"
-          });
+          if (isVirtualScroll) {
+            console.log(`need a virtual page scroll`);
+          } else {
+            const scrollBy = direction === "down" ? appliedPageSize : -appliedPageSize;
+            const newScrollTop = Math.min(
+              Math.max(0, scrollTop + scrollBy),
+              maxScrollTop
+            );
+            scrollbarContainer.scrollTo({
+              top: newScrollTop,
+              left: scrollLeft,
+              behavior: "auto"
+            });
+          }
         } else if (scrollRequest.type === "scroll-end") {
           const { direction } = scrollRequest;
           const scrollTo = direction === "end" ? maxScrollTop : 0;
@@ -2134,8 +2149,46 @@ var useTableScroll = ({
         }
       }
     },
-    [maxScrollLeft, maxScrollTop, rowHeight, viewportRowCount]
+    [
+      appliedPageSize,
+      isVirtualScroll,
+      maxScrollLeft,
+      maxScrollTop,
+      setRange,
+      totalHeaderHeight,
+      viewportRowCount
+    ]
   );
+  const scrollHandles = (0, import_react20.useMemo)(
+    () => ({
+      scrollToIndex: (rowIndex) => {
+        if (scrollbarContainerRef.current) {
+          const scrollPos = (rowIndex - 30) * 20;
+          scrollbarContainerRef.current.scrollTop = scrollPos;
+        }
+      },
+      scrollToKey: (rowKey) => {
+        console.log(`scrollToKey ${rowKey}`);
+      }
+    }),
+    []
+  );
+  (0, import_react20.useImperativeHandle)(
+    scrollingApiRef,
+    () => {
+      if (scrollbarContainerRef.current) {
+        return scrollHandles;
+      } else {
+        return noScrolling;
+      }
+    },
+    [scrollHandles]
+  );
+  (0, import_react20.useEffect)(() => {
+    const { current: from } = firstRowRef;
+    const rowRange = { from, to: from + viewportRowCount + 1 };
+    setRange(rowRange);
+  }, [setRange, viewportRowCount]);
   return {
     /** Ref to be assigned to ScrollbarContainer */
     scrollbarContainerRef: scrollbarContainerCallbackRef,
@@ -2148,14 +2201,16 @@ var useTableScroll = ({
 
 // src/useTableViewport.ts
 var import_react21 = require("react");
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
-var MAX_RAW_ROWS = 15e5;
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var MAX_RAW_ROWS = 1e5;
 var UNMEASURED_VIEWPORT = {
+  appliedPageSize: 0,
   contentHeight: 0,
   contentWidth: 0,
   getRowAtPosition: () => -1,
   getRowOffset: () => -1,
   horizontalScrollbarHeight: 0,
+  isVirtualScroll: false,
   maxScrollContainerScrollHorizontal: 0,
   maxScrollContainerScrollVertical: 0,
   pinnedWidthLeft: 0,
@@ -2196,57 +2251,58 @@ var useTableViewport = ({
   size
 }) => {
   const pctScrollTopRef = (0, import_react21.useRef)(0);
-  const appliedRowCount = Math.min(rowCount, MAX_RAW_ROWS);
-  const appliedContentHeight = appliedRowCount * rowHeight;
+  const pixelContentHeight = rowHeight * Math.min(rowCount, MAX_RAW_ROWS);
   const virtualContentHeight = rowCount * rowHeight;
-  const virtualisedExtent = virtualContentHeight - appliedContentHeight;
+  const virtualisedExtent = virtualContentHeight - pixelContentHeight;
   const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react21.useMemo)(
     () => measurePinnedColumns(columns),
     [columns]
   );
-  const [actualRowOffset, actualRowAtPosition] = (0, import_react21.useMemo)(
-    () => (0, import_vuu_utils15.actualRowPositioning)(rowHeight),
-    [rowHeight]
-  );
-  const [getRowOffset, getRowAtPosition] = (0, import_react21.useMemo)(() => {
+  const totalHeaderHeightRef = (0, import_react21.useRef)(headerHeight);
+  (0, import_react21.useMemo)(() => {
+    totalHeaderHeightRef.current = headerHeight * (1 + headings.length);
+  }, [headerHeight, headings.length]);
+  const [getRowOffset, getRowAtPosition, isVirtualScroll] = (0, import_react21.useMemo)(() => {
     if (virtualisedExtent) {
-      return (0, import_vuu_utils15.virtualRowPositioning)(
+      return (0, import_vuu_utils17.virtualRowPositioning)(
         rowHeight,
         virtualisedExtent,
         pctScrollTopRef
       );
     } else {
-      return [actualRowOffset, actualRowAtPosition];
+      return (0, import_vuu_utils17.actualRowPositioning)(rowHeight);
     }
-  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
+  }, [virtualisedExtent, rowHeight]);
   const setPctScrollTop = (0, import_react21.useCallback)((scrollPct) => {
     pctScrollTopRef.current = scrollPct;
   }, []);
   return (0, import_react21.useMemo)(() => {
     var _a;
     if (size) {
-      const headingsDepth = headings.length;
+      const { current: totalHeaderHeight } = totalHeaderHeightRef;
       const scrollbarSize = 15;
       const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
       const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
-      const totalHeaderHeight = headerHeight * (1 + headingsDepth);
-      const maxScrollContainerScrollVertical = appliedContentHeight - (((_a = size == null ? void 0 : size.height) != null ? _a : 0) - horizontalScrollbarHeight) + totalHeaderHeight;
+      const 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 + 1 : Math.ceil(visibleRows);
+      const count = Number.isInteger(visibleRows) ? visibleRows : Math.ceil(visibleRows);
       const viewportBodyHeight = size.height - totalHeaderHeight;
-      const verticalScrollbarWidth = appliedContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+      const verticalScrollbarWidth = pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+      const appliedPageSize = count * rowHeight * (pixelContentHeight / virtualContentHeight);
       return {
-        contentHeight: appliedContentHeight,
+        appliedPageSize,
+        contentHeight: pixelContentHeight,
+        contentWidth,
         getRowAtPosition,
         getRowOffset,
+        isVirtualScroll,
         horizontalScrollbarHeight,
         maxScrollContainerScrollHorizontal,
         maxScrollContainerScrollVertical,
         pinnedWidthLeft,
         pinnedWidthRight,
         rowCount: count,
-        contentWidth,
         setPctScrollTop,
         totalHeaderHeight,
         verticalScrollbarWidth,
@@ -2256,53 +2312,25 @@ var useTableViewport = ({
       return UNMEASURED_VIEWPORT;
     }
   }, [
-    size,
-    headings.length,
+    getRowAtPosition,
+    getRowOffset,
+    headerHeight,
+    isVirtualScroll,
     pinnedWidthLeft,
     unpinnedWidth,
     pinnedWidthRight,
-    appliedContentHeight,
-    headerHeight,
+    pixelContentHeight,
     rowHeight,
-    getRowAtPosition,
-    getRowOffset,
-    setPctScrollTop
+    setPctScrollTop,
+    size,
+    virtualContentHeight
   ]);
 };
 
-// src/useVirtualViewport.ts
-var import_react22 = require("react");
-var useVirtualViewport = ({
-  getRowAtPosition,
-  setRange,
-  viewportMeasurements
-}) => {
-  const firstRowRef = (0, import_react22.useRef)(0);
-  const { rowCount: viewportRowCount } = viewportMeasurements;
-  const handleVerticalScroll = (0, import_react22.useCallback)(
-    (scrollTop) => {
-      const firstRow = getRowAtPosition(scrollTop);
-      if (firstRow !== firstRowRef.current) {
-        firstRowRef.current = firstRow;
-        setRange({ from: firstRow, to: firstRow + viewportRowCount });
-      }
-    },
-    [getRowAtPosition, setRange, viewportRowCount]
-  );
-  (0, import_react22.useEffect)(() => {
-    const { current: from } = firstRowRef;
-    const rowRange = { from, to: from + viewportRowCount };
-    setRange(rowRange);
-  }, [setRange, viewportRowCount]);
-  return {
-    onVerticalScroll: handleVerticalScroll
-  };
-};
-
 // src/useTableAndColumnSettings.ts
 var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
-var import_react23 = require("react");
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_react22 = require("react");
 var useTableAndColumnSettings = ({
   availableColumns: availableColumnsProps,
   onAvailableColumnsChange,
@@ -2312,11 +2340,11 @@ var useTableAndColumnSettings = ({
   tableConfig
 }) => {
   const dispatchLayoutAction = (0, import_vuu_layout2.useLayoutProviderDispatch)();
-  const showTableSettingsRef = (0, import_react23.useRef)();
-  const [availableColumns, setAvailableColumns] = (0, import_react23.useState)(
+  const showTableSettingsRef = (0, import_react22.useRef)();
+  const [availableColumns, setAvailableColumns] = (0, import_react22.useState)(
     availableColumnsProps
   );
-  const showContextPanel = (0, import_react23.useCallback)(
+  const showContextPanel = (0, import_react22.useCallback)(
     (componentType, title, props) => {
       dispatchLayoutAction({
         type: "set-props",
@@ -2333,17 +2361,17 @@ var useTableAndColumnSettings = ({
     },
     [dispatchLayoutAction]
   );
-  const handleCancelCreateColumn = (0, import_react23.useCallback)(() => {
+  const handleCancelCreateColumn = (0, import_react22.useCallback)(() => {
     requestAnimationFrame(() => {
       var _a;
       (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
     });
   }, []);
-  const handleCreateCalculatedColumn = (0, import_react23.useCallback)(
+  const handleCreateCalculatedColumn = (0, import_react22.useCallback)(
     (column) => {
       const newAvailableColumns = availableColumns.concat({
         name: column.name,
-        serverDataType: (0, import_vuu_utils16.getCalculatedColumnType)(column)
+        serverDataType: (0, import_vuu_utils18.getCalculatedColumnType)(column)
       });
       setAvailableColumns(newAvailableColumns);
       onAvailableColumnsChange == null ? void 0 : onAvailableColumnsChange(newAvailableColumns);
@@ -2355,7 +2383,7 @@ var useTableAndColumnSettings = ({
     },
     [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
   );
-  const showColumnSettingsPanel = (0, import_react23.useCallback)(
+  const showColumnSettingsPanel = (0, import_react22.useCallback)(
     (action) => {
       showContextPanel("ColumnSettings", "Column Settings", {
         column: action.column,
@@ -2374,7 +2402,7 @@ var useTableAndColumnSettings = ({
       tableConfig
     ]
   );
-  const handleAddCalculatedColumn = (0, import_react23.useCallback)(() => {
+  const handleAddCalculatedColumn = (0, import_react22.useCallback)(() => {
     showColumnSettingsPanel({
       column: {
         name: "::",
@@ -2384,7 +2412,7 @@ var useTableAndColumnSettings = ({
       vuuTable: { module: "SIMUL", table: "instruments" }
     });
   }, [showColumnSettingsPanel]);
-  const handleNavigateToColumn = (0, import_react23.useCallback)(
+  const handleNavigateToColumn = (0, import_react22.useCallback)(
     (columnName) => {
       const column = tableConfig.columns.find((c) => c.name === columnName);
       if (column) {
@@ -2398,7 +2426,7 @@ var useTableAndColumnSettings = ({
     },
     [showColumnSettingsPanel, tableConfig.columns]
   );
-  showTableSettingsRef.current = (0, import_react23.useCallback)(() => {
+  showTableSettingsRef.current = (0, import_react22.useCallback)(() => {
     showContextPanel("TableSettings", "DataGrid Settings", {
       availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType }) => ({
         name,
@@ -2429,7 +2457,7 @@ var useTableAndColumnSettings = ({
 var stripInternalProperties = (tableConfig) => {
   return tableConfig;
 };
-var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils17.metadataKeys;
+var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils19.metadataKeys;
 var NULL_DRAG_DROP = {
   draggable: void 0,
   onMouseDown: void 0
@@ -2461,19 +2489,20 @@ var useTable = ({
   onSelectionChange,
   renderBufferSize = 0,
   rowHeight = 20,
+  scrollingApiRef,
   selectionModel,
   size
 }) => {
-  const [rowCount, setRowCount] = (0, import_react24.useState)(dataSource.size);
+  const [rowCount, setRowCount] = (0, import_react23.useState)(dataSource.size);
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
-  const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls2.useDragDropNext : useNullDragDrop;
-  const menuBuilder = (0, import_react24.useMemo)(
+  const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls2.useDragDrop : useNullDragDrop;
+  const menuBuilder = (0, import_react23.useMemo)(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = (0, import_react24.useCallback)((size2) => {
+  const onDataRowcountChange = (0, import_react23.useCallback)((size2) => {
     setRowCount(size2);
   }, []);
   const {
@@ -2483,14 +2512,14 @@ var useTable = ({
     tableAttributes,
     tableConfig
   } = useTableModel(config, dataSource);
-  (0, import_vuu_utils17.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils19.useLayoutEffectSkipFirst)(() => {
     dispatchColumnAction({
       type: "init",
       dataSource,
       tableConfig
     });
   }, [tableConfig, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = (0, import_react24.useCallback)(
+  const applyTableConfigChange = (0, import_react23.useCallback)(
     (config2) => {
       dispatchColumnAction({
         type: "init",
@@ -2501,16 +2530,16 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const [stateColumns, setStateColumns] = (0, import_react24.useState)();
-  const [columns, setColumnSize] = (0, import_react24.useMemo)(() => {
+  const [stateColumns, setStateColumns] = (0, import_react23.useState)();
+  const [columns, setColumnSize] = (0, import_react23.useMemo)(() => {
     const setSize = (columnName, width) => {
-      const cols = (0, import_vuu_utils17.updateColumn)(runtimeColumns, 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_react24.useMemo)(
-    () => (0, import_vuu_utils17.buildColumnMap)(dataSource.columns),
+  const columnMap = (0, import_react23.useMemo)(
+    () => (0, import_vuu_utils19.buildColumnMap)(dataSource.columns),
     [dataSource.columns]
   );
   const {
@@ -2528,9 +2557,9 @@ var useTable = ({
   });
   const initialRange = useInitialValue({
     from: 0,
-    to: viewportMeasurements.rowCount
+    to: viewportMeasurements.rowCount === 0 ? 0 : viewportMeasurements.rowCount + 1
   });
-  const onSubscribed = (0, import_react24.useCallback)(
+  const onSubscribed = (0, import_react23.useCallback)(
     ({ tableSchema }) => {
       if (tableSchema) {
         dispatchColumnAction({
@@ -2552,9 +2581,8 @@ var useTable = ({
     onSubscribed,
     range: initialRange
   });
-  const handleConfigEditedInSettingsPanel = (0, import_react24.useCallback)(
+  const handleConfigEditedInSettingsPanel = (0, import_react23.useCallback)(
     (tableConfig2) => {
-      console.log(`settings changed`);
       dispatchColumnAction({
         type: "init",
         tableConfig: tableConfig2,
@@ -2564,7 +2592,7 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = (0, import_react24.useCallback)(
+  const handleDataSourceConfigChanged = (0, import_react23.useCallback)(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2573,7 +2601,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     dataSource.on("config", (config2, confirmed) => {
       dispatchColumnAction({
         type: "tableConfig",
@@ -2582,14 +2610,14 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchColumnAction]);
-  const handleCreateCalculatedColumn = (0, import_react24.useCallback)(
+  const handleCreateCalculatedColumn = (0, import_react23.useCallback)(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
       applyTableConfigChange(addColumn(tableConfig, column));
     },
     [dataSource, tableConfig, applyTableConfigChange]
   );
-  const hideColumns2 = (0, import_react24.useCallback)(
+  const hideColumns2 = (0, import_react23.useCallback)(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -2603,11 +2631,11 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = (0, import_react24.useCallback)(
+  const pinColumn3 = (0, import_react23.useCallback)(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
-        columns: (0, import_vuu_utils17.updateColumn)(tableConfig.columns, {
+        columns: (0, import_vuu_utils19.updateColumn)(tableConfig.columns, {
           ...action.column,
           pin: action.pin
         })
@@ -2626,7 +2654,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = (0, import_react24.useCallback)(
+  const onPersistentColumnOperation = (0, import_react23.useCallback)(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -2655,10 +2683,10 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = (0, import_react24.useCallback)(
+  const handleSort = (0, import_react23.useCallback)(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
-        dataSource.sort = (0, import_vuu_utils17.applySort)(
+        dataSource.sort = (0, import_vuu_utils19.applySort)(
           dataSource.sort,
           column,
           extendSort,
@@ -2668,16 +2696,16 @@ var useTable = ({
     },
     [dataSource]
   );
-  const onResizeColumn = (0, import_react24.useCallback)(
+  const onResizeColumn = (0, import_react23.useCallback)(
     (phase, columnName, width) => {
       const column = columns.find((column2) => column2.name === columnName);
       if (column) {
         if (phase === "resize") {
-          if ((0, import_vuu_utils17.isValidNumber)(width)) {
+          if ((0, import_vuu_utils19.isValidNumber)(width)) {
             setColumnSize(columnName, width);
           }
         } else if (phase === "end") {
-          if ((0, import_vuu_utils17.isValidNumber)(width)) {
+          if ((0, import_vuu_utils19.isValidNumber)(width)) {
             dispatchColumnAction({
               type: "resizeColumn",
               phase,
@@ -2712,10 +2740,10 @@ var useTable = ({
     },
     [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
   );
-  const onToggleGroup = (0, import_react24.useCallback)(
+  const onToggleGroup = (0, import_react23.useCallback)(
     (row, column) => {
       var _a, _b;
-      const isJson = (0, import_vuu_utils17.isJsonGroup)(column, row);
+      const isJson = (0, import_vuu_utils19.isJsonGroup)(column, row);
       const key = row[KEY];
       if (row[IS_EXPANDED2]) {
         dataSource.closeTreeNode(key, true);
@@ -2749,24 +2777,19 @@ var useTable = ({
     },
     [columns, dataSource, dispatchColumnAction]
   );
-  const { onVerticalScroll } = useVirtualViewport({
-    columns,
-    getRowAtPosition,
-    setRange,
-    viewportMeasurements
-  });
-  const handleVerticalScroll = (0, import_react24.useCallback)(
-    (scrollTop) => {
-      onVerticalScroll(scrollTop);
+  const handleVerticalScroll = (0, import_react23.useCallback)(
+    (_, pctScrollTop) => {
+      setPctScrollTop(pctScrollTop);
     },
-    [onVerticalScroll]
+    [setPctScrollTop]
   );
   const { requestScroll, ...scrollProps } = useTableScroll({
-    maxScrollLeft: viewportMeasurements.maxScrollContainerScrollHorizontal,
-    maxScrollTop: viewportMeasurements.maxScrollContainerScrollVertical,
+    getRowAtPosition,
     rowHeight,
+    scrollingApiRef,
+    setRange,
     onVerticalScroll: handleVerticalScroll,
-    viewportRowCount: viewportMeasurements.rowCount
+    viewportMeasurements
   });
   const {
     highlightedIndexRef,
@@ -2794,7 +2817,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = (0, import_react24.useCallback)(
+  const handleFocus = (0, import_react23.useCallback)(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -2809,15 +2832,15 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = (0, import_react24.useCallback)(
+  const onMoveGroupColumn = (0, import_react23.useCallback)(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = (0, import_react24.useCallback)(
+  const onRemoveGroupColumn = (0, import_react23.useCallback)(
     (column) => {
-      if ((0, import_vuu_utils17.isGroupColumn)(column)) {
+      if ((0, import_vuu_utils19.isGroupColumn)(column)) {
         dataSource.groupBy = [];
       } else {
         if (dataSource && dataSource.groupBy.includes(column.name)) {
@@ -2829,7 +2852,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = (0, import_react24.useCallback)(
+  const handleSelectionChange = (0, import_react23.useCallback)(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -2845,7 +2868,7 @@ var useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = (0, import_react24.useCallback)(
+  const handleKeyDown = (0, import_react23.useCallback)(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -2857,21 +2880,21 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = (0, import_react24.useCallback)(
+  const handleRowClick = (0, import_react23.useCallback)(
     (row, rangeSelect, keepExistingSelection) => {
       selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
       onRowClickProp == null ? void 0 : onRowClickProp(row);
     },
     [onRowClickProp, selectionHookOnRowClick]
   );
-  (0, import_vuu_utils17.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils19.useLayoutEffectSkipFirst)(() => {
     dispatchColumnAction({
       type: "init",
       tableConfig: config,
       dataSource
     });
   }, [config, dataSource, dispatchColumnAction]);
-  const onMoveColumn = (0, import_react24.useCallback)(
+  const onMoveColumn = (0, import_react23.useCallback)(
     (columns2) => {
       console.log(`useTable onMoveColumn`, {
         columns: columns2
@@ -2889,20 +2912,20 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = (0, import_react24.useCallback)(
+  const handleDropRow = (0, import_react23.useCallback)(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = (0, import_react24.useCallback)(
+  const handleDataEdited = (0, import_react23.useCallback)(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = (0, import_react24.useCallback)(
+  const handleDragStartRow = (0, import_react23.useCallback)(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
-      const rowIndex = (0, import_vuu_utils17.getIndexFromRowElement)(initialDragElement);
+      const rowIndex = (0, import_vuu_utils19.getIndexFromRowElement)(initialDragElement);
       const row = dataRef.current.find((row2) => row2[0] === rowIndex);
       if (row) {
         dragDropState.setPayload(row);
@@ -2934,6 +2957,7 @@ var useTable = ({
     columnMap,
     columns,
     data,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     highlightedIndex: highlightedIndexRef.current,
@@ -2956,37 +2980,37 @@ var useTable = ({
 };
 
 // src/table-header/TableHeader.tsx
-var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+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_utils18 = require("@vuu-ui/vuu-utils");
-var import_react25 = require("react");
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_react24 = require("react");
 var useTableHeader = ({
   columns,
   onMoveColumn,
   onSortColumn,
   tableConfig
 }) => {
-  const containerRef = (0, import_react25.useRef)(null);
-  const handleDropColumnHeader = (0, import_react25.useCallback)(
+  const containerRef = (0, import_react24.useRef)(null);
+  const handleDropColumnHeader = (0, import_react24.useCallback)(
     (moveFrom, moveTo) => {
       const column = columns[moveFrom];
-      const orderedColumns = (0, import_vuu_utils18.moveColumnTo)(columns, column, moveTo);
+      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_utils18.moveColumnTo)(tableConfig.columns, column, insertPos - 1));
+        onMoveColumn((0, import_vuu_utils20.moveColumnTo)(tableConfig.columns, column, insertPos - 1));
       } else {
-        onMoveColumn((0, import_vuu_utils18.moveColumnTo)(tableConfig.columns, column, insertPos));
+        onMoveColumn((0, import_vuu_utils20.moveColumnTo)(tableConfig.columns, column, insertPos));
       }
     },
     [columns, onMoveColumn, tableConfig.columns]
   );
-  const handleColumnHeaderClick = (0, import_react25.useCallback)(
+  const handleColumnHeaderClick = (0, import_react24.useCallback)(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -2994,7 +3018,7 @@ var useTableHeader = ({
         ".vuuTableHeaderCell"
       );
       const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
-      const column = (0, import_vuu_utils18.visibleColumnAtIndex)(columns, colIdx);
+      const column = (0, import_vuu_utils20.visibleColumnAtIndex)(columns, colIdx);
       const isAdditive = evt.shiftKey;
       column && onSortColumn(column, isAdditive);
     },
@@ -3004,7 +3028,7 @@ var useTableHeader = ({
     onMouseDown: columnHeaderDragMouseDown,
     draggable: draggableColumn,
     ...dragDropHook
-  } = (0, import_vuu_ui_controls3.useDragDropNext)({
+  } = (0, import_vuu_ui_controls3.useDragDrop)({
     allowDragDrop: true,
     containerRef,
     draggableClassName: `vuuTable`,
@@ -3050,8 +3074,8 @@ var TableHeader = ({
   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_utils19.isNotHidden).map(
-        (col, i) => (0, import_vuu_utils19.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      columns.filter(import_vuu_utils21.isNotHidden).map(
+        (col, i) => (0, import_vuu_utils21.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           GroupHeaderCellNext,
           {
             column: col,
@@ -3085,7 +3109,7 @@ var TableHeader = ({
 // src/Table.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var classBase7 = "vuuTable";
-var { IDX: IDX3, RENDER_IDX } = import_vuu_utils20.metadataKeys;
+var { IDX: IDX3, RENDER_IDX } = import_vuu_utils22.metadataKeys;
 var TableCore = ({
   Row: Row2 = Row,
   allowDragDrop,
@@ -3106,19 +3130,21 @@ var TableCore = ({
   onRowClick: onRowClickProp,
   onSelect,
   onSelectionChange,
-  renderBufferSize = 0,
+  renderBufferSize = 5,
   rowHeight = 20,
+  scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
   headerHeight = showColumnHeaders ? 25 : 0,
   size
 }) => {
-  const id = (0, import_vuu_utils20.useId)(idProp);
+  const id = (0, import_vuu_utils22.useId)(idProp);
   const {
     columnMap,
     columns,
     data,
     draggableRow,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     highlightedIndex,
@@ -3158,10 +3184,11 @@ var TableCore = ({
     onSelectionChange,
     renderBufferSize,
     rowHeight,
+    scrollingApiRef,
     selectionModel,
     size
   });
-  const className = (0, import_clsx9.default)(`${classBase7}-contentContainer`, {
+  const contentContainerClassName = (0, import_clsx9.default)(`${classBase7}-contentContainer`, {
     [`${classBase7}-colLines`]: tableAttributes.columnSeparators,
     [`${classBase7}-rowLines`]: tableAttributes.rowSeparators,
     // [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
@@ -3198,7 +3225,7 @@ var TableCore = ({
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
-            className,
+            className: contentContainerClassName,
             ref: scrollProps.contentContainerRef,
             style: cssVariables,
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -3226,13 +3253,14 @@ var TableCore = ({
                   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase7}-body`, children: data.map((data2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Row2,
                     {
+                      "aria-rowindex": data2[0] + 1,
                       columnMap,
                       columns,
                       highlighted: highlightedIndex === data2[IDX3],
                       onClick: onRowClick,
                       onDataEdited,
                       row: data2,
-                      offset: rowHeight * data2[IDX3] + viewportMeasurements.totalHeaderHeight,
+                      offset: getRowOffset(data2),
                       onToggleGroup,
                       zebraStripes: tableAttributes.zebraStripes
                     },
@@ -3248,7 +3276,7 @@ var TableCore = ({
     }
   );
 };
-var Table = (0, import_react26.forwardRef)(function TableNext({
+var Table = (0, import_react25.forwardRef)(function TableNext({
   Row: Row2,
   allowDragDrop,
   availableColumns,
@@ -3270,14 +3298,15 @@ var Table = (0, import_react26.forwardRef)(function TableNext({
   onSelectionChange,
   renderBufferSize,
   rowHeight,
+  scrollingApiRef,
   selectionModel,
   showColumnHeaders,
   headerHeight,
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = (0, import_react26.useRef)(null);
-  const [size, setSize] = (0, import_react26.useState)();
+  const containerRef = (0, import_react25.useRef)(null);
+  const [size, setSize] = (0, import_react25.useState)();
   if (config === void 0) {
     throw Error(
       "vuu Table requires config prop. Minimum config is list of Column Descriptors"
@@ -3319,6 +3348,7 @@ var Table = (0, import_react26.forwardRef)(function TableNext({
           onSelectionChange,
           renderBufferSize,
           rowHeight,
+          scrollingApiRef,
           selectionModel,
           showColumnHeaders,
           size
@@ -3329,7 +3359,7 @@ var Table = (0, import_react26.forwardRef)(function TableNext({
 });
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
 var import_core3 = require("@salt-ds/core");
 
@@ -3337,17 +3367,17 @@ var import_core3 = require("@salt-ds/core");
 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_utils21 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var CheckboxCell = (0, import_react27.memo)(
+var CheckboxCell = (0, import_react26.memo)(
   ({ column, columnMap, onCommit = import_vuu_ui_controls4.WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
     const isChecked = row[dataIdx];
-    const handleCommit = (0, import_react27.useCallback)(
+    const handleCommit = (0, import_react26.useCallback)(
       (value) => async (evt) => {
         const res = await onCommit(value);
         if (res === true) {
-          (0, import_vuu_utils21.dispatchCustomEvent)(evt.target, "vuu-commit");
+          (0, import_vuu_utils23.dispatchCustomEvent)(evt.target, "vuu-commit");
         }
         return res;
       },
@@ -3358,12 +3388,12 @@ var CheckboxCell = (0, import_react27.memo)(
   dataAndColumnUnchanged
 );
 CheckboxCell.displayName = "CheckboxCell";
-(0, import_vuu_utils21.registerComponent)("checkbox-cell", CheckboxCell, "cell-renderer", {
+(0, import_vuu_utils23.registerComponent)("checkbox-cell", CheckboxCell, "cell-renderer", {
   serverDataType: "boolean"
 });
 
 // src/cell-renderers/input-cell/InputCell.tsx
-var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+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_clsx10 = __toESM(require("clsx"));
@@ -3402,18 +3432,18 @@ var InputCell = ({
     }
   );
 };
-(0, import_vuu_utils22.registerComponent)("input-cell", InputCell, "cell-renderer", {});
+(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_utils23 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
 var import_clsx11 = __toESM(require("clsx"));
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var classBase9 = "vuuTableToggleCell";
 var getValueList = ({ name, type }) => {
-  if ((0, import_vuu_utils23.isTypeDescriptor)(type) && (0, import_vuu_utils23.isValueListRenderer)(type.renderer)) {
+  if ((0, import_vuu_utils25.isTypeDescriptor)(type) && (0, import_vuu_utils25.isValueListRenderer)(type.renderer)) {
     return type.renderer.values;
   } else {
     throw Error(
@@ -3421,7 +3451,7 @@ var getValueList = ({ name, type }) => {
     );
   }
 };
-var ToggleCell = (0, import_react28.memo)(
+var ToggleCell = (0, import_react27.memo)(
   function ToggleCell2({
     column,
     columnMap,
@@ -3431,11 +3461,11 @@ var ToggleCell = (0, import_react28.memo)(
     const values = getValueList(column);
     const dataIdx = columnMap[column.name];
     const value = row[dataIdx];
-    const handleCommit = (0, import_react28.useCallback)(
+    const handleCommit = (0, import_react27.useCallback)(
       (evt, value2) => {
         return onCommit(value2).then((response) => {
           if (response === true) {
-            (0, import_vuu_utils23.dispatchCustomEvent)(evt.target, "vuu-commit");
+            (0, import_vuu_utils25.dispatchCustomEvent)(evt.target, "vuu-commit");
           }
           return response;
         });
@@ -3456,16 +3486,16 @@ var ToggleCell = (0, import_react28.memo)(
   },
   dataAndColumnUnchanged
 );
-(0, import_vuu_utils23.registerComponent)("toggle-cell", ToggleCell, "cell-renderer", {});
+(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_utils24 = require("@vuu-ui/vuu-utils");
-var import_react29 = require("react");
+var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
+var import_react28 = require("react");
 var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = (0, import_react29.useRef)(null);
+  const tableRef = (0, import_react28.useRef)(null);
   const [highlightedIndexRef, setHighlightedIndex] = (0, import_vuu_ui_controls8.useStateRef)(initialValue);
-  const handleKeyDown = (0, import_react29.useCallback)(
+  const handleKeyDown = (0, import_react28.useCallback)(
     (e) => {
       var _a;
       if (e.key === "ArrowDown") {
@@ -3478,13 +3508,13 @@ var useControlledTableNavigation = (initialValue, rowCount) => {
           `[aria-rowindex="${rowIdx}"]`
         );
         if (rowEl) {
-          (0, import_vuu_utils24.dispatchMouseEvent)(rowEl, "click");
+          (0, import_vuu_utils26.dispatchMouseEvent)(rowEl, "click");
         }
       }
     },
     [highlightedIndexRef, rowCount, setHighlightedIndex]
   );
-  const handleHighlight = (0, import_react29.useCallback)(
+  const handleHighlight = (0, import_react28.useCallback)(
     (idx) => {
       setHighlightedIndex(idx);
     },