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

package/esm/index.js

@@ -473,7 +473,7 @@ import { useForkRef } from "@salt-ds/core";
 import cx9 from "clsx";
 import {
   forwardRef,
-  useRef as useRef15,
+  useRef as useRef14,
   useState as useState7
 } from "react";
 
@@ -636,7 +636,6 @@ var Row = memo(
       "div",
       {
         ...htmlAttributes,
-        "aria-rowindex": row[0] + 1,
         key: `row-${row[0]}`,
         role: "row",
         className,
@@ -668,12 +667,12 @@ Row.displayName = "Row";
 
 // ../vuu-table/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,
@@ -682,9 +681,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";
 
@@ -1013,7 +1012,7 @@ import {
 
 // ../vuu-table/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);
@@ -1285,6 +1284,7 @@ var useInitialValue = (value) => {
 };
 
 // ../vuu-table/src/useKeyboardNavigation.ts
+import { getIndexFromRowElement } from "@vuu-ui/vuu-utils";
 import { useControlled } from "@salt-ds/core";
 import {
   useCallback as useCallback12,
@@ -1315,51 +1315,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) {
@@ -1427,14 +1382,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];
       }
@@ -1452,11 +1407,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 });
         }
       }
@@ -1538,18 +1490,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) => {
@@ -1710,7 +1653,7 @@ var useSelection = ({
 
 // ../vuu-table/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 = ({
@@ -1728,7 +1671,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];
@@ -2059,7 +2002,14 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
 }
 
 // ../vuu-table/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;
@@ -2067,6 +2017,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
@@ -2088,17 +2063,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;
@@ -2108,7 +2103,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,
@@ -2125,17 +2120,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;
@@ -2182,37 +2177,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;
@@ -2224,8 +2242,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,
@@ -2237,18 +2293,20 @@ var useTableScroll = ({
 };
 
 // ../vuu-table/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,
@@ -2289,19 +2347,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,
@@ -2309,37 +2366,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,
@@ -2349,53 +2408,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
   ]);
 };
 
-// ../vuu-table/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
-  };
-};
-
 // ../vuu-table/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,
@@ -2405,11 +2436,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",
@@ -2426,13 +2457,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,
@@ -2448,7 +2479,7 @@ var useTableAndColumnSettings = ({
     },
     [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
   );
-  const showColumnSettingsPanel = useCallback18(
+  const showColumnSettingsPanel = useCallback17(
     (action) => {
       showContextPanel("ColumnSettings", "Column Settings", {
         column: action.column,
@@ -2467,7 +2498,7 @@ var useTableAndColumnSettings = ({
       tableConfig
     ]
   );
-  const handleAddCalculatedColumn = useCallback18(() => {
+  const handleAddCalculatedColumn = useCallback17(() => {
     showColumnSettingsPanel({
       column: {
         name: "::",
@@ -2477,7 +2508,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) {
@@ -2491,7 +2522,7 @@ var useTableAndColumnSettings = ({
     },
     [showColumnSettingsPanel, tableConfig.columns]
   );
-  showTableSettingsRef.current = useCallback18(() => {
+  showTableSettingsRef.current = useCallback17(() => {
     showContextPanel("TableSettings", "DataGrid Settings", {
       availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name: name2, serverDataType }) => ({
         name: name2,
@@ -2554,6 +2585,7 @@ var useTable = ({
   onSelectionChange,
   renderBufferSize = 0,
   rowHeight = 20,
+  scrollingApiRef,
   selectionModel,
   size
 }) => {
@@ -2562,11 +2594,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 {
@@ -2583,7 +2615,7 @@ var useTable = ({
       tableConfig
     });
   }, [tableConfig, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = useCallback19(
+  const applyTableConfigChange = useCallback18(
     (config2) => {
       dispatchColumnAction({
         type: "init",
@@ -2595,14 +2627,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]
   );
@@ -2621,9 +2653,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({
@@ -2645,9 +2677,8 @@ var useTable = ({
     onSubscribed,
     range: initialRange
   });
-  const handleConfigEditedInSettingsPanel = useCallback19(
+  const handleConfigEditedInSettingsPanel = useCallback18(
     (tableConfig2) => {
-      console.log(`settings changed`);
       dispatchColumnAction({
         type: "init",
         tableConfig: tableConfig2,
@@ -2657,7 +2688,7 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = useCallback19(
+  const handleDataSourceConfigChanged = useCallback18(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2675,14 +2706,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);
@@ -2696,7 +2727,7 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = useCallback19(
+  const pinColumn3 = useCallback18(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
@@ -2719,7 +2750,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = useCallback19(
+  const onPersistentColumnOperation = useCallback18(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -2748,7 +2779,7 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = useCallback19(
+  const handleSort = useCallback18(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
         dataSource.sort = applySort(
@@ -2761,7 +2792,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const onResizeColumn = useCallback19(
+  const onResizeColumn = useCallback18(
     (phase, columnName, width) => {
       const column = columns.find((column2) => column2.name === columnName);
       if (column) {
@@ -2805,7 +2836,7 @@ var useTable = ({
     },
     [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
   );
-  const onToggleGroup = useCallback19(
+  const onToggleGroup = useCallback18(
     (row, column) => {
       var _a, _b;
       const isJson = isJsonGroup2(column, row);
@@ -2842,24 +2873,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,
@@ -2887,7 +2913,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = useCallback19(
+  const handleFocus = useCallback18(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -2902,13 +2928,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 = [];
@@ -2922,7 +2948,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = useCallback19(
+  const handleSelectionChange = useCallback18(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -2938,7 +2964,7 @@ var useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = useCallback19(
+  const handleKeyDown = useCallback18(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -2950,7 +2976,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);
@@ -2964,7 +2990,7 @@ var useTable = ({
       dataSource
     });
   }, [config, dataSource, dispatchColumnAction]);
-  const onMoveColumn = useCallback19(
+  const onMoveColumn = useCallback18(
     (columns2) => {
       console.log(`useTable onMoveColumn`, {
         columns: columns2
@@ -2982,20 +3008,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);
@@ -3027,6 +3053,7 @@ var useTable = ({
     columnMap,
     columns,
     data,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     highlightedIndex: highlightedIndexRef.current,
@@ -3053,17 +3080,17 @@ import { isGroupColumn as isGroupColumn4, isNotHidden as isNotHidden2 } from "@v
 import cx8 from "clsx";
 
 // ../vuu-table/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);
@@ -3079,7 +3106,7 @@ var useTableHeader = ({
     },
     [columns, onMoveColumn, tableConfig.columns]
   );
-  const handleColumnHeaderClick = useCallback20(
+  const handleColumnHeaderClick = useCallback19(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -3199,8 +3226,9 @@ var TableCore = ({
   onRowClick: onRowClickProp,
   onSelect,
   onSelectionChange,
-  renderBufferSize = 0,
+  renderBufferSize = 5,
   rowHeight = 20,
+  scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
   headerHeight = showColumnHeaders ? 25 : 0,
@@ -3212,6 +3240,7 @@ var TableCore = ({
     columns,
     data,
     draggableRow,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     highlightedIndex,
@@ -3251,10 +3280,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,
@@ -3291,7 +3321,7 @@ var TableCore = ({
         /* @__PURE__ */ jsx12(
           "div",
           {
-            className,
+            className: contentContainerClassName,
             ref: scrollProps.contentContainerRef,
             style: cssVariables,
             children: /* @__PURE__ */ jsxs8(
@@ -3319,13 +3349,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
                     },
@@ -3363,13 +3394,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(
@@ -3412,6 +3444,7 @@ var Table = forwardRef(function TableNext({
           onSelectionChange,
           renderBufferSize,
           rowHeight,
+          scrollingApiRef,
           selectionModel,
           showColumnHeaders,
           size
@@ -3422,7 +3455,7 @@ var Table = forwardRef(function TableNext({
 });
 
 // ../vuu-table/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";
 
@@ -3436,7 +3469,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) {
@@ -3506,7 +3539,7 @@ import {
   registerComponent as registerComponent5
 } 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";
@@ -3529,7 +3562,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) {
@@ -3559,7 +3592,7 @@ registerComponent5("toggle-cell", ToggleCell, "cell-renderer", {});
 // ../vuu-table/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";
 
 // src/cell-renderers/background-cell/BackgroundCell.tsx
 import {
@@ -3580,11 +3613,11 @@ import {
   isTypeDescriptor as isTypeDescriptor2,
   isValidNumber as isValidNumber2
 } from "@vuu-ui/vuu-utils";
-import { useEffect as useEffect5, useRef as useRef17 } from "react";
+import { useEffect as useEffect5, useRef as useRef16 } from "react";
 var INITIAL_VALUE = [void 0, void 0, void 0, void 0];
 function useDirection(key, value, column) {
   var _a;
-  const ref = useRef17();
+  const ref = useRef16();
   const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
   const { type: dataType } = column;
   const decimals = isTypeDescriptor2(dataType) ? (_a = dataType.formatting) == null ? void 0 : _a.decimals : void 0;
@@ -3657,7 +3690,7 @@ import {
 } from "@vuu-ui/vuu-utils";
 import { FormField, FormFieldLabel } from "@salt-ds/core";
 import { Dropdown } from "@vuu-ui/vuu-ui-controls";
-import { useCallback as useCallback24, useState as useState8 } from "react";
+import { useCallback as useCallback23, useState as useState8 } from "react";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var classBase11 = "vuuBackgroundCellConfiguration";
 var flashOptions = [
@@ -3677,7 +3710,7 @@ var BackgroundCellConfigurationEditor = ({
   const [flashStyle, setFlashStyle] = useState8(
     valueFromColumn(column)
   );
-  const handleSelectionChange = useCallback24(
+  const handleSelectionChange = useCallback23(
     (_, flashOption) => {
       var _a;
       setFlashStyle(flashOption);
@@ -3715,7 +3748,7 @@ import {
   WarnCommit as WarnCommit4
 } from "@vuu-ui/vuu-ui-controls";
 import { dispatchCustomEvent as dispatchCustomEvent3, registerComponent as registerComponent7 } from "@vuu-ui/vuu-utils";
-import { memo as memo5, useCallback as useCallback25, useState as useState9 } from "react";
+import { memo as memo5, useCallback as useCallback24, useState as useState9 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var classBase12 = "vuuTableDropdownCell";
 var openKeys = ["Enter", " "];
@@ -3729,7 +3762,7 @@ var DropdownCell = memo5(
     const dataIdx = columnMap[column.name];
     const { initialValue, values } = useLookupValues(column, row[dataIdx]);
     const [value, setValue] = useState9(null);
-    const handleSelectionChange = useCallback25(
+    const handleSelectionChange = useCallback24(
       (evt, selectedOption) => {
         if (selectedOption) {
           setValue(selectedOption);
@@ -3846,7 +3879,7 @@ import {
 import { Checkbox as Checkbox2, Switch } from "@salt-ds/core";
 import cx14 from "clsx";
 import {
-  useCallback as useCallback26
+  useCallback as useCallback25
 } from "react";
 import { getColumnLabel as getColumnLabel2 } from "@vuu-ui/vuu-utils";
 import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -3886,7 +3919,7 @@ var ColumnList = ({
   onNavigateToColumn,
   ...htmlAttributes
 }) => {
-  const handleChange = useCallback26(
+  const handleChange = useCallback25(
     (evt) => {
       const input = evt.target;
       const listItem = input.closest(`.${classBaseListItem}`);
@@ -3907,7 +3940,7 @@ var ColumnList = ({
     },
     [onChange]
   );
-  const handleClick = useCallback26((evt) => {
+  const handleClick = useCallback25((evt) => {
     const targetEl = evt.target;
     if (targetEl.classList.contains("vuuColumnList-text")) {
       const listItemEl = targetEl.closest(".vuuListItem");
@@ -3963,7 +3996,7 @@ import {
   getCalculatedColumnType as getCalculatedColumnType2
 } from "@vuu-ui/vuu-utils";
 import { FormField as FormField2, FormFieldLabel as FormFieldLabel2, Input as Input2 } from "@salt-ds/core";
-import { useCallback as useCallback31, useRef as useRef21 } from "react";
+import { useCallback as useCallback30, useRef as useRef20 } from "react";
 
 // src/column-expression-input/ColumnExpressionInput.tsx
 import { memo as memo7 } from "react";
@@ -3981,10 +4014,10 @@ import {
 } from "@vuu-ui/vuu-codemirror";
 import { createEl } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback28,
+  useCallback as useCallback27,
   useEffect as useEffect6,
-  useMemo as useMemo6,
-  useRef as useRef18
+  useMemo as useMemo7,
+  useRef as useRef17
 } from "react";
 
 // src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
@@ -4633,7 +4666,7 @@ import {
   getValue,
   syntaxTree
 } from "@vuu-ui/vuu-codemirror";
-import { useCallback as useCallback27 } from "react";
+import { useCallback as useCallback26 } from "react";
 var applyPrefix = (completions, prefix) => prefix ? completions.map((completion) => {
   var _a;
   return {
@@ -4743,7 +4776,7 @@ var promptToSave = (context, onSubmit) => {
   return { from: context.pos, options };
 };
 var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
-  const makeSuggestions2 = useCallback27(
+  const makeSuggestions2 = useCallback26(
     async (context, suggestionType, optionalArgs = {}) => {
       const options = await suggestionProvider.getSuggestions(
         suggestionType,
@@ -4754,7 +4787,7 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
     },
     [suggestionProvider]
   );
-  return useCallback27(
+  return useCallback26(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -5019,11 +5052,11 @@ var useColumnExpressionEditor = ({
   source,
   suggestionProvider
 }) => {
-  const editorRef = useRef18(null);
-  const onSubmitRef = useRef18(noop);
-  const viewRef = useRef18();
+  const editorRef = useRef17(null);
+  const onSubmitRef = useRef17(noop);
+  const viewRef = useRef17();
   const completionFn = useColumnAutoComplete(suggestionProvider, onSubmitRef);
-  const [createState, clearInput, submit] = useMemo6(() => {
+  const [createState, clearInput, submit] = useMemo7(() => {
     const parseExpression = () => {
       const view = getView(viewRef);
       const source2 = view.state.doc.toString();
@@ -5104,7 +5137,7 @@ var useColumnExpressionEditor = ({
       (_a = viewRef.current) == null ? void 0 : _a.destroy();
     };
   }, [completionFn, createState]);
-  const handleBlur = useCallback28(() => {
+  const handleBlur = useCallback27(() => {
     submit();
   }, [submit]);
   return { editorRef, clearInput, onBlur: handleBlur };
@@ -5147,7 +5180,7 @@ import {
   useTypeaheadSuggestions
 } from "@vuu-ui/vuu-data-react";
 import { isNumericColumn as isNumericColumn3, isTextColumn } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback29, useRef as useRef19 } from "react";
+import { useCallback as useCallback28, useRef as useRef18 } from "react";
 
 // src/column-expression-input/column-function-descriptors.ts
 var columnFunctionDescriptors = [
@@ -5600,13 +5633,13 @@ var useColumnExpressionSuggestionProvider = ({
   columns,
   table
 }) => {
-  const findColumn = useCallback29(
+  const findColumn = useCallback28(
     (name2) => name2 ? columns.find((col) => col.name === name2) : void 0,
     [columns]
   );
-  const latestSuggestionsRef = useRef19();
+  const latestSuggestionsRef = useRef18();
   const getTypeaheadSuggestions = useTypeaheadSuggestions();
-  const getSuggestions = useCallback29(
+  const getSuggestions = useCallback28(
     async (suggestionType, options = NONE) => {
       const { columnName, functionName, operator, prefix } = options;
       switch (suggestionType) {
@@ -5671,7 +5704,7 @@ var useColumnExpressionSuggestionProvider = ({
     },
     [columns, findColumn, getTypeaheadSuggestions, table]
   );
-  const isPartialMatch = useCallback29(
+  const isPartialMatch = useCallback28(
     async (valueType, columnName, pattern) => {
       const { current: latestSuggestions } = latestSuggestionsRef;
       let maybe = false;
@@ -5702,7 +5735,7 @@ import {
   setCalculatedColumnName,
   setCalculatedColumnType
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback30, useRef as useRef20, useState as useState10 } from "react";
+import { useCallback as useCallback29, useRef as useRef19, useState as useState10 } from "react";
 var applyDefaults = (column) => {
   const [name2, expression, type] = getCalculatedColumnDetails(column);
   if (type === "") {
@@ -5721,12 +5754,12 @@ var useColumnExpression = ({
   const [column, _setColumn] = useState10(
     applyDefaults(columnProp)
   );
-  const columnRef = useRef20(columnProp);
-  const setColumn = useCallback30((column2) => {
+  const columnRef = useRef19(columnProp);
+  const setColumn = useCallback29((column2) => {
     columnRef.current = column2;
     _setColumn(column2);
   }, []);
-  const onChangeName = useCallback30(
+  const onChangeName = useCallback29(
     (evt) => {
       const { value } = evt.target;
       const newColumn = setCalculatedColumnName(column, value);
@@ -5735,7 +5768,7 @@ var useColumnExpression = ({
     },
     [column, onChangeNameProp, setColumn]
   );
-  const onChangeExpression = useCallback30(
+  const onChangeExpression = useCallback29(
     (value) => {
       const expression = value.trim();
       const { current: column2 } = columnRef;
@@ -5745,7 +5778,7 @@ var useColumnExpression = ({
     },
     [onChangeNameProp, setColumn]
   );
-  const onChangeType = useCallback30(
+  const onChangeType = useCallback29(
     (evt, value) => {
       if (typeof value === "string") {
         const newColumn = setCalculatedColumnType(column, value);
@@ -5772,19 +5805,19 @@ var ColumnExpressionPanel = ({
   tableConfig,
   vuuTable
 }) => {
-  const typeRef = useRef21(null);
+  const typeRef = useRef20(null);
   const { column, onChangeExpression, onChangeName, onChangeType } = useColumnExpression({
     column: columnProp,
     onChangeName: onChangeNameProp
   });
-  const initialExpressionRef = useRef21(
+  const initialExpressionRef = useRef20(
     getCalculatedColumnExpression(column)
   );
   const suggestionProvider = useColumnExpressionSuggestionProvider({
     columns: tableConfig.columns,
     table: vuuTable
   });
-  const handleSubmitExpression = useCallback31(() => {
+  const handleSubmitExpression = useCallback30(() => {
     var _a, _b;
     if (typeRef.current) {
       (_b = (_a = typeRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
@@ -5842,13 +5875,13 @@ import {
 } from "@vuu-ui/vuu-utils";
 import { FormField as FormField6, FormFieldLabel as FormFieldLabel6 } from "@salt-ds/core";
 import cx15 from "clsx";
-import { useCallback as useCallback35, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback34, useMemo as useMemo9 } from "react";
 
 // src/column-formatting-settings/BaseNumericFormattingSettings.tsx
 import { FormField as FormField3, FormFieldLabel as FormFieldLabel3, Input as Input3, Switch as Switch2 } from "@salt-ds/core";
 import { getTypeFormattingFromColumn } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback32,
+  useCallback as useCallback31,
   useState as useState11
 } from "react";
 import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -5859,7 +5892,7 @@ var BaseNumericFormattingSettings = ({
 }) => {
   var _a, _b, _c;
   const [formattingSettings, setFormattingSettings] = useState11(getTypeFormattingFromColumn(column));
-  const handleInputKeyDown = useCallback32(
+  const handleInputKeyDown = useCallback31(
     (evt) => {
       if (evt.key === "Enter" || evt.key === "Tab") {
         onChange(formattingSettings);
@@ -5867,7 +5900,7 @@ var BaseNumericFormattingSettings = ({
     },
     [formattingSettings, onChange]
   );
-  const handleChangeDecimals = useCallback32(
+  const handleChangeDecimals = useCallback31(
     (evt) => {
       const { value } = evt.target;
       const numericValue = value === "" ? void 0 : isNaN(parseInt(value)) ? void 0 : parseInt(value);
@@ -5879,7 +5912,7 @@ var BaseNumericFormattingSettings = ({
     },
     [formattingSettings]
   );
-  const handleChangeAlignDecimals = useCallback32(
+  const handleChangeAlignDecimals = useCallback31(
     (evt) => {
       const { checked } = evt.target;
       const newFormattingSettings = {
@@ -5891,7 +5924,7 @@ var BaseNumericFormattingSettings = ({
     },
     [formattingSettings, onChange]
   );
-  const handleChangeZeroPad = useCallback32(
+  const handleChangeZeroPad = useCallback31(
     (evt) => {
       const { checked } = evt.target;
       const newFormattingSettings = {
@@ -5942,7 +5975,7 @@ var BaseNumericFormattingSettings = ({
 };
 
 // src/column-formatting-settings/LongTypeFormattingSettings.tsx
-import { useCallback as useCallback34 } from "react";
+import { useCallback as useCallback33 } from "react";
 import {
   FormField as FormField5,
   FormFieldLabel as FormFieldLabel5,
@@ -5952,7 +5985,7 @@ import {
 import { isDateTimeColumn, isTypeDescriptor as isTypeDescriptor5 } from "@vuu-ui/vuu-utils";
 
 // src/column-formatting-settings/DateTimeFormattingSettings.tsx
-import { useCallback as useCallback33, useMemo as useMemo7, useState as useState12 } from "react";
+import { useCallback as useCallback32, useMemo as useMemo8, useState as useState12 } from "react";
 import { Dropdown as Dropdown4 } from "@vuu-ui/vuu-ui-controls";
 import {
   defaultPatternsByType,
@@ -5971,18 +6004,18 @@ var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
   var _a, _b;
   const formatting = getTypeFormattingFromColumn2(column);
   const { pattern = fallbackDateTimePattern } = formatting;
-  const toggleValue = useMemo7(() => getToggleValue(pattern), [pattern]);
+  const toggleValue = useMemo8(() => getToggleValue(pattern), [pattern]);
   const [fallbackState, setFallbackState] = useState12(
     {
       time: (_a = pattern.time) != null ? _a : defaultPatternsByType.time,
       date: (_b = pattern.date) != null ? _b : defaultPatternsByType.date
     }
   );
-  const onPatternChange = useCallback33(
+  const onPatternChange = useCallback32(
     (pattern2) => onChange({ ...formatting, pattern: pattern2 }),
     [onChange, formatting]
   );
-  const onDropdownChange = useCallback33(
+  const onDropdownChange = useCallback32(
     (key) => (_, p) => {
       const updatedPattern = { ...pattern != null ? pattern : {}, [key]: p };
       setFallbackState((s) => {
@@ -5996,7 +6029,7 @@ var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
     },
     [onPatternChange, pattern]
   );
-  const onToggleChange = useCallback33(
+  const onToggleChange = useCallback32(
     (evnt) => {
       var _a2, _b2, _c, _d;
       const value = evnt.currentTarget.value;
@@ -6057,7 +6090,7 @@ var classBase18 = "vuuLongColumnFormattingSettings";
 var LongTypeFormattingSettings = (props) => {
   const { column, onChangeType } = props;
   const type = isTypeDescriptor5(column.type) ? column.type.name : column.type;
-  const handleToggleChange = useCallback34(
+  const handleToggleChange = useCallback33(
     (event) => {
       const value = event.currentTarget.value;
       onChangeType(value);
@@ -6098,11 +6131,11 @@ var ColumnFormattingPanel = ({
   onChangeRendering,
   ...htmlAttributes
 }) => {
-  const formattingSettingsForType = useMemo8(
+  const formattingSettingsForType = useMemo9(
     () => formattingSettingsByColType({ column, onChangeFormatting, onChangeType }),
     [column, onChangeFormatting, onChangeType]
   );
-  const ConfigEditor = useMemo8(() => {
+  const ConfigEditor = useMemo9(() => {
     const { type } = column;
     if (isTypeDescriptor6(type) && isColumnTypeRenderer2(type.renderer)) {
       const cellRendererOptions = getCellRendererOptions(type.renderer.name);
@@ -6110,7 +6143,7 @@ var ColumnFormattingPanel = ({
     }
     return void 0;
   }, [column]);
-  const selectedCellRenderer = useMemo8(() => {
+  const selectedCellRenderer = useMemo9(() => {
     const { type } = column;
     const [defaultRenderer] = availableRenderers;
     const rendererName = isTypeDescriptor6(type) && isColumnTypeRenderer2(type.renderer) ? type.renderer.name : void 0;
@@ -6119,7 +6152,7 @@ var ColumnFormattingPanel = ({
     );
     return configuredRenderer != null ? configuredRenderer : defaultRenderer;
   }, [availableRenderers, column]);
-  const handleChangeRenderer = useCallback35(
+  const handleChangeRenderer = useCallback34(
     (_, cellRendererDescriptor) => {
       const renderProps = {
         name: cellRendererDescriptor.name
@@ -6222,10 +6255,10 @@ import {
   updateColumnType
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback36,
+  useCallback as useCallback35,
   useEffect as useEffect7,
-  useMemo as useMemo9,
-  useRef as useRef22,
+  useMemo as useMemo10,
+  useRef as useRef21,
   useState as useState13
 } from "react";
 var integerCellRenderers = [
@@ -6309,9 +6342,9 @@ var useColumnSettings = ({
   const [column, setColumn] = useState13(
     getColumn(tableConfig.columns, columnProp)
   );
-  const columnRef = useRef22(column);
+  const columnRef = useRef21(column);
   const [inEditMode, setEditMode] = useState13(column.name === "::");
-  const handleEditCalculatedcolumn = useCallback36(() => {
+  const handleEditCalculatedcolumn = useCallback35(() => {
     columnRef.current = column;
     setEditMode(true);
   }, [column]);
@@ -6319,13 +6352,13 @@ var useColumnSettings = ({
     setColumn(columnProp);
     setEditMode(columnProp.name === "::");
   }, [columnProp]);
-  const availableRenderers = useMemo9(() => {
+  const availableRenderers = useMemo10(() => {
     return getAvailableCellRenderers(column);
   }, [column]);
-  const handleInputCommit = useCallback36(() => {
+  const handleInputCommit = useCallback35(() => {
     onConfigChange(replaceColumn2(tableConfig, column));
   }, [column, onConfigChange, tableConfig]);
-  const handleChange = useCallback36(
+  const handleChange = useCallback35(
     (evt) => {
       const input = evt.target;
       const fieldName = getFieldName(input);
@@ -6364,10 +6397,10 @@ var useColumnSettings = ({
     },
     [column, onConfigChange, tableConfig]
   );
-  const handleChangeCalculatedColumnName = useCallback36((name2) => {
+  const handleChangeCalculatedColumnName = useCallback35((name2) => {
     setColumn((state) => ({ ...state, name: name2 }));
   }, []);
-  const handleChangeFormatting = useCallback36(
+  const handleChangeFormatting = useCallback35(
     (formatting) => {
       const newColumn = updateColumnFormatting(column, formatting);
       setColumn(newColumn);
@@ -6375,7 +6408,7 @@ var useColumnSettings = ({
     },
     [column, onConfigChange, tableConfig]
   );
-  const handleChangeType = useCallback36(
+  const handleChangeType = useCallback35(
     (type) => {
       const updatedColumn = updateColumnType(column, type);
       setColumn(updatedColumn);
@@ -6383,7 +6416,7 @@ var useColumnSettings = ({
     },
     [column, onConfigChange, tableConfig]
   );
-  const handleChangeRendering = useCallback36(
+  const handleChangeRendering = useCallback35(
     (renderProps) => {
       if (renderProps) {
         const newColumn = updateColumnRenderProps(
@@ -6396,7 +6429,7 @@ var useColumnSettings = ({
     },
     [column, onConfigChange, tableConfig]
   );
-  const navigateColumn = useCallback36(
+  const navigateColumn = useCallback35(
     ({ moveBy }) => {
       const { columns } = tableConfig;
       const index = columns.indexOf(column) + moveBy;
@@ -6407,16 +6440,16 @@ var useColumnSettings = ({
     },
     [column, tableConfig]
   );
-  const navigateNextColumn = useCallback36(() => {
+  const navigateNextColumn = useCallback35(() => {
     navigateColumn({ moveBy: 1 });
   }, [navigateColumn]);
-  const navigatePrevColumn = useCallback36(() => {
+  const navigatePrevColumn = useCallback35(() => {
     navigateColumn({ moveBy: -1 });
   }, [navigateColumn]);
-  const handleSaveCalculatedColumn = useCallback36(() => {
+  const handleSaveCalculatedColumn = useCallback35(() => {
     onCreateCalculatedColumn(column);
   }, [column, onCreateCalculatedColumn]);
-  const handleCancelEdit = useCallback36(() => {
+  const handleCancelEdit = useCallback35(() => {
     if (columnProp.name === "::") {
       onCancelCreateColumn();
     } else {
@@ -6720,8 +6753,8 @@ import {
   useLayoutEffectSkipFirst as useLayoutEffectSkipFirst3
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback37,
-  useMemo as useMemo10,
+  useCallback as useCallback36,
+  useMemo as useMemo11,
   useState as useState15
 } from "react";
 var sortOrderFromAvailableColumns = (availableColumns, columns) => {
@@ -6757,11 +6790,11 @@ var useTableSettings = ({
     availableColumns: availableColumnsProp,
     tableConfig: tableConfigProp
   });
-  const columnItems = useMemo10(
+  const columnItems = useMemo11(
     () => buildColumnItems(availableColumns, tableConfig.columns),
     [availableColumns, tableConfig.columns]
   );
-  const handleMoveListItem = useCallback37(
+  const handleMoveListItem = useCallback36(
     (fromIndex, toIndex) => {
       setColumnState((state) => {
         const newAvailableColumns = moveItem(
@@ -6784,7 +6817,7 @@ var useTableSettings = ({
     },
     [tableConfig.columns]
   );
-  const handleColumnChange = useCallback37(
+  const handleColumnChange = useCallback36(
     (name2, property, value) => {
       const columnItem = columnItems.find((col) => col.name === name2);
       if (property === "subscribed") {
@@ -6838,7 +6871,7 @@ var useTableSettings = ({
     },
     [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
   );
-  const handleChangeColumnLabels = useCallback37((evt) => {
+  const handleChangeColumnLabels = useCallback36((evt) => {
     const { value } = evt.target;
     const columnFormatHeader = value === "0" ? void 0 : value === "1" ? "capitalize" : "uppercase";
     setColumnState((state) => ({
@@ -6849,7 +6882,7 @@ var useTableSettings = ({
       }
     }));
   }, []);
-  const handleChangeTableAttribute = useCallback37(
+  const handleChangeTableAttribute = useCallback36(
     (evt) => {
       const { ariaChecked, value } = evt.target;
       setColumnState((state) => ({