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

package/esm/index.js

@@ -412,7 +412,7 @@ import { useForkRef } from "@salt-ds/core";
 import cx9 from "clsx";
 import {
   forwardRef,
-  useRef as useRef15,
+  useRef as useRef14,
   useState as useState7
 } from "react";
 
@@ -575,7 +575,6 @@ var Row = memo(
       "div",
       {
         ...htmlAttributes,
-        "aria-rowindex": row[0] + 1,
         key: `row-${row[0]}`,
         role: "row",
         className,
@@ -607,12 +606,12 @@ Row.displayName = "Row";
 
 // src/useTable.ts
 import {
-  useDragDropNext as useDragDrop
+  useDragDrop
 } from "@vuu-ui/vuu-ui-controls";
 import {
   applySort,
   buildColumnMap as buildColumnMap2,
-  getIndexFromRowElement as getIndexFromRowElement2,
+  getIndexFromRowElement as getIndexFromRowElement3,
   isGroupColumn as isGroupColumn3,
   isJsonGroup as isJsonGroup2,
   isValidNumber,
@@ -621,9 +620,9 @@ import {
   useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback19,
+  useCallback as useCallback18,
   useEffect as useEffect4,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useState as useState6
 } from "react";
 
@@ -952,7 +951,7 @@ import {
 
 // 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);
@@ -1224,6 +1223,7 @@ var useInitialValue = (value) => {
 };
 
 // src/useKeyboardNavigation.ts
+import { getIndexFromRowElement } from "@vuu-ui/vuu-utils";
 import { useControlled } from "@salt-ds/core";
 import {
   useCallback as useCallback12,
@@ -1254,51 +1254,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 +1321,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 = getIndexFromRowElement(focusedRow);
         const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
         return [rowIdx, colIdx];
       }
@@ -1391,11 +1346,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 +1429,9 @@ var useKeyboardNavigation = ({
   );
   const scrollRowIntoViewIfNecessary = useCallback12(
     (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 = useCallback12(
     async (key) => {
@@ -1649,7 +1592,7 @@ var useSelection = ({
 
 // src/useTableContextMenu.ts
 import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
-import { buildColumnMap, getIndexFromRowElement } from "@vuu-ui/vuu-utils";
+import { buildColumnMap, getIndexFromRowElement as getIndexFromRowElement2 } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback14 } from "react";
 var NO_ROWS = [];
 var useTableContextMenu = ({
@@ -1667,7 +1610,7 @@ var useTableContextMenu = ({
       if (cellEl && rowEl) {
         const { selectedRowsCount } = dataSource;
         const columnMap = buildColumnMap(columns);
-        const rowIndex = getIndexFromRowElement(rowEl);
+        const rowIndex = getIndexFromRowElement2(rowEl);
         const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
         const row = data.find(([idx]) => idx === rowIndex);
         const columnName = columns[cellIndex];
@@ -1998,7 +1941,14 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
 }
 
 // src/useTableScroll.ts
-import { useCallback as useCallback15, useRef as useRef10 } from "react";
+import { getRowElementAtIndex } from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback15,
+  useEffect as useEffect3,
+  useImperativeHandle,
+  useMemo as useMemo4,
+  useRef as useRef10
+} from "react";
 var getPctScroll = (container) => {
   const { scrollLeft, scrollTop } = container;
   const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
@@ -2006,6 +1956,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
@@ -2027,17 +2002,37 @@ var useCallbackRef = ({
   return callbackRef;
 };
 var useTableScroll = ({
-  maxScrollLeft,
-  maxScrollTop,
+  getRowAtPosition,
   onHorizontalScroll,
   onVerticalScroll,
-  rowHeight,
-  viewportRowCount
+  scrollingApiRef,
+  setRange,
+  viewportMeasurements
 }) => {
+  const firstRowRef = useRef10(0);
   const contentContainerScrolledRef = useRef10(false);
   const scrollPosRef = useRef10({ scrollTop: 0, scrollLeft: 0 });
   const scrollbarContainerRef = useRef10(null);
   const contentContainerRef = useRef10(null);
+  const {
+    appliedPageSize,
+    isVirtualScroll,
+    maxScrollContainerScrollHorizontal: maxScrollLeft,
+    maxScrollContainerScrollVertical: maxScrollTop,
+    rowCount: viewportRowCount,
+    totalHeaderHeight
+  } = viewportMeasurements;
+  const handleVerticalScroll = useCallback15(
+    (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 = useCallback15(() => {
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
@@ -2047,7 +2042,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,
@@ -2064,17 +2059,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 = useCallback15(
     (el) => {
       scrollbarContainerRef.current = el;
@@ -2121,37 +2116,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 = 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;
@@ -2163,8 +2181,46 @@ var useTableScroll = ({
         }
       }
     },
-    [maxScrollLeft, maxScrollTop, rowHeight, viewportRowCount]
+    [
+      appliedPageSize,
+      isVirtualScroll,
+      maxScrollLeft,
+      maxScrollTop,
+      setRange,
+      totalHeaderHeight,
+      viewportRowCount
+    ]
   );
+  const scrollHandles = useMemo4(
+    () => ({
+      scrollToIndex: (rowIndex) => {
+        if (scrollbarContainerRef.current) {
+          const scrollPos = (rowIndex - 30) * 20;
+          scrollbarContainerRef.current.scrollTop = scrollPos;
+        }
+      },
+      scrollToKey: (rowKey) => {
+        console.log(`scrollToKey ${rowKey}`);
+      }
+    }),
+    []
+  );
+  useImperativeHandle(
+    scrollingApiRef,
+    () => {
+      if (scrollbarContainerRef.current) {
+        return scrollHandles;
+      } else {
+        return noScrolling;
+      }
+    },
+    [scrollHandles]
+  );
+  useEffect3(() => {
+    const { current: from } = firstRowRef;
+    const rowRange = { from, to: from + viewportRowCount + 1 };
+    setRange(rowRange);
+  }, [setRange, viewportRowCount]);
   return {
     /** Ref to be assigned to ScrollbarContainer */
     scrollbarContainerRef: scrollbarContainerCallbackRef,
@@ -2176,18 +2232,20 @@ var useTableScroll = ({
 };
 
 // src/useTableViewport.ts
-import { useCallback as useCallback16, useMemo as useMemo4, useRef as useRef11 } from "react";
+import { useCallback as useCallback16, useMemo as useMemo5, useRef as useRef11 } from "react";
 import {
   actualRowPositioning,
   virtualRowPositioning
 } from "@vuu-ui/vuu-utils";
-var MAX_RAW_ROWS = 15e5;
+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,
@@ -2228,19 +2286,18 @@ var useTableViewport = ({
   size
 }) => {
   const pctScrollTopRef = useRef11(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 { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo4(
+  const virtualisedExtent = virtualContentHeight - pixelContentHeight;
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo5(
     () => measurePinnedColumns(columns),
     [columns]
   );
-  const [actualRowOffset, actualRowAtPosition] = useMemo4(
-    () => actualRowPositioning(rowHeight),
-    [rowHeight]
-  );
-  const [getRowOffset, getRowAtPosition] = useMemo4(() => {
+  const totalHeaderHeightRef = useRef11(headerHeight);
+  useMemo5(() => {
+    totalHeaderHeightRef.current = headerHeight * (1 + headings.length);
+  }, [headerHeight, headings.length]);
+  const [getRowOffset, getRowAtPosition, isVirtualScroll] = useMemo5(() => {
     if (virtualisedExtent) {
       return virtualRowPositioning(
         rowHeight,
@@ -2248,37 +2305,39 @@ var useTableViewport = ({
         pctScrollTopRef
       );
     } else {
-      return [actualRowOffset, actualRowAtPosition];
+      return actualRowPositioning(rowHeight);
     }
-  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
+  }, [virtualisedExtent, rowHeight]);
   const setPctScrollTop = useCallback16((scrollPct) => {
     pctScrollTopRef.current = scrollPct;
   }, []);
-  return useMemo4(() => {
+  return useMemo5(() => {
     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,
@@ -2288,53 +2347,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
-import { useCallback as useCallback17, useEffect as useEffect3, useRef as useRef12 } from "react";
-var useVirtualViewport = ({
-  getRowAtPosition,
-  setRange,
-  viewportMeasurements
-}) => {
-  const firstRowRef = useRef12(0);
-  const { rowCount: viewportRowCount } = viewportMeasurements;
-  const handleVerticalScroll = useCallback17(
-    (scrollTop) => {
-      const firstRow = getRowAtPosition(scrollTop);
-      if (firstRow !== firstRowRef.current) {
-        firstRowRef.current = firstRow;
-        setRange({ from: firstRow, to: firstRow + viewportRowCount });
-      }
-    },
-    [getRowAtPosition, setRange, viewportRowCount]
-  );
-  useEffect3(() => {
-    const { current: from } = firstRowRef;
-    const rowRange = { from, to: from + viewportRowCount };
-    setRange(rowRange);
-  }, [setRange, viewportRowCount]);
-  return {
-    onVerticalScroll: handleVerticalScroll
-  };
-};
-
 // src/useTableAndColumnSettings.ts
 import { useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
 import { getCalculatedColumnType } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback18, useRef as useRef13, useState as useState5 } from "react";
+import { useCallback as useCallback17, useRef as useRef12, useState as useState5 } from "react";
 var useTableAndColumnSettings = ({
   availableColumns: availableColumnsProps,
   onAvailableColumnsChange,
@@ -2344,11 +2375,11 @@ var useTableAndColumnSettings = ({
   tableConfig
 }) => {
   const dispatchLayoutAction = useLayoutProviderDispatch();
-  const showTableSettingsRef = useRef13();
+  const showTableSettingsRef = useRef12();
   const [availableColumns, setAvailableColumns] = useState5(
     availableColumnsProps
   );
-  const showContextPanel = useCallback18(
+  const showContextPanel = useCallback17(
     (componentType, title, props) => {
       dispatchLayoutAction({
         type: "set-props",
@@ -2365,13 +2396,13 @@ var useTableAndColumnSettings = ({
     },
     [dispatchLayoutAction]
   );
-  const handleCancelCreateColumn = useCallback18(() => {
+  const handleCancelCreateColumn = useCallback17(() => {
     requestAnimationFrame(() => {
       var _a;
       (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
     });
   }, []);
-  const handleCreateCalculatedColumn = useCallback18(
+  const handleCreateCalculatedColumn = useCallback17(
     (column) => {
       const newAvailableColumns = availableColumns.concat({
         name: column.name,
@@ -2387,7 +2418,7 @@ var useTableAndColumnSettings = ({
     },
     [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
   );
-  const showColumnSettingsPanel = useCallback18(
+  const showColumnSettingsPanel = useCallback17(
     (action) => {
       showContextPanel("ColumnSettings", "Column Settings", {
         column: action.column,
@@ -2406,7 +2437,7 @@ var useTableAndColumnSettings = ({
       tableConfig
     ]
   );
-  const handleAddCalculatedColumn = useCallback18(() => {
+  const handleAddCalculatedColumn = useCallback17(() => {
     showColumnSettingsPanel({
       column: {
         name: "::",
@@ -2416,7 +2447,7 @@ var useTableAndColumnSettings = ({
       vuuTable: { module: "SIMUL", table: "instruments" }
     });
   }, [showColumnSettingsPanel]);
-  const handleNavigateToColumn = useCallback18(
+  const handleNavigateToColumn = useCallback17(
     (columnName) => {
       const column = tableConfig.columns.find((c) => c.name === columnName);
       if (column) {
@@ -2430,7 +2461,7 @@ var useTableAndColumnSettings = ({
     },
     [showColumnSettingsPanel, tableConfig.columns]
   );
-  showTableSettingsRef.current = useCallback18(() => {
+  showTableSettingsRef.current = useCallback17(() => {
     showContextPanel("TableSettings", "DataGrid Settings", {
       availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType }) => ({
         name,
@@ -2493,6 +2524,7 @@ var useTable = ({
   onSelectionChange,
   renderBufferSize = 0,
   rowHeight = 20,
+  scrollingApiRef,
   selectionModel,
   size
 }) => {
@@ -2501,11 +2533,11 @@ var useTable = ({
     throw Error("no data source provided to Vuu Table");
   }
   const useRowDragDrop = allowDragDrop ? useDragDrop : useNullDragDrop;
-  const menuBuilder = useMemo5(
+  const menuBuilder = useMemo6(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = useCallback19((size2) => {
+  const onDataRowcountChange = useCallback18((size2) => {
     setRowCount(size2);
   }, []);
   const {
@@ -2522,7 +2554,7 @@ var useTable = ({
       tableConfig
     });
   }, [tableConfig, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = useCallback19(
+  const applyTableConfigChange = useCallback18(
     (config2) => {
       dispatchColumnAction({
         type: "init",
@@ -2534,14 +2566,14 @@ var useTable = ({
     [dataSource, dispatchColumnAction, onConfigChange]
   );
   const [stateColumns, setStateColumns] = useState6();
-  const [columns, setColumnSize] = useMemo5(() => {
+  const [columns, setColumnSize] = useMemo6(() => {
     const setSize = (columnName, width) => {
       const cols = updateColumn(runtimeColumns, columnName, { width });
       setStateColumns(cols);
     };
     return [stateColumns != null ? stateColumns : runtimeColumns, setSize];
   }, [runtimeColumns, stateColumns]);
-  const columnMap = useMemo5(
+  const columnMap = useMemo6(
     () => buildColumnMap2(dataSource.columns),
     [dataSource.columns]
   );
@@ -2560,9 +2592,9 @@ var useTable = ({
   });
   const initialRange = useInitialValue({
     from: 0,
-    to: viewportMeasurements.rowCount
+    to: viewportMeasurements.rowCount === 0 ? 0 : viewportMeasurements.rowCount + 1
   });
-  const onSubscribed = useCallback19(
+  const onSubscribed = useCallback18(
     ({ tableSchema }) => {
       if (tableSchema) {
         dispatchColumnAction({
@@ -2584,9 +2616,8 @@ var useTable = ({
     onSubscribed,
     range: initialRange
   });
-  const handleConfigEditedInSettingsPanel = useCallback19(
+  const handleConfigEditedInSettingsPanel = useCallback18(
     (tableConfig2) => {
-      console.log(`settings changed`);
       dispatchColumnAction({
         type: "init",
         tableConfig: tableConfig2,
@@ -2596,7 +2627,7 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = useCallback19(
+  const handleDataSourceConfigChanged = useCallback18(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2614,14 +2645,14 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchColumnAction]);
-  const handleCreateCalculatedColumn = useCallback19(
+  const handleCreateCalculatedColumn = useCallback18(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
       applyTableConfigChange(addColumn(tableConfig, column));
     },
     [dataSource, tableConfig, applyTableConfigChange]
   );
-  const hideColumns2 = useCallback19(
+  const hideColumns2 = useCallback18(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -2635,7 +2666,7 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = useCallback19(
+  const pinColumn3 = useCallback18(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
@@ -2658,7 +2689,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = useCallback19(
+  const onPersistentColumnOperation = useCallback18(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -2687,7 +2718,7 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = useCallback19(
+  const handleSort = useCallback18(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
         dataSource.sort = applySort(
@@ -2700,7 +2731,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const onResizeColumn = useCallback19(
+  const onResizeColumn = useCallback18(
     (phase, columnName, width) => {
       const column = columns.find((column2) => column2.name === columnName);
       if (column) {
@@ -2744,7 +2775,7 @@ var useTable = ({
     },
     [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
   );
-  const onToggleGroup = useCallback19(
+  const onToggleGroup = useCallback18(
     (row, column) => {
       var _a, _b;
       const isJson = isJsonGroup2(column, row);
@@ -2781,24 +2812,19 @@ var useTable = ({
     },
     [columns, dataSource, dispatchColumnAction]
   );
-  const { onVerticalScroll } = useVirtualViewport({
-    columns,
-    getRowAtPosition,
-    setRange,
-    viewportMeasurements
-  });
-  const handleVerticalScroll = useCallback19(
-    (scrollTop) => {
-      onVerticalScroll(scrollTop);
+  const handleVerticalScroll = useCallback18(
+    (_, 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,
@@ -2826,7 +2852,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = useCallback19(
+  const handleFocus = useCallback18(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -2841,13 +2867,13 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = useCallback19(
+  const onMoveGroupColumn = useCallback18(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = useCallback19(
+  const onRemoveGroupColumn = useCallback18(
     (column) => {
       if (isGroupColumn3(column)) {
         dataSource.groupBy = [];
@@ -2861,7 +2887,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = useCallback19(
+  const handleSelectionChange = useCallback18(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -2877,7 +2903,7 @@ var useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = useCallback19(
+  const handleKeyDown = useCallback18(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -2889,7 +2915,7 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = useCallback19(
+  const handleRowClick = useCallback18(
     (row, rangeSelect, keepExistingSelection) => {
       selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
       onRowClickProp == null ? void 0 : onRowClickProp(row);
@@ -2903,7 +2929,7 @@ var useTable = ({
       dataSource
     });
   }, [config, dataSource, dispatchColumnAction]);
-  const onMoveColumn = useCallback19(
+  const onMoveColumn = useCallback18(
     (columns2) => {
       console.log(`useTable onMoveColumn`, {
         columns: columns2
@@ -2921,20 +2947,20 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = useCallback19(
+  const handleDropRow = useCallback18(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = useCallback19(
+  const handleDataEdited = useCallback18(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = useCallback19(
+  const handleDragStartRow = useCallback18(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
-      const rowIndex = getIndexFromRowElement2(initialDragElement);
+      const rowIndex = getIndexFromRowElement3(initialDragElement);
       const row = dataRef.current.find((row2) => row2[0] === rowIndex);
       if (row) {
         dragDropState.setPayload(row);
@@ -2966,6 +2992,7 @@ var useTable = ({
     columnMap,
     columns,
     data,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     highlightedIndex: highlightedIndexRef.current,
@@ -2992,17 +3019,17 @@ import { isGroupColumn as isGroupColumn4, isNotHidden as isNotHidden2 } from "@v
 import cx8 from "clsx";
 
 // src/table-header/useTableHeader.ts
-import { useDragDropNext as useDragDrop2 } from "@vuu-ui/vuu-ui-controls";
+import { useDragDrop as useDragDrop2 } from "@vuu-ui/vuu-ui-controls";
 import { moveColumnTo, visibleColumnAtIndex } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback20, useRef as useRef14 } from "react";
+import { useCallback as useCallback19, useRef as useRef13 } from "react";
 var useTableHeader = ({
   columns,
   onMoveColumn,
   onSortColumn,
   tableConfig
 }) => {
-  const containerRef = useRef14(null);
-  const handleDropColumnHeader = useCallback20(
+  const containerRef = useRef13(null);
+  const handleDropColumnHeader = useCallback19(
     (moveFrom, moveTo) => {
       const column = columns[moveFrom];
       const orderedColumns = moveColumnTo(columns, column, moveTo);
@@ -3018,7 +3045,7 @@ var useTableHeader = ({
     },
     [columns, onMoveColumn, tableConfig.columns]
   );
-  const handleColumnHeaderClick = useCallback20(
+  const handleColumnHeaderClick = useCallback19(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -3138,8 +3165,9 @@ var TableCore = ({
   onRowClick: onRowClickProp,
   onSelect,
   onSelectionChange,
-  renderBufferSize = 0,
+  renderBufferSize = 5,
   rowHeight = 20,
+  scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
   headerHeight = showColumnHeaders ? 25 : 0,
@@ -3151,6 +3179,7 @@ var TableCore = ({
     columns,
     data,
     draggableRow,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     highlightedIndex,
@@ -3190,10 +3219,11 @@ var TableCore = ({
     onSelectionChange,
     renderBufferSize,
     rowHeight,
+    scrollingApiRef,
     selectionModel,
     size
   });
-  const className = cx9(`${classBase7}-contentContainer`, {
+  const contentContainerClassName = cx9(`${classBase7}-contentContainer`, {
     [`${classBase7}-colLines`]: tableAttributes.columnSeparators,
     [`${classBase7}-rowLines`]: tableAttributes.rowSeparators,
     // [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
@@ -3230,7 +3260,7 @@ var TableCore = ({
         /* @__PURE__ */ jsx12(
           "div",
           {
-            className,
+            className: contentContainerClassName,
             ref: scrollProps.contentContainerRef,
             style: cssVariables,
             children: /* @__PURE__ */ jsxs8(
@@ -3258,13 +3288,14 @@ var TableCore = ({
                   /* @__PURE__ */ jsx12("div", { className: `${classBase7}-body`, children: data.map((data2) => /* @__PURE__ */ jsx12(
                     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
                     },
@@ -3302,13 +3333,14 @@ var Table = forwardRef(function TableNext({
   onSelectionChange,
   renderBufferSize,
   rowHeight,
+  scrollingApiRef,
   selectionModel,
   showColumnHeaders,
   headerHeight,
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = useRef15(null);
+  const containerRef = useRef14(null);
   const [size, setSize] = useState7();
   if (config === void 0) {
     throw Error(
@@ -3351,6 +3383,7 @@ var Table = forwardRef(function TableNext({
           onSelectionChange,
           renderBufferSize,
           rowHeight,
+          scrollingApiRef,
           selectionModel,
           showColumnHeaders,
           size
@@ -3361,7 +3394,7 @@ var Table = forwardRef(function TableNext({
 });
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-import { memo as memo2, useCallback as useCallback21 } from "react";
+import { memo as memo2, useCallback as useCallback20 } from "react";
 import { CheckboxIcon, WarnCommit } from "@vuu-ui/vuu-ui-controls";
 import { Checkbox } from "@salt-ds/core";
 
@@ -3375,7 +3408,7 @@ var CheckboxCell = memo2(
   ({ column, columnMap, onCommit = WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
     const isChecked = row[dataIdx];
-    const handleCommit = useCallback21(
+    const handleCommit = useCallback20(
       (value) => async (evt) => {
         const res = await onCommit(value);
         if (res === true) {
@@ -3445,7 +3478,7 @@ import {
   registerComponent as registerComponent3
 } from "@vuu-ui/vuu-utils";
 import cx11 from "clsx";
-import { memo as memo3, useCallback as useCallback22 } from "react";
+import { memo as memo3, useCallback as useCallback21 } from "react";
 import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var classBase9 = "vuuTableToggleCell";
@@ -3468,7 +3501,7 @@ var ToggleCell = memo3(
     const values = getValueList(column);
     const dataIdx = columnMap[column.name];
     const value = row[dataIdx];
-    const handleCommit = useCallback22(
+    const handleCommit = useCallback21(
       (evt, value2) => {
         return onCommit(value2).then((response) => {
           if (response === true) {
@@ -3498,11 +3531,11 @@ registerComponent3("toggle-cell", ToggleCell, "cell-renderer", {});
 // src/useControlledTableNavigation.ts
 import { useStateRef } from "@vuu-ui/vuu-ui-controls";
 import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback23, useRef as useRef16 } from "react";
+import { useCallback as useCallback22, useRef as useRef15 } from "react";
 var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = useRef16(null);
+  const tableRef = useRef15(null);
   const [highlightedIndexRef, setHighlightedIndex] = useStateRef(initialValue);
-  const handleKeyDown = useCallback23(
+  const handleKeyDown = useCallback22(
     (e) => {
       var _a;
       if (e.key === "ArrowDown") {
@@ -3521,7 +3554,7 @@ var useControlledTableNavigation = (initialValue, rowCount) => {
     },
     [highlightedIndexRef, rowCount, setHighlightedIndex]
   );
-  const handleHighlight = useCallback23(
+  const handleHighlight = useCallback22(
     (idx) => {
       setHighlightedIndex(idx);
     },
@@ -3544,11 +3577,14 @@ export {
   TableGroupCell,
   ToggleCell,
   dataAndColumnUnchanged,
+  howFarIsRowOutsideViewport,
   isShowColumnSettings,
   isShowTableSettings,
+  noScrolling,
   updateTableConfig,
   useControlledTableNavigation,
   useTableModel,
+  useTableScroll,
   useTableViewport
 };
 //# sourceMappingURL=index.js.map