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

package/cjs/index.js

@@ -520,10 +520,10 @@ var HeaderCell = ({
 // ../vuu-table/src/Table.tsx
 var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
 var import_clsx9 = __toESM(require("clsx"));
-var import_react26 = require("react");
+var import_react25 = require("react");
 
 // ../vuu-table/src/Row.tsx
 var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
@@ -677,7 +677,6 @@ var Row = (0, import_react11.memo)(
       "div",
       {
         ...htmlAttributes,
-        "aria-rowindex": row[0] + 1,
         key: `row-${row[0]}`,
         role: "row",
         className,
@@ -709,8 +708,8 @@ Row.displayName = "Row";
 
 // ../vuu-table/src/useTable.ts
 var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
-var import_react24 = require("react");
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_react23 = require("react");
 
 // ../vuu-table/src/context-menu/buildContextMenuDescriptors.ts
 var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
@@ -1029,7 +1028,7 @@ var import_react13 = require("react");
 
 // ../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);
@@ -1297,6 +1296,7 @@ var useInitialValue = (value) => {
 };
 
 // ../vuu-table/src/useKeyboardNavigation.ts
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
 var import_core = require("@salt-ds/core");
 var import_react16 = require("react");
 var rowNavigationKeys = /* @__PURE__ */ new Set([
@@ -1323,51 +1323,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) {
@@ -1435,14 +1390,14 @@ var useKeyboardNavigation = ({
     "[role='columnHeader'],[role='cell']"
   );
   const getTableCellPos = (tableCell) => {
-    var _a2, _b;
+    var _a2;
     if (tableCell.role === "columnHeader") {
       const colIdx = parseInt((_a2 = tableCell.dataset.idx) != null ? _a2 : "-1", 10);
       return [-1, colIdx];
     } else {
       const focusedRow = tableCell.closest("[role='row']");
       if (focusedRow) {
-        const rowIdx = parseInt((_b = focusedRow.ariaRowIndex) != null ? _b : "-1", 10);
+        const rowIdx = (0, import_vuu_utils14.getIndexFromRowElement)(focusedRow);
         const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
         return [rowIdx, colIdx];
       }
@@ -1460,11 +1415,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 });
         }
       }
@@ -1546,18 +1498,9 @@ var useKeyboardNavigation = ({
   );
   const scrollRowIntoViewIfNecessary = (0, import_react16.useCallback)(
     (rowIndex) => {
-      const { current: container } = containerRef;
-      const activeRow = container == null ? void 0 : container.querySelector(
-        `[aria-rowindex="${rowIndex}"]`
-      );
-      if (activeRow) {
-        const [direction, distance] = howFarIsRowOutsideViewport(activeRow);
-        if (direction && distance) {
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-distance", distance, direction });
-        }
-      }
+      requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex });
     },
-    [containerRef, requestScroll]
+    [requestScroll]
   );
   const moveHighlightedRow = (0, import_react16.useCallback)(
     async (key) => {
@@ -1645,9 +1588,9 @@ var useKeyboardNavigation = ({
 };
 
 // ../vuu-table/src/useSelection.ts
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
 var import_react17 = require("react");
-var { IDX: IDX2 } = import_vuu_utils14.metadataKeys;
+var { IDX: IDX2 } = import_vuu_utils15.metadataKeys;
 var NO_SELECTION = [];
 var defaultSelectionKeys = ["Enter", " "];
 var useSelection = ({
@@ -1669,7 +1612,7 @@ var useSelection = ({
       const { [IDX2]: idx } = row;
       const { current: active } = lastActiveRef;
       const { current: selected } = selectedRef;
-      const selectOperation = (0, import_vuu_utils14.isRowSelected)(row) ? import_vuu_utils14.deselectItem : import_vuu_utils14.selectItem;
+      const selectOperation = (0, import_vuu_utils15.isRowSelected)(row) ? import_vuu_utils15.deselectItem : import_vuu_utils15.selectItem;
       const newSelected = selectOperation(
         selectionModel,
         selected,
@@ -1694,7 +1637,7 @@ var useSelection = ({
             `[aria-rowindex="${rowIndex}"]`
           );
           if (rowEl) {
-            (0, import_vuu_utils14.dispatchMouseEvent)(rowEl, "click");
+            (0, import_vuu_utils15.dispatchMouseEvent)(rowEl, "click");
           }
         }
       }
@@ -1709,7 +1652,7 @@ var useSelection = ({
 
 // ../vuu-table/src/useTableContextMenu.ts
 var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
 var import_react18 = require("react");
 var NO_ROWS = [];
 var useTableContextMenu = ({
@@ -1726,8 +1669,8 @@ var useTableContextMenu = ({
       const rowEl = target == null ? void 0 : target.closest("div[role='row']");
       if (cellEl && rowEl) {
         const { selectedRowsCount } = dataSource;
-        const columnMap = (0, import_vuu_utils15.buildColumnMap)(columns);
-        const rowIndex = (0, import_vuu_utils15.getIndexFromRowElement)(rowEl);
+        const columnMap = (0, import_vuu_utils16.buildColumnMap)(columns);
+        const rowIndex = (0, import_vuu_utils16.getIndexFromRowElement)(rowEl);
         const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
         const row = data.find(([idx]) => idx === rowIndex);
         const columnName = columns[cellIndex];
@@ -1746,12 +1689,12 @@ var useTableContextMenu = ({
 };
 
 // ../vuu-table/src/useTableModel.ts
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
 var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
 var import_react19 = require("react");
-var { info } = (0, import_vuu_utils16.logger)("useTableModel");
+var { info } = (0, import_vuu_utils17.logger)("useTableModel");
 var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = import_vuu_utils16.metadataKeys.count;
+var KEY_OFFSET = import_vuu_utils17.metadataKeys.count;
 var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
 var getDataType = (column, tableSchema) => {
   const schemaColumn = tableSchema == null ? void 0 : tableSchema.columns.find(
@@ -1807,13 +1750,13 @@ var useTableModel = (tableConfigProp, dataSource) => {
 function init({ dataSource, tableConfig }) {
   const { columns, ...tableAttributes } = tableConfig;
   const { config: dataSourceConfig, tableSchema } = dataSource;
-  const runtimeColumns = columns.filter((0, import_vuu_utils16.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
+  const runtimeColumns = columns.filter((0, import_vuu_utils17.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
     columnDescriptorToRuntimeColumDescriptor(tableAttributes, tableSchema)
   );
-  const maybePinnedColumns = runtimeColumns.some(import_vuu_utils16.isPinned) ? (0, import_vuu_utils16.sortPinnedColumns)(runtimeColumns) : runtimeColumns;
+  const maybePinnedColumns = runtimeColumns.some(import_vuu_utils17.isPinned) ? (0, import_vuu_utils17.sortPinnedColumns)(runtimeColumns) : runtimeColumns;
   let state = {
     columns: maybePinnedColumns,
-    headings: (0, import_vuu_utils16.getTableHeadings)(maybePinnedColumns),
+    headings: (0, import_vuu_utils17.getTableHeadings)(maybePinnedColumns),
     tableConfig,
     ...tableAttributes
   };
@@ -1841,26 +1784,26 @@ var columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema) =>
     align = getDefaultAlignment(serverDataType),
     key,
     name: name2,
-    label = (0, import_vuu_utils16.getColumnLabel)(column),
+    label = (0, import_vuu_utils17.getColumnLabel)(column),
     width = columnDefaultWidth,
     ...rest
   } = column;
   const runtimeColumnWithDefaults = {
     ...rest,
     align,
-    CellRenderer: (0, import_vuu_utils16.getCellRenderer)(column),
-    HeaderCellContentRenderer: (0, import_vuu_utils16.getColumnHeaderContentRenderer)(column),
-    HeaderCellLabelRenderer: (0, import_vuu_utils16.getColumnHeaderLabelRenderer)(column),
-    clientSideEditValidationCheck: (0, import_vuu_utils16.hasValidationRules)(column.type) ? (0, import_vuu_ui_controls.buildValidationChecker)(column.type.renderer.rules) : void 0,
+    CellRenderer: (0, import_vuu_utils17.getCellRenderer)(column),
+    HeaderCellContentRenderer: (0, import_vuu_utils17.getColumnHeaderContentRenderer)(column),
+    HeaderCellLabelRenderer: (0, import_vuu_utils17.getColumnHeaderLabelRenderer)(column),
+    clientSideEditValidationCheck: (0, import_vuu_utils17.hasValidationRules)(column.type) ? (0, import_vuu_ui_controls.buildValidationChecker)(column.type.renderer.rules) : void 0,
     label: getLabel(label, columnFormatHeader),
     key: key != null ? key : index + KEY_OFFSET,
     name: name2,
     originalIdx: index,
     serverDataType,
-    valueFormatter: (0, import_vuu_utils16.getValueFormatter)(column, serverDataType),
+    valueFormatter: (0, import_vuu_utils17.getValueFormatter)(column, serverDataType),
     width
   };
-  if ((0, import_vuu_utils16.isGroupColumn)(runtimeColumnWithDefaults)) {
+  if ((0, import_vuu_utils17.isGroupColumn)(runtimeColumnWithDefaults)) {
     runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(
       (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(
         col,
@@ -1957,8 +1900,8 @@ function pinColumn2(state, action) {
   const { column, pin } = action;
   const targetColumn = columns.find((col) => col.name === column.name);
   if (targetColumn) {
-    columns = (0, import_vuu_utils16.replaceColumn)(columns, { ...targetColumn, pin });
-    columns = (0, import_vuu_utils16.sortPinnedColumns)(columns);
+    columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, pin });
+    columns = (0, import_vuu_utils17.sortPinnedColumns)(columns);
     return {
       ...state,
       columns
@@ -1973,26 +1916,26 @@ function updateColumnProp(state, action) {
   const targetColumn = columns.find((col) => col.name === column.name);
   if (targetColumn) {
     if (align === "left" || align === "right") {
-      columns = (0, import_vuu_utils16.replaceColumn)(columns, { ...targetColumn, align });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, align });
     }
     if (typeof label === "string") {
-      columns = (0, import_vuu_utils16.replaceColumn)(columns, { ...targetColumn, label });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, label });
     }
     if (typeof resizing === "boolean") {
-      columns = (0, import_vuu_utils16.replaceColumn)(columns, { ...targetColumn, resizing });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, resizing });
     }
     if (typeof hidden === "boolean") {
-      columns = (0, import_vuu_utils16.replaceColumn)(columns, { ...targetColumn, hidden });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, hidden });
     }
     if (typeof width === "number") {
-      columns = (0, import_vuu_utils16.replaceColumn)(columns, { ...targetColumn, width });
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, width });
       const targetConfigColumn = tableConfig.columns.find(
         (col) => col.name === column.name
       );
       if (targetConfigColumn) {
         tableConfig = {
           ...tableConfig,
-          columns: (0, import_vuu_utils16.replaceColumn)(tableConfig.columns, {
+          columns: (0, import_vuu_utils17.replaceColumn)(tableConfig.columns, {
             ...targetConfigColumn,
             width
           })
@@ -2014,30 +1957,31 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
   if (hasGroupBy) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils16.applyGroupByToColumns)(result.columns, groupBy, confirmed)
+      columns: (0, import_vuu_utils17.applyGroupByToColumns)(result.columns, groupBy, confirmed)
     };
   }
   if (hasSort) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils16.applySortToColumns)(result.columns, sort)
+      columns: (0, import_vuu_utils17.applySortToColumns)(result.columns, sort)
     };
   }
   if (hasFilter) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils16.applyFilterToColumns)(result.columns, filter)
+      columns: (0, import_vuu_utils17.applyFilterToColumns)(result.columns, filter)
     };
-  } else if (result.columns.some(import_vuu_utils16.isFilteredColumn)) {
+  } else if (result.columns.some(import_vuu_utils17.isFilteredColumn)) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils16.stripFilterFromColumns)(result.columns)
+      columns: (0, import_vuu_utils17.stripFilterFromColumns)(result.columns)
     };
   }
   return result;
 }
 
 // ../vuu-table/src/useTableScroll.ts
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
 var import_react20 = require("react");
 var getPctScroll = (container) => {
   const { scrollLeft, scrollTop } = container;
@@ -2046,6 +1990,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
@@ -2067,17 +2036,37 @@ var useCallbackRef = ({
   return callbackRef;
 };
 var useTableScroll = ({
-  maxScrollLeft,
-  maxScrollTop,
+  getRowAtPosition,
   onHorizontalScroll,
   onVerticalScroll,
-  rowHeight,
-  viewportRowCount
+  scrollingApiRef,
+  setRange,
+  viewportMeasurements
 }) => {
+  const firstRowRef = (0, import_react20.useRef)(0);
   const contentContainerScrolledRef = (0, import_react20.useRef)(false);
   const scrollPosRef = (0, import_react20.useRef)({ scrollTop: 0, scrollLeft: 0 });
   const scrollbarContainerRef = (0, import_react20.useRef)(null);
   const contentContainerRef = (0, import_react20.useRef)(null);
+  const {
+    appliedPageSize,
+    isVirtualScroll,
+    maxScrollContainerScrollHorizontal: maxScrollLeft,
+    maxScrollContainerScrollVertical: maxScrollTop,
+    rowCount: viewportRowCount,
+    totalHeaderHeight
+  } = viewportMeasurements;
+  const handleVerticalScroll = (0, import_react20.useCallback)(
+    (scrollTop, pctScrollTop) => {
+      onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
+      const firstRow = getRowAtPosition(scrollTop);
+      if (firstRow !== firstRowRef.current) {
+        firstRowRef.current = firstRow;
+        setRange({ from: firstRow, to: firstRow + viewportRowCount + 1 });
+      }
+    },
+    [getRowAtPosition, onVerticalScroll, setRange, viewportRowCount]
+  );
   const handleScrollbarContainerScroll = (0, import_react20.useCallback)(() => {
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
@@ -2087,7 +2076,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,
@@ -2104,17 +2093,17 @@ var useTableScroll = ({
       const [pctScrollLeft, pctScrollTop] = getPctScroll(contentContainer);
       contentContainerScrolledRef.current = true;
       scrollbarContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
-      scrollbarContainer.scrollTop = Math.round(pctScrollTop * maxScrollTop);
+      scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;
       if (scrollPos.scrollTop !== scrollTop) {
         scrollPos.scrollTop = scrollTop;
-        onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
+        handleVerticalScroll(scrollTop, pctScrollTop);
       }
       if (scrollPos.scrollLeft !== scrollLeft) {
         scrollPos.scrollLeft = scrollLeft;
         onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
       }
     }
-  }, [maxScrollLeft, maxScrollTop, onHorizontalScroll, onVerticalScroll]);
+  }, [handleVerticalScroll, maxScrollLeft, maxScrollTop, onHorizontalScroll]);
   const handleAttachScrollbarContainer = (0, import_react20.useCallback)(
     (el) => {
       scrollbarContainerRef.current = el;
@@ -2161,37 +2150,60 @@ var useTableScroll = ({
       if (scrollbarContainer) {
         const { scrollLeft, scrollTop } = scrollbarContainer;
         contentContainerScrolledRef.current = false;
-        if (scrollRequest.type === "scroll-distance") {
-          let newScrollLeft = scrollLeft;
-          let newScrollTop = scrollTop;
-          if (scrollRequest.direction === "up" || scrollRequest.direction === "down") {
-            newScrollTop = Math.min(
-              Math.max(0, scrollTop + scrollRequest.distance),
-              maxScrollTop
-            );
-          } else {
-            newScrollLeft = Math.min(
-              Math.max(0, scrollLeft + scrollRequest.distance),
-              maxScrollLeft
+        if (scrollRequest.type === "scroll-row") {
+          const activeRow = (0, import_vuu_utils18.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;
@@ -2203,8 +2215,46 @@ var useTableScroll = ({
         }
       }
     },
-    [maxScrollLeft, maxScrollTop, rowHeight, viewportRowCount]
+    [
+      appliedPageSize,
+      isVirtualScroll,
+      maxScrollLeft,
+      maxScrollTop,
+      setRange,
+      totalHeaderHeight,
+      viewportRowCount
+    ]
+  );
+  const scrollHandles = (0, import_react20.useMemo)(
+    () => ({
+      scrollToIndex: (rowIndex) => {
+        if (scrollbarContainerRef.current) {
+          const scrollPos = (rowIndex - 30) * 20;
+          scrollbarContainerRef.current.scrollTop = scrollPos;
+        }
+      },
+      scrollToKey: (rowKey) => {
+        console.log(`scrollToKey ${rowKey}`);
+      }
+    }),
+    []
   );
+  (0, import_react20.useImperativeHandle)(
+    scrollingApiRef,
+    () => {
+      if (scrollbarContainerRef.current) {
+        return scrollHandles;
+      } else {
+        return noScrolling;
+      }
+    },
+    [scrollHandles]
+  );
+  (0, import_react20.useEffect)(() => {
+    const { current: from } = firstRowRef;
+    const rowRange = { from, to: from + viewportRowCount + 1 };
+    setRange(rowRange);
+  }, [setRange, viewportRowCount]);
   return {
     /** Ref to be assigned to ScrollbarContainer */
     scrollbarContainerRef: scrollbarContainerCallbackRef,
@@ -2217,14 +2267,16 @@ var useTableScroll = ({
 
 // ../vuu-table/src/useTableViewport.ts
 var import_react21 = require("react");
-var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
-var MAX_RAW_ROWS = 15e5;
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var MAX_RAW_ROWS = 1e5;
 var UNMEASURED_VIEWPORT = {
+  appliedPageSize: 0,
   contentHeight: 0,
   contentWidth: 0,
   getRowAtPosition: () => -1,
   getRowOffset: () => -1,
   horizontalScrollbarHeight: 0,
+  isVirtualScroll: false,
   maxScrollContainerScrollHorizontal: 0,
   maxScrollContainerScrollVertical: 0,
   pinnedWidthLeft: 0,
@@ -2265,57 +2317,58 @@ var useTableViewport = ({
   size
 }) => {
   const pctScrollTopRef = (0, import_react21.useRef)(0);
-  const appliedRowCount = Math.min(rowCount, MAX_RAW_ROWS);
-  const appliedContentHeight = appliedRowCount * rowHeight;
+  const pixelContentHeight = rowHeight * Math.min(rowCount, MAX_RAW_ROWS);
   const virtualContentHeight = rowCount * rowHeight;
-  const virtualisedExtent = virtualContentHeight - appliedContentHeight;
+  const virtualisedExtent = virtualContentHeight - pixelContentHeight;
   const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react21.useMemo)(
     () => measurePinnedColumns(columns),
     [columns]
   );
-  const [actualRowOffset, actualRowAtPosition] = (0, import_react21.useMemo)(
-    () => (0, import_vuu_utils17.actualRowPositioning)(rowHeight),
-    [rowHeight]
-  );
-  const [getRowOffset, getRowAtPosition] = (0, import_react21.useMemo)(() => {
+  const totalHeaderHeightRef = (0, import_react21.useRef)(headerHeight);
+  (0, import_react21.useMemo)(() => {
+    totalHeaderHeightRef.current = headerHeight * (1 + headings.length);
+  }, [headerHeight, headings.length]);
+  const [getRowOffset, getRowAtPosition, isVirtualScroll] = (0, import_react21.useMemo)(() => {
     if (virtualisedExtent) {
-      return (0, import_vuu_utils17.virtualRowPositioning)(
+      return (0, import_vuu_utils19.virtualRowPositioning)(
         rowHeight,
         virtualisedExtent,
         pctScrollTopRef
       );
     } else {
-      return [actualRowOffset, actualRowAtPosition];
+      return (0, import_vuu_utils19.actualRowPositioning)(rowHeight);
     }
-  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
+  }, [virtualisedExtent, rowHeight]);
   const setPctScrollTop = (0, import_react21.useCallback)((scrollPct) => {
     pctScrollTopRef.current = scrollPct;
   }, []);
   return (0, import_react21.useMemo)(() => {
     var _a;
     if (size) {
-      const headingsDepth = headings.length;
+      const { current: totalHeaderHeight } = totalHeaderHeightRef;
       const scrollbarSize = 15;
       const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
       const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
-      const totalHeaderHeight = headerHeight * (1 + headingsDepth);
-      const maxScrollContainerScrollVertical = appliedContentHeight - (((_a = size == null ? void 0 : size.height) != null ? _a : 0) - horizontalScrollbarHeight) + totalHeaderHeight;
+      const maxScrollContainerScrollVertical = pixelContentHeight - (((_a = size == null ? void 0 : size.height) != null ? _a : 0) - horizontalScrollbarHeight) + totalHeaderHeight;
       const maxScrollContainerScrollHorizontal = contentWidth - size.width + pinnedWidthLeft;
       const visibleRows = (size.height - headerHeight) / rowHeight;
-      const count = Number.isInteger(visibleRows) ? visibleRows + 1 : Math.ceil(visibleRows);
+      const count = Number.isInteger(visibleRows) ? visibleRows : Math.ceil(visibleRows);
       const viewportBodyHeight = size.height - totalHeaderHeight;
-      const verticalScrollbarWidth = appliedContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+      const verticalScrollbarWidth = pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+      const appliedPageSize = count * rowHeight * (pixelContentHeight / virtualContentHeight);
       return {
-        contentHeight: appliedContentHeight,
+        appliedPageSize,
+        contentHeight: pixelContentHeight,
+        contentWidth,
         getRowAtPosition,
         getRowOffset,
+        isVirtualScroll,
         horizontalScrollbarHeight,
         maxScrollContainerScrollHorizontal,
         maxScrollContainerScrollVertical,
         pinnedWidthLeft,
         pinnedWidthRight,
         rowCount: count,
-        contentWidth,
         setPctScrollTop,
         totalHeaderHeight,
         verticalScrollbarWidth,
@@ -2325,53 +2378,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
-var import_react22 = require("react");
-var useVirtualViewport = ({
-  getRowAtPosition,
-  setRange,
-  viewportMeasurements
-}) => {
-  const firstRowRef = (0, import_react22.useRef)(0);
-  const { rowCount: viewportRowCount } = viewportMeasurements;
-  const handleVerticalScroll = (0, import_react22.useCallback)(
-    (scrollTop) => {
-      const firstRow = getRowAtPosition(scrollTop);
-      if (firstRow !== firstRowRef.current) {
-        firstRowRef.current = firstRow;
-        setRange({ from: firstRow, to: firstRow + viewportRowCount });
-      }
-    },
-    [getRowAtPosition, setRange, viewportRowCount]
-  );
-  (0, import_react22.useEffect)(() => {
-    const { current: from } = firstRowRef;
-    const rowRange = { from, to: from + viewportRowCount };
-    setRange(rowRange);
-  }, [setRange, viewportRowCount]);
-  return {
-    onVerticalScroll: handleVerticalScroll
-  };
-};
-
 // ../vuu-table/src/useTableAndColumnSettings.ts
 var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
-var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
-var import_react23 = require("react");
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_react22 = require("react");
 var useTableAndColumnSettings = ({
   availableColumns: availableColumnsProps,
   onAvailableColumnsChange,
@@ -2381,11 +2406,11 @@ var useTableAndColumnSettings = ({
   tableConfig
 }) => {
   const dispatchLayoutAction = (0, import_vuu_layout2.useLayoutProviderDispatch)();
-  const showTableSettingsRef = (0, import_react23.useRef)();
-  const [availableColumns, setAvailableColumns] = (0, import_react23.useState)(
+  const showTableSettingsRef = (0, import_react22.useRef)();
+  const [availableColumns, setAvailableColumns] = (0, import_react22.useState)(
     availableColumnsProps
   );
-  const showContextPanel = (0, import_react23.useCallback)(
+  const showContextPanel = (0, import_react22.useCallback)(
     (componentType, title, props) => {
       dispatchLayoutAction({
         type: "set-props",
@@ -2402,17 +2427,17 @@ var useTableAndColumnSettings = ({
     },
     [dispatchLayoutAction]
   );
-  const handleCancelCreateColumn = (0, import_react23.useCallback)(() => {
+  const handleCancelCreateColumn = (0, import_react22.useCallback)(() => {
     requestAnimationFrame(() => {
       var _a;
       (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
     });
   }, []);
-  const handleCreateCalculatedColumn = (0, import_react23.useCallback)(
+  const handleCreateCalculatedColumn = (0, import_react22.useCallback)(
     (column) => {
       const newAvailableColumns = availableColumns.concat({
         name: column.name,
-        serverDataType: (0, import_vuu_utils18.getCalculatedColumnType)(column)
+        serverDataType: (0, import_vuu_utils20.getCalculatedColumnType)(column)
       });
       setAvailableColumns(newAvailableColumns);
       onAvailableColumnsChange == null ? void 0 : onAvailableColumnsChange(newAvailableColumns);
@@ -2424,7 +2449,7 @@ var useTableAndColumnSettings = ({
     },
     [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
   );
-  const showColumnSettingsPanel = (0, import_react23.useCallback)(
+  const showColumnSettingsPanel = (0, import_react22.useCallback)(
     (action) => {
       showContextPanel("ColumnSettings", "Column Settings", {
         column: action.column,
@@ -2443,7 +2468,7 @@ var useTableAndColumnSettings = ({
       tableConfig
     ]
   );
-  const handleAddCalculatedColumn = (0, import_react23.useCallback)(() => {
+  const handleAddCalculatedColumn = (0, import_react22.useCallback)(() => {
     showColumnSettingsPanel({
       column: {
         name: "::",
@@ -2453,7 +2478,7 @@ var useTableAndColumnSettings = ({
       vuuTable: { module: "SIMUL", table: "instruments" }
     });
   }, [showColumnSettingsPanel]);
-  const handleNavigateToColumn = (0, import_react23.useCallback)(
+  const handleNavigateToColumn = (0, import_react22.useCallback)(
     (columnName) => {
       const column = tableConfig.columns.find((c) => c.name === columnName);
       if (column) {
@@ -2467,7 +2492,7 @@ var useTableAndColumnSettings = ({
     },
     [showColumnSettingsPanel, tableConfig.columns]
   );
-  showTableSettingsRef.current = (0, import_react23.useCallback)(() => {
+  showTableSettingsRef.current = (0, import_react22.useCallback)(() => {
     showContextPanel("TableSettings", "DataGrid Settings", {
       availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name: name2, serverDataType }) => ({
         name: name2,
@@ -2498,7 +2523,7 @@ var useTableAndColumnSettings = ({
 var stripInternalProperties = (tableConfig) => {
   return tableConfig;
 };
-var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils19.metadataKeys;
+var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils21.metadataKeys;
 var NULL_DRAG_DROP = {
   draggable: void 0,
   onMouseDown: void 0
@@ -2530,19 +2555,20 @@ var useTable = ({
   onSelectionChange,
   renderBufferSize = 0,
   rowHeight = 20,
+  scrollingApiRef,
   selectionModel,
   size
 }) => {
-  const [rowCount, setRowCount] = (0, import_react24.useState)(dataSource.size);
+  const [rowCount, setRowCount] = (0, import_react23.useState)(dataSource.size);
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
-  const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls2.useDragDropNext : useNullDragDrop;
-  const menuBuilder = (0, import_react24.useMemo)(
+  const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls2.useDragDrop : useNullDragDrop;
+  const menuBuilder = (0, import_react23.useMemo)(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = (0, import_react24.useCallback)((size2) => {
+  const onDataRowcountChange = (0, import_react23.useCallback)((size2) => {
     setRowCount(size2);
   }, []);
   const {
@@ -2552,14 +2578,14 @@ var useTable = ({
     tableAttributes,
     tableConfig
   } = useTableModel(config, dataSource);
-  (0, import_vuu_utils19.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils21.useLayoutEffectSkipFirst)(() => {
     dispatchColumnAction({
       type: "init",
       dataSource,
       tableConfig
     });
   }, [tableConfig, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = (0, import_react24.useCallback)(
+  const applyTableConfigChange = (0, import_react23.useCallback)(
     (config2) => {
       dispatchColumnAction({
         type: "init",
@@ -2570,16 +2596,16 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const [stateColumns, setStateColumns] = (0, import_react24.useState)();
-  const [columns, setColumnSize] = (0, import_react24.useMemo)(() => {
+  const [stateColumns, setStateColumns] = (0, import_react23.useState)();
+  const [columns, setColumnSize] = (0, import_react23.useMemo)(() => {
     const setSize = (columnName, width) => {
-      const cols = (0, import_vuu_utils19.updateColumn)(runtimeColumns, columnName, { width });
+      const cols = (0, import_vuu_utils21.updateColumn)(runtimeColumns, columnName, { width });
       setStateColumns(cols);
     };
     return [stateColumns != null ? stateColumns : runtimeColumns, setSize];
   }, [runtimeColumns, stateColumns]);
-  const columnMap = (0, import_react24.useMemo)(
-    () => (0, import_vuu_utils19.buildColumnMap)(dataSource.columns),
+  const columnMap = (0, import_react23.useMemo)(
+    () => (0, import_vuu_utils21.buildColumnMap)(dataSource.columns),
     [dataSource.columns]
   );
   const {
@@ -2597,9 +2623,9 @@ var useTable = ({
   });
   const initialRange = useInitialValue({
     from: 0,
-    to: viewportMeasurements.rowCount
+    to: viewportMeasurements.rowCount === 0 ? 0 : viewportMeasurements.rowCount + 1
   });
-  const onSubscribed = (0, import_react24.useCallback)(
+  const onSubscribed = (0, import_react23.useCallback)(
     ({ tableSchema }) => {
       if (tableSchema) {
         dispatchColumnAction({
@@ -2621,9 +2647,8 @@ var useTable = ({
     onSubscribed,
     range: initialRange
   });
-  const handleConfigEditedInSettingsPanel = (0, import_react24.useCallback)(
+  const handleConfigEditedInSettingsPanel = (0, import_react23.useCallback)(
     (tableConfig2) => {
-      console.log(`settings changed`);
       dispatchColumnAction({
         type: "init",
         tableConfig: tableConfig2,
@@ -2633,7 +2658,7 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = (0, import_react24.useCallback)(
+  const handleDataSourceConfigChanged = (0, import_react23.useCallback)(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2642,7 +2667,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     dataSource.on("config", (config2, confirmed) => {
       dispatchColumnAction({
         type: "tableConfig",
@@ -2651,14 +2676,14 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchColumnAction]);
-  const handleCreateCalculatedColumn = (0, import_react24.useCallback)(
+  const handleCreateCalculatedColumn = (0, import_react23.useCallback)(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
       applyTableConfigChange(addColumn(tableConfig, column));
     },
     [dataSource, tableConfig, applyTableConfigChange]
   );
-  const hideColumns2 = (0, import_react24.useCallback)(
+  const hideColumns2 = (0, import_react23.useCallback)(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -2672,11 +2697,11 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = (0, import_react24.useCallback)(
+  const pinColumn3 = (0, import_react23.useCallback)(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
-        columns: (0, import_vuu_utils19.updateColumn)(tableConfig.columns, {
+        columns: (0, import_vuu_utils21.updateColumn)(tableConfig.columns, {
           ...action.column,
           pin: action.pin
         })
@@ -2695,7 +2720,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = (0, import_react24.useCallback)(
+  const onPersistentColumnOperation = (0, import_react23.useCallback)(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -2724,10 +2749,10 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = (0, import_react24.useCallback)(
+  const handleSort = (0, import_react23.useCallback)(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
-        dataSource.sort = (0, import_vuu_utils19.applySort)(
+        dataSource.sort = (0, import_vuu_utils21.applySort)(
           dataSource.sort,
           column,
           extendSort,
@@ -2737,16 +2762,16 @@ var useTable = ({
     },
     [dataSource]
   );
-  const onResizeColumn = (0, import_react24.useCallback)(
+  const onResizeColumn = (0, import_react23.useCallback)(
     (phase, columnName, width) => {
       const column = columns.find((column2) => column2.name === columnName);
       if (column) {
         if (phase === "resize") {
-          if ((0, import_vuu_utils19.isValidNumber)(width)) {
+          if ((0, import_vuu_utils21.isValidNumber)(width)) {
             setColumnSize(columnName, width);
           }
         } else if (phase === "end") {
-          if ((0, import_vuu_utils19.isValidNumber)(width)) {
+          if ((0, import_vuu_utils21.isValidNumber)(width)) {
             dispatchColumnAction({
               type: "resizeColumn",
               phase,
@@ -2781,10 +2806,10 @@ var useTable = ({
     },
     [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
   );
-  const onToggleGroup = (0, import_react24.useCallback)(
+  const onToggleGroup = (0, import_react23.useCallback)(
     (row, column) => {
       var _a, _b;
-      const isJson = (0, import_vuu_utils19.isJsonGroup)(column, row);
+      const isJson = (0, import_vuu_utils21.isJsonGroup)(column, row);
       const key = row[KEY];
       if (row[IS_EXPANDED2]) {
         dataSource.closeTreeNode(key, true);
@@ -2818,24 +2843,19 @@ var useTable = ({
     },
     [columns, dataSource, dispatchColumnAction]
   );
-  const { onVerticalScroll } = useVirtualViewport({
-    columns,
-    getRowAtPosition,
-    setRange,
-    viewportMeasurements
-  });
-  const handleVerticalScroll = (0, import_react24.useCallback)(
-    (scrollTop) => {
-      onVerticalScroll(scrollTop);
+  const handleVerticalScroll = (0, import_react23.useCallback)(
+    (_, pctScrollTop) => {
+      setPctScrollTop(pctScrollTop);
     },
-    [onVerticalScroll]
+    [setPctScrollTop]
   );
   const { requestScroll, ...scrollProps } = useTableScroll({
-    maxScrollLeft: viewportMeasurements.maxScrollContainerScrollHorizontal,
-    maxScrollTop: viewportMeasurements.maxScrollContainerScrollVertical,
+    getRowAtPosition,
     rowHeight,
+    scrollingApiRef,
+    setRange,
     onVerticalScroll: handleVerticalScroll,
-    viewportRowCount: viewportMeasurements.rowCount
+    viewportMeasurements
   });
   const {
     highlightedIndexRef,
@@ -2863,7 +2883,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = (0, import_react24.useCallback)(
+  const handleFocus = (0, import_react23.useCallback)(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -2878,15 +2898,15 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = (0, import_react24.useCallback)(
+  const onMoveGroupColumn = (0, import_react23.useCallback)(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = (0, import_react24.useCallback)(
+  const onRemoveGroupColumn = (0, import_react23.useCallback)(
     (column) => {
-      if ((0, import_vuu_utils19.isGroupColumn)(column)) {
+      if ((0, import_vuu_utils21.isGroupColumn)(column)) {
         dataSource.groupBy = [];
       } else {
         if (dataSource && dataSource.groupBy.includes(column.name)) {
@@ -2898,7 +2918,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = (0, import_react24.useCallback)(
+  const handleSelectionChange = (0, import_react23.useCallback)(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -2914,7 +2934,7 @@ var useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = (0, import_react24.useCallback)(
+  const handleKeyDown = (0, import_react23.useCallback)(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -2926,21 +2946,21 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = (0, import_react24.useCallback)(
+  const handleRowClick = (0, import_react23.useCallback)(
     (row, rangeSelect, keepExistingSelection) => {
       selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
       onRowClickProp == null ? void 0 : onRowClickProp(row);
     },
     [onRowClickProp, selectionHookOnRowClick]
   );
-  (0, import_vuu_utils19.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils21.useLayoutEffectSkipFirst)(() => {
     dispatchColumnAction({
       type: "init",
       tableConfig: config,
       dataSource
     });
   }, [config, dataSource, dispatchColumnAction]);
-  const onMoveColumn = (0, import_react24.useCallback)(
+  const onMoveColumn = (0, import_react23.useCallback)(
     (columns2) => {
       console.log(`useTable onMoveColumn`, {
         columns: columns2
@@ -2958,20 +2978,20 @@ var useTable = ({
     },
     [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = (0, import_react24.useCallback)(
+  const handleDropRow = (0, import_react23.useCallback)(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = (0, import_react24.useCallback)(
+  const handleDataEdited = (0, import_react23.useCallback)(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = (0, import_react24.useCallback)(
+  const handleDragStartRow = (0, import_react23.useCallback)(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
-      const rowIndex = (0, import_vuu_utils19.getIndexFromRowElement)(initialDragElement);
+      const rowIndex = (0, import_vuu_utils21.getIndexFromRowElement)(initialDragElement);
       const row = dataRef.current.find((row2) => row2[0] === rowIndex);
       if (row) {
         dragDropState.setPayload(row);
@@ -3003,6 +3023,7 @@ var useTable = ({
     columnMap,
     columns,
     data,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     highlightedIndex: highlightedIndexRef.current,
@@ -3025,37 +3046,37 @@ var useTable = ({
 };
 
 // ../vuu-table/src/table-header/TableHeader.tsx
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
 var import_clsx8 = __toESM(require("clsx"));
 
 // ../vuu-table/src/table-header/useTableHeader.ts
 var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
-var import_react25 = require("react");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_react24 = require("react");
 var useTableHeader = ({
   columns,
   onMoveColumn,
   onSortColumn,
   tableConfig
 }) => {
-  const containerRef = (0, import_react25.useRef)(null);
-  const handleDropColumnHeader = (0, import_react25.useCallback)(
+  const containerRef = (0, import_react24.useRef)(null);
+  const handleDropColumnHeader = (0, import_react24.useCallback)(
     (moveFrom, moveTo) => {
       const column = columns[moveFrom];
-      const orderedColumns = (0, import_vuu_utils20.moveColumnTo)(columns, column, moveTo);
+      const orderedColumns = (0, import_vuu_utils22.moveColumnTo)(columns, column, moveTo);
       const ofColumn = ({ name: name2 }) => (col) => col.name === name2;
       const targetIndex = orderedColumns.findIndex(ofColumn(column));
       const nextColumn = orderedColumns[targetIndex + 1];
       const insertPos = nextColumn ? tableConfig.columns.findIndex(ofColumn(nextColumn)) : -1;
       if (moveTo > moveFrom && insertPos !== -1) {
-        onMoveColumn((0, import_vuu_utils20.moveColumnTo)(tableConfig.columns, column, insertPos - 1));
+        onMoveColumn((0, import_vuu_utils22.moveColumnTo)(tableConfig.columns, column, insertPos - 1));
       } else {
-        onMoveColumn((0, import_vuu_utils20.moveColumnTo)(tableConfig.columns, column, insertPos));
+        onMoveColumn((0, import_vuu_utils22.moveColumnTo)(tableConfig.columns, column, insertPos));
       }
     },
     [columns, onMoveColumn, tableConfig.columns]
   );
-  const handleColumnHeaderClick = (0, import_react25.useCallback)(
+  const handleColumnHeaderClick = (0, import_react24.useCallback)(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -3063,7 +3084,7 @@ var useTableHeader = ({
         ".vuuTableHeaderCell"
       );
       const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
-      const column = (0, import_vuu_utils20.visibleColumnAtIndex)(columns, colIdx);
+      const column = (0, import_vuu_utils22.visibleColumnAtIndex)(columns, colIdx);
       const isAdditive = evt.shiftKey;
       column && onSortColumn(column, isAdditive);
     },
@@ -3073,7 +3094,7 @@ var useTableHeader = ({
     onMouseDown: columnHeaderDragMouseDown,
     draggable: draggableColumn,
     ...dragDropHook
-  } = (0, import_vuu_ui_controls3.useDragDropNext)({
+  } = (0, import_vuu_ui_controls3.useDragDrop)({
     allowDragDrop: true,
     containerRef,
     draggableClassName: `vuuTable`,
@@ -3119,8 +3140,8 @@ var TableHeader = ({
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase24}-col-headings`, ref: containerRef, children: [
     headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase24}-col-headers`, role: "row", children: [
-      columns.filter(import_vuu_utils21.isNotHidden).map(
-        (col, i) => (0, import_vuu_utils21.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      columns.filter(import_vuu_utils23.isNotHidden).map(
+        (col, i) => (0, import_vuu_utils23.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           GroupHeaderCellNext,
           {
             column: col,
@@ -3154,7 +3175,7 @@ var TableHeader = ({
 // ../vuu-table/src/Table.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var classBase7 = "vuuTable";
-var { IDX: IDX3, RENDER_IDX } = import_vuu_utils22.metadataKeys;
+var { IDX: IDX3, RENDER_IDX } = import_vuu_utils24.metadataKeys;
 var TableCore = ({
   Row: Row2 = Row,
   allowDragDrop,
@@ -3175,19 +3196,21 @@ var TableCore = ({
   onRowClick: onRowClickProp,
   onSelect,
   onSelectionChange,
-  renderBufferSize = 0,
+  renderBufferSize = 5,
   rowHeight = 20,
+  scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
   headerHeight = showColumnHeaders ? 25 : 0,
   size
 }) => {
-  const id = (0, import_vuu_utils22.useId)(idProp);
+  const id = (0, import_vuu_utils24.useId)(idProp);
   const {
     columnMap,
     columns,
     data,
     draggableRow,
+    getRowOffset,
     handleContextMenuAction,
     headings,
     highlightedIndex,
@@ -3227,10 +3250,11 @@ var TableCore = ({
     onSelectionChange,
     renderBufferSize,
     rowHeight,
+    scrollingApiRef,
     selectionModel,
     size
   });
-  const className = (0, import_clsx9.default)(`${classBase7}-contentContainer`, {
+  const contentContainerClassName = (0, import_clsx9.default)(`${classBase7}-contentContainer`, {
     [`${classBase7}-colLines`]: tableAttributes.columnSeparators,
     [`${classBase7}-rowLines`]: tableAttributes.rowSeparators,
     // [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
@@ -3267,7 +3291,7 @@ var TableCore = ({
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
-            className,
+            className: contentContainerClassName,
             ref: scrollProps.contentContainerRef,
             style: cssVariables,
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -3295,13 +3319,14 @@ var TableCore = ({
                   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase7}-body`, children: data.map((data2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Row2,
                     {
+                      "aria-rowindex": data2[0] + 1,
                       columnMap,
                       columns,
                       highlighted: highlightedIndex === data2[IDX3],
                       onClick: onRowClick,
                       onDataEdited,
                       row: data2,
-                      offset: rowHeight * data2[IDX3] + viewportMeasurements.totalHeaderHeight,
+                      offset: getRowOffset(data2),
                       onToggleGroup,
                       zebraStripes: tableAttributes.zebraStripes
                     },
@@ -3317,7 +3342,7 @@ var TableCore = ({
     }
   );
 };
-var Table = (0, import_react26.forwardRef)(function TableNext({
+var Table = (0, import_react25.forwardRef)(function TableNext({
   Row: Row2,
   allowDragDrop,
   availableColumns,
@@ -3339,14 +3364,15 @@ var Table = (0, import_react26.forwardRef)(function TableNext({
   onSelectionChange,
   renderBufferSize,
   rowHeight,
+  scrollingApiRef,
   selectionModel,
   showColumnHeaders,
   headerHeight,
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = (0, import_react26.useRef)(null);
-  const [size, setSize] = (0, import_react26.useState)();
+  const containerRef = (0, import_react25.useRef)(null);
+  const [size, setSize] = (0, import_react25.useState)();
   if (config === void 0) {
     throw Error(
       "vuu Table requires config prop. Minimum config is list of Column Descriptors"
@@ -3388,6 +3414,7 @@ var Table = (0, import_react26.forwardRef)(function TableNext({
           onSelectionChange,
           renderBufferSize,
           rowHeight,
+          scrollingApiRef,
           selectionModel,
           showColumnHeaders,
           size
@@ -3398,7 +3425,7 @@ var Table = (0, import_react26.forwardRef)(function TableNext({
 });
 
 // ../vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
 var import_core3 = require("@salt-ds/core");
 
@@ -3406,17 +3433,17 @@ var import_core3 = require("@salt-ds/core");
 var dataAndColumnUnchanged = (p, p1) => p.column === p1.column && p.column.valueFormatter(p.row[p.columnMap[p.column.name]]) === p1.column.valueFormatter(p1.row[p1.columnMap[p1.column.name]]);
 
 // ../vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var CheckboxCell = (0, import_react27.memo)(
+var CheckboxCell = (0, import_react26.memo)(
   ({ column, columnMap, onCommit = import_vuu_ui_controls4.WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
     const isChecked = row[dataIdx];
-    const handleCommit = (0, import_react27.useCallback)(
+    const handleCommit = (0, import_react26.useCallback)(
       (value) => async (evt) => {
         const res = await onCommit(value);
         if (res === true) {
-          (0, import_vuu_utils23.dispatchCustomEvent)(evt.target, "vuu-commit");
+          (0, import_vuu_utils25.dispatchCustomEvent)(evt.target, "vuu-commit");
         }
         return res;
       },
@@ -3427,12 +3454,12 @@ var CheckboxCell = (0, import_react27.memo)(
   dataAndColumnUnchanged
 );
 CheckboxCell.displayName = "CheckboxCell";
-(0, import_vuu_utils23.registerComponent)("checkbox-cell", CheckboxCell, "cell-renderer", {
+(0, import_vuu_utils25.registerComponent)("checkbox-cell", CheckboxCell, "cell-renderer", {
   serverDataType: "boolean"
 });
 
 // ../vuu-table/src/cell-renderers/input-cell/InputCell.tsx
-var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
 var import_core4 = require("@salt-ds/core");
 var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
 var import_clsx10 = __toESM(require("clsx"));
@@ -3471,18 +3498,18 @@ var InputCell = ({
     }
   );
 };
-(0, import_vuu_utils24.registerComponent)("input-cell", InputCell, "cell-renderer", {});
+(0, import_vuu_utils26.registerComponent)("input-cell", InputCell, "cell-renderer", {});
 
 // ../vuu-table/src/cell-renderers/toggle-cell/ToggleCell.tsx
 var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
 var import_clsx11 = __toESM(require("clsx"));
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var classBase9 = "vuuTableToggleCell";
 var getValueList = ({ name: name2, type }) => {
-  if ((0, import_vuu_utils25.isTypeDescriptor)(type) && (0, import_vuu_utils25.isValueListRenderer)(type.renderer)) {
+  if ((0, import_vuu_utils27.isTypeDescriptor)(type) && (0, import_vuu_utils27.isValueListRenderer)(type.renderer)) {
     return type.renderer.values;
   } else {
     throw Error(
@@ -3490,7 +3517,7 @@ var getValueList = ({ name: name2, type }) => {
     );
   }
 };
-var ToggleCell = (0, import_react28.memo)(
+var ToggleCell = (0, import_react27.memo)(
   function ToggleCell2({
     column,
     columnMap,
@@ -3500,11 +3527,11 @@ var ToggleCell = (0, import_react28.memo)(
     const values = getValueList(column);
     const dataIdx = columnMap[column.name];
     const value = row[dataIdx];
-    const handleCommit = (0, import_react28.useCallback)(
+    const handleCommit = (0, import_react27.useCallback)(
       (evt, value2) => {
         return onCommit(value2).then((response) => {
           if (response === true) {
-            (0, import_vuu_utils25.dispatchCustomEvent)(evt.target, "vuu-commit");
+            (0, import_vuu_utils27.dispatchCustomEvent)(evt.target, "vuu-commit");
           }
           return response;
         });
@@ -3525,30 +3552,30 @@ var ToggleCell = (0, import_react28.memo)(
   },
   dataAndColumnUnchanged
 );
-(0, import_vuu_utils25.registerComponent)("toggle-cell", ToggleCell, "cell-renderer", {});
+(0, import_vuu_utils27.registerComponent)("toggle-cell", ToggleCell, "cell-renderer", {});
 
 // ../vuu-table/src/useControlledTableNavigation.ts
 var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
-var import_react29 = require("react");
+var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+var import_react28 = require("react");
 
 // src/cell-renderers/background-cell/BackgroundCell.tsx
-var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
 var import_clsx12 = __toESM(require("clsx"), 1);
-var import_react31 = require("react");
+var import_react30 = require("react");
 
 // src/cell-renderers/background-cell/useDirection.ts
-var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
-var import_react30 = require("react");
+var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
+var import_react29 = require("react");
 var INITIAL_VALUE = [void 0, void 0, void 0, void 0];
 function useDirection(key, value, column) {
   var _a;
-  const ref = (0, import_react30.useRef)();
+  const ref = (0, import_react29.useRef)();
   const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
   const { type: dataType } = column;
-  const decimals = (0, import_vuu_utils27.isTypeDescriptor)(dataType) ? (_a = dataType.formatting) == null ? void 0 : _a.decimals : void 0;
-  const direction = key === prevKey && (0, import_vuu_utils27.isValidNumber)(value) && (0, import_vuu_utils27.isValidNumber)(prevValue) && column === prevColumn ? (0, import_vuu_utils27.getMovingValueDirection)(value, prevDirection, prevValue, decimals) : "";
-  (0, import_react30.useEffect)(() => {
+  const decimals = (0, import_vuu_utils29.isTypeDescriptor)(dataType) ? (_a = dataType.formatting) == null ? void 0 : _a.decimals : void 0;
+  const direction = key === prevKey && (0, import_vuu_utils29.isValidNumber)(value) && (0, import_vuu_utils29.isValidNumber)(prevValue) && column === prevColumn ? (0, import_vuu_utils29.getMovingValueDirection)(value, prevDirection, prevValue, decimals) : "";
+  (0, import_react29.useEffect)(() => {
     ref.current = [key, value, column, direction];
   });
   return direction;
@@ -3558,7 +3585,7 @@ function useDirection(key, value, column) {
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var CHAR_ARROW_UP = String.fromCharCode(11014);
 var CHAR_ARROW_DOWN = String.fromCharCode(11015);
-var { KEY: KEY2 } = import_vuu_utils28.metadataKeys;
+var { KEY: KEY2 } = import_vuu_utils30.metadataKeys;
 var classBase10 = "vuuBackgroundCell";
 var FlashStyle = {
   ArrowOnly: "arrow",
@@ -3566,14 +3593,14 @@ var FlashStyle = {
   ArrowBackground: "arrow-bg"
 };
 var getFlashStyle = (colType) => {
-  if ((0, import_vuu_utils28.isTypeDescriptor)(colType) && colType.renderer) {
+  if ((0, import_vuu_utils30.isTypeDescriptor)(colType) && colType.renderer) {
     if ("flashStyle" in colType.renderer) {
       return colType.renderer["flashStyle"];
     }
   }
   return FlashStyle.BackgroundOnly;
 };
-var BackgroundCell = (0, import_react31.memo)(
+var BackgroundCell = (0, import_react30.memo)(
   function BackgroundCell2({
     column,
     columnMap,
@@ -3584,7 +3611,7 @@ var BackgroundCell = (0, import_react31.memo)(
     const value = row[dataIdx];
     const flashStyle = getFlashStyle(type);
     const direction = useDirection(row[KEY2], value, column);
-    const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === import_vuu_utils28.UP1 || direction === import_vuu_utils28.UP2 ? CHAR_ARROW_UP : direction === import_vuu_utils28.DOWN1 || direction === import_vuu_utils28.DOWN2 ? CHAR_ARROW_DOWN : null : null;
+    const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === import_vuu_utils30.UP1 || direction === import_vuu_utils30.UP2 ? CHAR_ARROW_UP : direction === import_vuu_utils30.DOWN1 || direction === import_vuu_utils30.DOWN2 ? CHAR_ARROW_DOWN : null : null;
     const dirClass = direction ? ` ` + direction : "";
     const className = (0, import_clsx12.default)(classBase10, dirClass, {
       [`${classBase10}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
@@ -3598,7 +3625,7 @@ var BackgroundCell = (0, import_react31.memo)(
   },
   dataAndColumnUnchanged
 );
-(0, import_vuu_utils28.registerComponent)(
+(0, import_vuu_utils30.registerComponent)(
   "vuu.price-move-background",
   BackgroundCell,
   "cell-renderer",
@@ -3611,10 +3638,10 @@ var BackgroundCell = (0, import_react31.memo)(
 );
 
 // src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx
-var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
 var import_core5 = require("@salt-ds/core");
 var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
-var import_react32 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var classBase11 = "vuuBackgroundCellConfiguration";
 var flashOptions = [
@@ -3631,10 +3658,10 @@ var BackgroundCellConfigurationEditor = ({
   column,
   onChangeRendering
 }) => {
-  const [flashStyle, setFlashStyle] = (0, import_react32.useState)(
+  const [flashStyle, setFlashStyle] = (0, import_react31.useState)(
     valueFromColumn(column)
   );
-  const handleSelectionChange = (0, import_react32.useCallback)(
+  const handleSelectionChange = (0, import_react31.useCallback)(
     (_, flashOption) => {
       var _a;
       setFlashStyle(flashOption);
@@ -3660,7 +3687,7 @@ var BackgroundCellConfigurationEditor = ({
     )
   ] });
 };
-(0, import_vuu_utils29.registerConfigurationEditor)(
+(0, import_vuu_utils31.registerConfigurationEditor)(
   "BackgroundCellConfigurationEditor",
   BackgroundCellConfigurationEditor
 );
@@ -3668,12 +3695,12 @@ var BackgroundCellConfigurationEditor = ({
 // src/cell-renderers/dropdown-cell/DropdownCell.tsx
 var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
 var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
-var import_react33 = require("react");
+var import_vuu_utils32 = require("@vuu-ui/vuu-utils");
+var import_react32 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var classBase12 = "vuuTableDropdownCell";
 var openKeys = ["Enter", " "];
-var DropdownCell = (0, import_react33.memo)(
+var DropdownCell = (0, import_react32.memo)(
   function DropdownCell2({
     column,
     columnMap,
@@ -3682,14 +3709,14 @@ var DropdownCell = (0, import_react33.memo)(
   }) {
     const dataIdx = columnMap[column.name];
     const { initialValue, values } = (0, import_vuu_data_react.useLookupValues)(column, row[dataIdx]);
-    const [value, setValue] = (0, import_react33.useState)(null);
-    const handleSelectionChange = (0, import_react33.useCallback)(
+    const [value, setValue] = (0, import_react32.useState)(null);
+    const handleSelectionChange = (0, import_react32.useCallback)(
       (evt, selectedOption) => {
         if (selectedOption) {
           setValue(selectedOption);
           onCommit(selectedOption.value).then((response) => {
             if (response === true && evt) {
-              (0, import_vuu_utils30.dispatchCustomEvent)(evt.target, "vuu-commit");
+              (0, import_vuu_utils32.dispatchCustomEvent)(evt.target, "vuu-commit");
             }
           });
         }
@@ -3710,14 +3737,14 @@ var DropdownCell = (0, import_react33.memo)(
   },
   dataAndColumnUnchanged
 );
-(0, import_vuu_utils30.registerComponent)("dropdown-cell", DropdownCell, "cell-renderer", {});
+(0, import_vuu_utils32.registerComponent)("dropdown-cell", DropdownCell, "cell-renderer", {});
 
 // src/cell-renderers/lookup-cell/LookupCell.tsx
 var import_vuu_data_react2 = require("@vuu-ui/vuu-data-react");
-var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
-var import_react34 = require("react");
+var import_vuu_utils33 = require("@vuu-ui/vuu-utils");
+var import_react33 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var LookupCell = (0, import_react34.memo)(
+var LookupCell = (0, import_react33.memo)(
   function LookupCell2({
     column,
     columnMap,
@@ -3729,10 +3756,10 @@ var LookupCell = (0, import_react34.memo)(
   },
   dataAndColumnUnchanged
 );
-(0, import_vuu_utils31.registerComponent)("lookup-cell", LookupCell, "cell-renderer", {});
+(0, import_vuu_utils33.registerComponent)("lookup-cell", LookupCell, "cell-renderer", {});
 
 // src/cell-renderers/progress-cell/ProgressCell.tsx
-var import_vuu_utils32 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils34 = require("@vuu-ui/vuu-utils");
 var import_clsx13 = __toESM(require("clsx"), 1);
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var classBase13 = "vuuProgressCell";
@@ -3741,11 +3768,11 @@ var ProgressCell = ({ column, columnMap, row }) => {
   const value = row[column.key];
   let showProgress = false;
   let percentage = 0;
-  if ((0, import_vuu_utils32.isTypeDescriptor)(type) && (0, import_vuu_utils32.isColumnTypeRenderer)(type.renderer)) {
+  if ((0, import_vuu_utils34.isTypeDescriptor)(type) && (0, import_vuu_utils34.isColumnTypeRenderer)(type.renderer)) {
     const { associatedField } = type.renderer;
     if (associatedField) {
       const associatedValue = row[columnMap[associatedField]];
-      if (typeof (0, import_vuu_utils32.isValidNumber)(value) && (0, import_vuu_utils32.isValidNumber)(associatedValue)) {
+      if (typeof (0, import_vuu_utils34.isValidNumber)(value) && (0, import_vuu_utils34.isValidNumber)(associatedValue)) {
         percentage = Math.min(Math.round(value / associatedValue * 100), 100);
         percentage = Math.min(Math.round(value / associatedValue * 100), 100);
         showProgress = isFinite(percentage);
@@ -3781,7 +3808,7 @@ var ProgressCell = ({ column, columnMap, row }) => {
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: `${classBase13}-text`, children: `${percentage} %` })
   ] });
 };
-(0, import_vuu_utils32.registerComponent)("vuu.progress", ProgressCell, "cell-renderer", {
+(0, import_vuu_utils34.registerComponent)("vuu.progress", ProgressCell, "cell-renderer", {
   description: "Progress formatter",
   label: "Progress formatter",
   serverDataType: ["long", "int", "double"]
@@ -3791,8 +3818,8 @@ var ProgressCell = ({ column, columnMap, row }) => {
 var import_vuu_ui_controls11 = require("@vuu-ui/vuu-ui-controls");
 var import_core6 = require("@salt-ds/core");
 var import_clsx14 = __toESM(require("clsx"), 1);
-var import_react35 = require("react");
-var import_vuu_utils33 = require("@vuu-ui/vuu-utils");
+var import_react34 = require("react");
+var import_vuu_utils35 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var classBase14 = "vuuColumnList";
 var classBaseListItem = "vuuColumnListItem";
@@ -3810,7 +3837,7 @@ var ColumnListItem = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `${classBase14}-icon`, "data-icon": "draggable" }),
         (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `${classBase14}-icon`, "data-icon": "function" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core6.Switch, { className: `${classBase14}-switch`, checked: item == null ? void 0 : item.subscribed }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `${classBase14}-text`, children: (0, import_vuu_utils33.getColumnLabel)(item) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `${classBase14}-text`, children: (0, import_vuu_utils35.getColumnLabel)(item) }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           import_core6.Checkbox,
           {
@@ -3830,7 +3857,7 @@ var ColumnList = ({
   onNavigateToColumn,
   ...htmlAttributes
 }) => {
-  const handleChange = (0, import_react35.useCallback)(
+  const handleChange = (0, import_react34.useCallback)(
     (evt) => {
       const input = evt.target;
       const listItem = input.closest(`.${classBaseListItem}`);
@@ -3851,7 +3878,7 @@ var ColumnList = ({
     },
     [onChange]
   );
-  const handleClick = (0, import_react35.useCallback)((evt) => {
+  const handleClick = (0, import_react34.useCallback)((evt) => {
     const targetEl = evt.target;
     if (targetEl.classList.contains("vuuColumnList-text")) {
       const listItemEl = targetEl.closest(".vuuListItem");
@@ -3885,23 +3912,23 @@ var ColumnList = ({
 
 // src/column-settings/ColumnSettingsPanel.tsx
 var import_vuu_ui_controls15 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils45 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils47 = require("@vuu-ui/vuu-utils");
 var import_core12 = require("@salt-ds/core");
 var import_clsx17 = __toESM(require("clsx"), 1);
 
 // src/column-expression-panel/ColumnExpressionPanel.tsx
 var import_vuu_ui_controls12 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils38 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils40 = require("@vuu-ui/vuu-utils");
 var import_core7 = require("@salt-ds/core");
-var import_react41 = require("react");
+var import_react40 = require("react");
 
 // src/column-expression-input/ColumnExpressionInput.tsx
-var import_react38 = require("react");
+var import_react37 = require("react");
 
 // src/column-expression-input/useColumnExpressionEditor.ts
 var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
-var import_vuu_utils34 = require("@vuu-ui/vuu-utils");
-var import_react37 = require("react");
+var import_vuu_utils36 = require("@vuu-ui/vuu-utils");
+var import_react36 = require("react");
 
 // src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
 var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
@@ -4534,7 +4561,7 @@ var vuuTheme = import_vuu_codemirror3.EditorView.theme(
 
 // src/column-expression-input/useColumnAutoComplete.ts
 var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
-var import_react36 = require("react");
+var import_react35 = require("react");
 var applyPrefix = (completions, prefix) => prefix ? completions.map((completion) => {
   var _a;
   return {
@@ -4644,7 +4671,7 @@ var promptToSave = (context, onSubmit) => {
   return { from: context.pos, options };
 };
 var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
-  const makeSuggestions2 = (0, import_react36.useCallback)(
+  const makeSuggestions2 = (0, import_react35.useCallback)(
     async (context, suggestionType, optionalArgs = {}) => {
       const options = await suggestionProvider.getSuggestions(
         suggestionType,
@@ -4655,7 +4682,7 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
     },
     [suggestionProvider]
   );
-  return (0, import_react36.useCallback)(
+  return (0, import_react35.useCallback)(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -4906,8 +4933,8 @@ var noop = () => console.log("noooop");
 var hasExpressionType = (completion) => "expressionType" in completion;
 var injectOptionContent = (completion) => {
   if (hasExpressionType(completion)) {
-    const div = (0, import_vuu_utils34.createEl)("div", "expression-type-container");
-    const span = (0, import_vuu_utils34.createEl)("span", "expression-type", completion.expressionType);
+    const div = (0, import_vuu_utils36.createEl)("div", "expression-type-container");
+    const span = (0, import_vuu_utils36.createEl)("span", "expression-type", completion.expressionType);
     div.appendChild(span);
     return div;
   } else {
@@ -4920,11 +4947,11 @@ var useColumnExpressionEditor = ({
   source,
   suggestionProvider
 }) => {
-  const editorRef = (0, import_react37.useRef)(null);
-  const onSubmitRef = (0, import_react37.useRef)(noop);
-  const viewRef = (0, import_react37.useRef)();
+  const editorRef = (0, import_react36.useRef)(null);
+  const onSubmitRef = (0, import_react36.useRef)(noop);
+  const viewRef = (0, import_react36.useRef)();
   const completionFn = useColumnAutoComplete(suggestionProvider, onSubmitRef);
-  const [createState, clearInput, submit] = (0, import_react37.useMemo)(() => {
+  const [createState, clearInput, submit] = (0, import_react36.useMemo)(() => {
     const parseExpression = () => {
       const view = getView(viewRef);
       const source2 = view.state.doc.toString();
@@ -4992,7 +5019,7 @@ var useColumnExpressionEditor = ({
     };
     return [createState2, clearInput2, submitExpression];
   }, [completionFn, onChange, onSubmitExpression, source]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -5005,7 +5032,7 @@ var useColumnExpressionEditor = ({
       (_a = viewRef.current) == null ? void 0 : _a.destroy();
     };
   }, [completionFn, createState]);
-  const handleBlur = (0, import_react37.useCallback)(() => {
+  const handleBlur = (0, import_react36.useCallback)(() => {
     submit();
   }, [submit]);
   return { editorRef, clearInput, onBlur: handleBlur };
@@ -5014,7 +5041,7 @@ var useColumnExpressionEditor = ({
 // src/column-expression-input/ColumnExpressionInput.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var classBase15 = "vuuColumnExpressionInput";
-var ColumnExpressionInput = (0, import_react38.memo)(
+var ColumnExpressionInput = (0, import_react37.memo)(
   ({
     onChange,
     onSubmitExpression,
@@ -5038,8 +5065,8 @@ ColumnExpressionInput.displayName = "ColumnExpressionInput";
 // src/column-expression-input/useColumnExpressionSuggestionProvider.ts
 var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
 var import_vuu_data_react3 = require("@vuu-ui/vuu-data-react");
-var import_vuu_utils36 = require("@vuu-ui/vuu-utils");
-var import_react39 = require("react");
+var import_vuu_utils38 = require("@vuu-ui/vuu-utils");
+var import_react38 = require("react");
 
 // src/column-expression-input/column-function-descriptors.ts
 var columnFunctionDescriptors = [
@@ -5346,7 +5373,7 @@ var columnFunctionDescriptors = [
 ];
 
 // src/column-expression-input/functionDocInfo.ts
-var import_vuu_utils35 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils37 = require("@vuu-ui/vuu-utils");
 var functionDocInfo = ({
   name: name2,
   description,
@@ -5354,25 +5381,25 @@ var functionDocInfo = ({
   params,
   type
 }) => {
-  const rootElement = (0, import_vuu_utils35.createEl)("div", "vuuFunctionDoc");
-  const headingElement = (0, import_vuu_utils35.createEl)("div", "function-heading");
-  const nameElement = (0, import_vuu_utils35.createEl)("span", "function-name", name2);
-  const paramElement = (0, import_vuu_utils35.createEl)("span", "param-list", params.description);
-  const typeElement = (0, import_vuu_utils35.createEl)("span", "function-type", type);
+  const rootElement = (0, import_vuu_utils37.createEl)("div", "vuuFunctionDoc");
+  const headingElement = (0, import_vuu_utils37.createEl)("div", "function-heading");
+  const nameElement = (0, import_vuu_utils37.createEl)("span", "function-name", name2);
+  const paramElement = (0, import_vuu_utils37.createEl)("span", "param-list", params.description);
+  const typeElement = (0, import_vuu_utils37.createEl)("span", "function-type", type);
   headingElement.appendChild(nameElement);
   headingElement.appendChild(paramElement);
   headingElement.appendChild(typeElement);
-  const child2 = (0, import_vuu_utils35.createEl)("p", void 0, description);
+  const child2 = (0, import_vuu_utils37.createEl)("p", void 0, description);
   rootElement.appendChild(headingElement);
   rootElement.appendChild(child2);
   if (example) {
-    const exampleElement = (0, import_vuu_utils35.createEl)("div", "example-container");
-    const expressionElement = (0, import_vuu_utils35.createEl)(
+    const exampleElement = (0, import_vuu_utils37.createEl)("div", "example-container");
+    const expressionElement = (0, import_vuu_utils37.createEl)(
       "div",
       "example-expression",
       example.expression
     );
-    const resultElement = (0, import_vuu_utils35.createEl)("div", "example-result", example.result);
+    const resultElement = (0, import_vuu_utils37.createEl)("div", "example-result", example.result);
     exampleElement.appendChild(expressionElement);
     rootElement.appendChild(exampleElement);
     rootElement.appendChild(resultElement);
@@ -5391,15 +5418,15 @@ var withApplySpace = (suggestions) => suggestions.map((suggestion) => {
 });
 var getValidColumns = (columns, { functionName, operator }) => {
   if (operator) {
-    return columns.filter(import_vuu_utils36.isNumericColumn);
+    return columns.filter(import_vuu_utils38.isNumericColumn);
   } else if (functionName) {
     const fn = columnFunctionDescriptors.find((f) => f.name === functionName);
     if (fn) {
       switch (fn.accepts) {
         case "string":
-          return columns.filter(import_vuu_utils36.isTextColumn);
+          return columns.filter(import_vuu_utils38.isTextColumn);
         case "number":
-          return columns.filter(import_vuu_utils36.isNumericColumn);
+          return columns.filter(import_vuu_utils38.isNumericColumn);
         default:
           return columns;
       }
@@ -5428,7 +5455,7 @@ var arithmeticOperators = [
   { apply: "- ", boost: 2, label: "-", type: "operator" }
 ];
 var getOperators = (column) => {
-  if (column === void 0 || (0, import_vuu_utils36.isNumericColumn)(column)) {
+  if (column === void 0 || (0, import_vuu_utils38.isNumericColumn)(column)) {
     return arithmeticOperators;
   } else {
     return NO_OPERATORS;
@@ -5492,13 +5519,13 @@ var useColumnExpressionSuggestionProvider = ({
   columns,
   table
 }) => {
-  const findColumn = (0, import_react39.useCallback)(
+  const findColumn = (0, import_react38.useCallback)(
     (name2) => name2 ? columns.find((col) => col.name === name2) : void 0,
     [columns]
   );
-  const latestSuggestionsRef = (0, import_react39.useRef)();
+  const latestSuggestionsRef = (0, import_react38.useRef)();
   const getTypeaheadSuggestions = (0, import_vuu_data_react3.useTypeaheadSuggestions)();
-  const getSuggestions = (0, import_react39.useCallback)(
+  const getSuggestions = (0, import_react38.useCallback)(
     async (suggestionType, options = NONE) => {
       const { columnName, functionName, operator, prefix } = options;
       switch (suggestionType) {
@@ -5563,7 +5590,7 @@ var useColumnExpressionSuggestionProvider = ({
     },
     [columns, findColumn, getTypeaheadSuggestions, table]
   );
-  const isPartialMatch = (0, import_react39.useCallback)(
+  const isPartialMatch = (0, import_react38.useCallback)(
     async (valueType, columnName, pattern) => {
       const { current: latestSuggestions } = latestSuggestionsRef;
       let maybe = false;
@@ -5588,10 +5615,10 @@ var useColumnExpressionSuggestionProvider = ({
 };
 
 // src/column-expression-panel/useColumnExpression.ts
-var import_vuu_utils37 = require("@vuu-ui/vuu-utils");
-var import_react40 = require("react");
+var import_vuu_utils39 = require("@vuu-ui/vuu-utils");
+var import_react39 = require("react");
 var applyDefaults = (column) => {
-  const [name2, expression, type] = (0, import_vuu_utils37.getCalculatedColumnDetails)(column);
+  const [name2, expression, type] = (0, import_vuu_utils39.getCalculatedColumnDetails)(column);
   if (type === "") {
     return {
       ...column,
@@ -5605,37 +5632,37 @@ var useColumnExpression = ({
   column: columnProp,
   onChangeName: onChangeNameProp
 }) => {
-  const [column, _setColumn] = (0, import_react40.useState)(
+  const [column, _setColumn] = (0, import_react39.useState)(
     applyDefaults(columnProp)
   );
-  const columnRef = (0, import_react40.useRef)(columnProp);
-  const setColumn = (0, import_react40.useCallback)((column2) => {
+  const columnRef = (0, import_react39.useRef)(columnProp);
+  const setColumn = (0, import_react39.useCallback)((column2) => {
     columnRef.current = column2;
     _setColumn(column2);
   }, []);
-  const onChangeName = (0, import_react40.useCallback)(
+  const onChangeName = (0, import_react39.useCallback)(
     (evt) => {
       const { value } = evt.target;
-      const newColumn = (0, import_vuu_utils37.setCalculatedColumnName)(column, value);
+      const newColumn = (0, import_vuu_utils39.setCalculatedColumnName)(column, value);
       setColumn(newColumn);
       onChangeNameProp == null ? void 0 : onChangeNameProp(newColumn.name);
     },
     [column, onChangeNameProp, setColumn]
   );
-  const onChangeExpression = (0, import_react40.useCallback)(
+  const onChangeExpression = (0, import_react39.useCallback)(
     (value) => {
       const expression = value.trim();
       const { current: column2 } = columnRef;
-      const newColumn = (0, import_vuu_utils37.setCalculatedColumnExpression)(column2, expression);
+      const newColumn = (0, import_vuu_utils39.setCalculatedColumnExpression)(column2, expression);
       setColumn(newColumn);
       onChangeNameProp == null ? void 0 : onChangeNameProp(newColumn.name);
     },
     [onChangeNameProp, setColumn]
   );
-  const onChangeType = (0, import_react40.useCallback)(
+  const onChangeType = (0, import_react39.useCallback)(
     (evt, value) => {
       if (typeof value === "string") {
-        const newColumn = (0, import_vuu_utils37.setCalculatedColumnType)(column, value);
+        const newColumn = (0, import_vuu_utils39.setCalculatedColumnType)(column, value);
         setColumn(newColumn);
         onChangeNameProp == null ? void 0 : onChangeNameProp(newColumn.name);
       }
@@ -5659,19 +5686,19 @@ var ColumnExpressionPanel = ({
   tableConfig,
   vuuTable
 }) => {
-  const typeRef = (0, import_react41.useRef)(null);
+  const typeRef = (0, import_react40.useRef)(null);
   const { column, onChangeExpression, onChangeName, onChangeType } = useColumnExpression({
     column: columnProp,
     onChangeName: onChangeNameProp
   });
-  const initialExpressionRef = (0, import_react41.useRef)(
-    (0, import_vuu_utils38.getCalculatedColumnExpression)(column)
+  const initialExpressionRef = (0, import_react40.useRef)(
+    (0, import_vuu_utils40.getCalculatedColumnExpression)(column)
   );
   const suggestionProvider = useColumnExpressionSuggestionProvider({
     columns: tableConfig.columns,
     table: vuuTable
   });
-  const handleSubmitExpression = (0, import_react41.useCallback)(() => {
+  const handleSubmitExpression = (0, import_react40.useCallback)(() => {
     var _a, _b;
     if (typeRef.current) {
       (_b = (_a = typeRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
@@ -5686,7 +5713,7 @@ var ColumnExpressionPanel = ({
         {
           className: "vuuInput",
           onChange: onChangeName,
-          value: (0, import_vuu_utils38.getCalculatedColumnName)(column)
+          value: (0, import_vuu_utils40.getCalculatedColumnName)(column)
         }
       )
     ] }),
@@ -5710,7 +5737,7 @@ var ColumnExpressionPanel = ({
           className: `${classBase16}-type`,
           onSelectionChange: onChangeType,
           ref: typeRef,
-          selected: (0, import_vuu_utils38.getCalculatedColumnType)(column) || null,
+          selected: (0, import_vuu_utils40.getCalculatedColumnType)(column) || null,
           source: ["double", "long", "string"],
           width: "100%"
         }
@@ -5721,15 +5748,15 @@ var ColumnExpressionPanel = ({
 
 // src/column-formatting-settings/ColumnFormattingPanel.tsx
 var import_vuu_ui_controls14 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils42 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils44 = require("@vuu-ui/vuu-utils");
 var import_core11 = require("@salt-ds/core");
 var import_clsx15 = __toESM(require("clsx"), 1);
-var import_react45 = require("react");
+var import_react44 = require("react");
 
 // src/column-formatting-settings/BaseNumericFormattingSettings.tsx
 var import_core8 = require("@salt-ds/core");
-var import_vuu_utils39 = require("@vuu-ui/vuu-utils");
-var import_react42 = require("react");
+var import_vuu_utils41 = require("@vuu-ui/vuu-utils");
+var import_react41 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var classBase17 = "vuuFormattingSettings";
 var BaseNumericFormattingSettings = ({
@@ -5737,8 +5764,8 @@ var BaseNumericFormattingSettings = ({
   onChangeFormatting: onChange
 }) => {
   var _a, _b, _c;
-  const [formattingSettings, setFormattingSettings] = (0, import_react42.useState)((0, import_vuu_utils39.getTypeFormattingFromColumn)(column));
-  const handleInputKeyDown = (0, import_react42.useCallback)(
+  const [formattingSettings, setFormattingSettings] = (0, import_react41.useState)((0, import_vuu_utils41.getTypeFormattingFromColumn)(column));
+  const handleInputKeyDown = (0, import_react41.useCallback)(
     (evt) => {
       if (evt.key === "Enter" || evt.key === "Tab") {
         onChange(formattingSettings);
@@ -5746,7 +5773,7 @@ var BaseNumericFormattingSettings = ({
     },
     [formattingSettings, onChange]
   );
-  const handleChangeDecimals = (0, import_react42.useCallback)(
+  const handleChangeDecimals = (0, import_react41.useCallback)(
     (evt) => {
       const { value } = evt.target;
       const numericValue = value === "" ? void 0 : isNaN(parseInt(value)) ? void 0 : parseInt(value);
@@ -5758,7 +5785,7 @@ var BaseNumericFormattingSettings = ({
     },
     [formattingSettings]
   );
-  const handleChangeAlignDecimals = (0, import_react42.useCallback)(
+  const handleChangeAlignDecimals = (0, import_react41.useCallback)(
     (evt) => {
       const { checked } = evt.target;
       const newFormattingSettings = {
@@ -5770,7 +5797,7 @@ var BaseNumericFormattingSettings = ({
     },
     [formattingSettings, onChange]
   );
-  const handleChangeZeroPad = (0, import_react42.useCallback)(
+  const handleChangeZeroPad = (0, import_react41.useCallback)(
     (evt) => {
       const { checked } = evt.target;
       const newFormattingSettings = {
@@ -5821,32 +5848,32 @@ var BaseNumericFormattingSettings = ({
 };
 
 // src/column-formatting-settings/LongTypeFormattingSettings.tsx
-var import_react44 = require("react");
+var import_react43 = require("react");
 var import_core10 = require("@salt-ds/core");
-var import_vuu_utils41 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils43 = require("@vuu-ui/vuu-utils");
 
 // src/column-formatting-settings/DateTimeFormattingSettings.tsx
-var import_react43 = require("react");
+var import_react42 = require("react");
 var import_vuu_ui_controls13 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils40 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils42 = require("@vuu-ui/vuu-utils");
 var import_core9 = require("@salt-ds/core");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
   var _a, _b;
-  const formatting = (0, import_vuu_utils40.getTypeFormattingFromColumn)(column);
-  const { pattern = import_vuu_utils40.fallbackDateTimePattern } = formatting;
-  const toggleValue = (0, import_react43.useMemo)(() => getToggleValue(pattern), [pattern]);
-  const [fallbackState, setFallbackState] = (0, import_react43.useState)(
+  const formatting = (0, import_vuu_utils42.getTypeFormattingFromColumn)(column);
+  const { pattern = import_vuu_utils42.fallbackDateTimePattern } = formatting;
+  const toggleValue = (0, import_react42.useMemo)(() => getToggleValue(pattern), [pattern]);
+  const [fallbackState, setFallbackState] = (0, import_react42.useState)(
     {
-      time: (_a = pattern.time) != null ? _a : import_vuu_utils40.defaultPatternsByType.time,
-      date: (_b = pattern.date) != null ? _b : import_vuu_utils40.defaultPatternsByType.date
+      time: (_a = pattern.time) != null ? _a : import_vuu_utils42.defaultPatternsByType.time,
+      date: (_b = pattern.date) != null ? _b : import_vuu_utils42.defaultPatternsByType.date
     }
   );
-  const onPatternChange = (0, import_react43.useCallback)(
+  const onPatternChange = (0, import_react42.useCallback)(
     (pattern2) => onChange({ ...formatting, pattern: pattern2 }),
     [onChange, formatting]
   );
-  const onDropdownChange = (0, import_react43.useCallback)(
+  const onDropdownChange = (0, import_react42.useCallback)(
     (key) => (_, p) => {
       const updatedPattern = { ...pattern != null ? pattern : {}, [key]: p };
       setFallbackState((s) => {
@@ -5860,7 +5887,7 @@ var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
     },
     [onPatternChange, pattern]
   );
-  const onToggleChange = (0, import_react43.useCallback)(
+  const onToggleChange = (0, import_react42.useCallback)(
     (evnt) => {
       var _a2, _b2, _c, _d;
       const value = evnt.currentTarget.value;
@@ -5902,7 +5929,7 @@ var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
         {
           onSelectionChange: onDropdownChange(v),
           selected: pattern[v],
-          source: import_vuu_utils40.supportedDateTimePatterns[v],
+          source: import_vuu_utils42.supportedDateTimePatterns[v],
           width: "100%"
         }
       )
@@ -5920,8 +5947,8 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 var classBase18 = "vuuLongColumnFormattingSettings";
 var LongTypeFormattingSettings = (props) => {
   const { column, onChangeType } = props;
-  const type = (0, import_vuu_utils41.isTypeDescriptor)(column.type) ? column.type.name : column.type;
-  const handleToggleChange = (0, import_react44.useCallback)(
+  const type = (0, import_vuu_utils43.isTypeDescriptor)(column.type) ? column.type.name : column.type;
+  const handleToggleChange = (0, import_react43.useCallback)(
     (event) => {
       const value = event.currentTarget.value;
       onChangeType(value);
@@ -5941,7 +5968,7 @@ var LongTypeFormattingSettings = (props) => {
         }
       )
     ] }),
-    (0, import_vuu_utils41.isDateTimeColumn)(column) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BaseNumericFormattingSettings, { ...props })
+    (0, import_vuu_utils43.isDateTimeColumn)(column) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BaseNumericFormattingSettings, { ...props })
   ] });
 };
 var toggleValues2 = ["number", "date/time"];
@@ -5962,28 +5989,28 @@ var ColumnFormattingPanel = ({
   onChangeRendering,
   ...htmlAttributes
 }) => {
-  const formattingSettingsForType = (0, import_react45.useMemo)(
+  const formattingSettingsForType = (0, import_react44.useMemo)(
     () => formattingSettingsByColType({ column, onChangeFormatting, onChangeType }),
     [column, onChangeFormatting, onChangeType]
   );
-  const ConfigEditor = (0, import_react45.useMemo)(() => {
+  const ConfigEditor = (0, import_react44.useMemo)(() => {
     const { type } = column;
-    if ((0, import_vuu_utils42.isTypeDescriptor)(type) && (0, import_vuu_utils42.isColumnTypeRenderer)(type.renderer)) {
-      const cellRendererOptions = (0, import_vuu_utils42.getCellRendererOptions)(type.renderer.name);
-      return (0, import_vuu_utils42.getConfigurationEditor)(cellRendererOptions == null ? void 0 : cellRendererOptions.configEditor);
+    if ((0, import_vuu_utils44.isTypeDescriptor)(type) && (0, import_vuu_utils44.isColumnTypeRenderer)(type.renderer)) {
+      const cellRendererOptions = (0, import_vuu_utils44.getCellRendererOptions)(type.renderer.name);
+      return (0, import_vuu_utils44.getConfigurationEditor)(cellRendererOptions == null ? void 0 : cellRendererOptions.configEditor);
     }
     return void 0;
   }, [column]);
-  const selectedCellRenderer = (0, import_react45.useMemo)(() => {
+  const selectedCellRenderer = (0, import_react44.useMemo)(() => {
     const { type } = column;
     const [defaultRenderer] = availableRenderers;
-    const rendererName = (0, import_vuu_utils42.isTypeDescriptor)(type) && (0, import_vuu_utils42.isColumnTypeRenderer)(type.renderer) ? type.renderer.name : void 0;
+    const rendererName = (0, import_vuu_utils44.isTypeDescriptor)(type) && (0, import_vuu_utils44.isColumnTypeRenderer)(type.renderer) ? type.renderer.name : void 0;
     const configuredRenderer = availableRenderers.find(
       (renderer) => renderer.name === rendererName
     );
     return configuredRenderer != null ? configuredRenderer : defaultRenderer;
   }, [availableRenderers, column]);
-  const handleChangeRenderer = (0, import_react45.useCallback)(
+  const handleChangeRenderer = (0, import_react44.useCallback)(
     (_, cellRendererDescriptor) => {
       const renderProps = {
         name: cellRendererDescriptor.name
@@ -6042,12 +6069,12 @@ function formattingSettingsByColType(props) {
 
 // src/column-settings/ColumnNameLabel.tsx
 var import_clsx16 = __toESM(require("clsx"), 1);
-var import_vuu_utils43 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils45 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var classBase20 = "vuuColumnNameLabel";
 var ColumnNameLabel = ({ column, onClick }) => {
-  if ((0, import_vuu_utils43.isCalculatedColumn)(column.name)) {
-    const [name2, type, expression] = (0, import_vuu_utils43.getCalculatedColumnDetails)(column);
+  if ((0, import_vuu_utils45.isCalculatedColumn)(column.name)) {
+    const [name2, type, expression] = (0, import_vuu_utils45.getCalculatedColumnDetails)(column);
     const displayName = name2 || "name";
     const displayExpression = "=expression";
     const nameClass = displayName === "name" ? `${classBase20}-placeholder` : void 0;
@@ -6073,15 +6100,15 @@ var ColumnNameLabel = ({ column, onClick }) => {
 };
 
 // src/column-settings/useColumnSettings.ts
-var import_vuu_utils44 = require("@vuu-ui/vuu-utils");
-var import_react46 = require("react");
+var import_vuu_utils46 = require("@vuu-ui/vuu-utils");
+var import_react45 = require("react");
 var integerCellRenderers = [
   {
     description: "Default formatter for columns with data type integer",
     label: "Default Renderer (int, long)",
     name: "default-int"
   },
-  ...(0, import_vuu_utils44.getRegisteredCellRenderers)("int")
+  ...(0, import_vuu_utils46.getRegisteredCellRenderers)("int")
 ];
 var doubleCellRenderers = [
   {
@@ -6089,7 +6116,7 @@ var doubleCellRenderers = [
     label: "Default Renderer (double)",
     name: "default-double"
   },
-  ...(0, import_vuu_utils44.getRegisteredCellRenderers)("double")
+  ...(0, import_vuu_utils46.getRegisteredCellRenderers)("double")
 ];
 var stringCellRenderers = [
   {
@@ -6097,10 +6124,10 @@ var stringCellRenderers = [
     label: "Default Renderer (string)",
     name: "default-string"
   },
-  ...(0, import_vuu_utils44.getRegisteredCellRenderers)("string")
+  ...(0, import_vuu_utils46.getRegisteredCellRenderers)("string")
 ];
 var booleanCellRenderers = [
-  ...(0, import_vuu_utils44.getRegisteredCellRenderers)("boolean")
+  ...(0, import_vuu_utils46.getRegisteredCellRenderers)("boolean")
 ];
 var getAvailableCellRenderers = (column) => {
   switch (column.serverDataType) {
@@ -6153,26 +6180,26 @@ var useColumnSettings = ({
   onCreateCalculatedColumn,
   tableConfig
 }) => {
-  const [column, setColumn] = (0, import_react46.useState)(
+  const [column, setColumn] = (0, import_react45.useState)(
     getColumn(tableConfig.columns, columnProp)
   );
-  const columnRef = (0, import_react46.useRef)(column);
-  const [inEditMode, setEditMode] = (0, import_react46.useState)(column.name === "::");
-  const handleEditCalculatedcolumn = (0, import_react46.useCallback)(() => {
+  const columnRef = (0, import_react45.useRef)(column);
+  const [inEditMode, setEditMode] = (0, import_react45.useState)(column.name === "::");
+  const handleEditCalculatedcolumn = (0, import_react45.useCallback)(() => {
     columnRef.current = column;
     setEditMode(true);
   }, [column]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     setColumn(columnProp);
     setEditMode(columnProp.name === "::");
   }, [columnProp]);
-  const availableRenderers = (0, import_react46.useMemo)(() => {
+  const availableRenderers = (0, import_react45.useMemo)(() => {
     return getAvailableCellRenderers(column);
   }, [column]);
-  const handleInputCommit = (0, import_react46.useCallback)(() => {
+  const handleInputCommit = (0, import_react45.useCallback)(() => {
     onConfigChange(replaceColumn2(tableConfig, column));
   }, [column, onConfigChange, tableConfig]);
-  const handleChange = (0, import_react46.useCallback)(
+  const handleChange = (0, import_react45.useCallback)(
     (evt) => {
       const input = evt.target;
       const fieldName = getFieldName(input);
@@ -6182,13 +6209,13 @@ var useColumnSettings = ({
           setColumn((state) => ({ ...state, label: value }));
           break;
         case "column-name":
-          setColumn((state) => (0, import_vuu_utils44.setCalculatedColumnName)(state, value));
+          setColumn((state) => (0, import_vuu_utils46.setCalculatedColumnName)(state, value));
           break;
         case "column-width":
           setColumn((state) => ({ ...state, width: parseInt(value) }));
           break;
         case "column-alignment":
-          if ((0, import_vuu_utils44.isValidColumnAlignment)(value)) {
+          if ((0, import_vuu_utils46.isValidColumnAlignment)(value)) {
             const newColumn = {
               ...column,
               align: value || void 0
@@ -6198,7 +6225,7 @@ var useColumnSettings = ({
           }
           break;
         case "column-pin":
-          if ((0, import_vuu_utils44.isValidPinLocation)(value)) {
+          if ((0, import_vuu_utils46.isValidPinLocation)(value)) {
             const newColumn = {
               ...column,
               pin: value || void 0
@@ -6211,29 +6238,29 @@ var useColumnSettings = ({
     },
     [column, onConfigChange, tableConfig]
   );
-  const handleChangeCalculatedColumnName = (0, import_react46.useCallback)((name2) => {
+  const handleChangeCalculatedColumnName = (0, import_react45.useCallback)((name2) => {
     setColumn((state) => ({ ...state, name: name2 }));
   }, []);
-  const handleChangeFormatting = (0, import_react46.useCallback)(
+  const handleChangeFormatting = (0, import_react45.useCallback)(
     (formatting) => {
-      const newColumn = (0, import_vuu_utils44.updateColumnFormatting)(column, formatting);
+      const newColumn = (0, import_vuu_utils46.updateColumnFormatting)(column, formatting);
       setColumn(newColumn);
       onConfigChange(replaceColumn2(tableConfig, newColumn));
     },
     [column, onConfigChange, tableConfig]
   );
-  const handleChangeType = (0, import_react46.useCallback)(
+  const handleChangeType = (0, import_react45.useCallback)(
     (type) => {
-      const updatedColumn = (0, import_vuu_utils44.updateColumnType)(column, type);
+      const updatedColumn = (0, import_vuu_utils46.updateColumnType)(column, type);
       setColumn(updatedColumn);
       onConfigChange(replaceColumn2(tableConfig, updatedColumn));
     },
     [column, onConfigChange, tableConfig]
   );
-  const handleChangeRendering = (0, import_react46.useCallback)(
+  const handleChangeRendering = (0, import_react45.useCallback)(
     (renderProps) => {
       if (renderProps) {
-        const newColumn = (0, import_vuu_utils44.updateColumnRenderProps)(
+        const newColumn = (0, import_vuu_utils46.updateColumnRenderProps)(
           column,
           renderProps
         );
@@ -6243,7 +6270,7 @@ var useColumnSettings = ({
     },
     [column, onConfigChange, tableConfig]
   );
-  const navigateColumn = (0, import_react46.useCallback)(
+  const navigateColumn = (0, import_react45.useCallback)(
     ({ moveBy }) => {
       const { columns } = tableConfig;
       const index = columns.indexOf(column) + moveBy;
@@ -6254,16 +6281,16 @@ var useColumnSettings = ({
     },
     [column, tableConfig]
   );
-  const navigateNextColumn = (0, import_react46.useCallback)(() => {
+  const navigateNextColumn = (0, import_react45.useCallback)(() => {
     navigateColumn({ moveBy: 1 });
   }, [navigateColumn]);
-  const navigatePrevColumn = (0, import_react46.useCallback)(() => {
+  const navigatePrevColumn = (0, import_react45.useCallback)(() => {
     navigateColumn({ moveBy: -1 });
   }, [navigateColumn]);
-  const handleSaveCalculatedColumn = (0, import_react46.useCallback)(() => {
+  const handleSaveCalculatedColumn = (0, import_react45.useCallback)(() => {
     onCreateCalculatedColumn(column);
   }, [column, onCreateCalculatedColumn]);
-  const handleCancelEdit = (0, import_react46.useCallback)(() => {
+  const handleCancelEdit = (0, import_react45.useCallback)(() => {
     if (columnProp.name === "::") {
       onCancelCreateColumn();
     } else {
@@ -6296,8 +6323,8 @@ var import_jsx_runtime29 = require("react/jsx-runtime");
 var classBase21 = "vuuColumnSettingsPanel";
 var getColumnLabel3 = (column) => {
   const { name: name2, label } = column;
-  if ((0, import_vuu_utils45.isCalculatedColumn)(name2)) {
-    return label != null ? label : (0, import_vuu_utils45.getCalculatedColumnName)(column);
+  if ((0, import_vuu_utils47.isCalculatedColumn)(name2)) {
+    return label != null ? label : (0, import_vuu_utils47.getCalculatedColumnName)(column);
   } else {
     return label != null ? label : name2;
   }
@@ -6335,7 +6362,7 @@ var ColumnSettingsPanel = ({
   });
   const {
     serverDataType,
-    align = (0, import_vuu_utils45.getDefaultAlignment)(serverDataType),
+    align = (0, import_vuu_utils47.getDefaultAlignment)(serverDataType),
     pin,
     width
   } = column;
@@ -6519,7 +6546,7 @@ var ColumnSettingsPanel = ({
 
 // src/datasource-stats/DatasourceStats.tsx
 var import_clsx18 = __toESM(require("clsx"), 1);
-var import_react47 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var classBase22 = "vuuDatasourceStats";
 var numberFormatter = new Intl.NumberFormat();
@@ -6527,9 +6554,9 @@ var DataSourceStats = ({
   className: classNameProp,
   dataSource
 }) => {
-  const [range, setRange] = (0, import_react47.useState)(dataSource.range);
-  const [size, setSize] = (0, import_react47.useState)(dataSource.size);
-  (0, import_react47.useEffect)(() => {
+  const [range, setRange] = (0, import_react46.useState)(dataSource.range);
+  const [size, setSize] = (0, import_react46.useState)(dataSource.size);
+  (0, import_react46.useEffect)(() => {
     setSize(dataSource.size);
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
@@ -6552,8 +6579,8 @@ var DataSourceStats = ({
 var import_core13 = require("@salt-ds/core");
 
 // src/table-settings/useTableSettings.ts
-var import_vuu_utils46 = require("@vuu-ui/vuu-utils");
-var import_react48 = require("react");
+var import_vuu_utils48 = require("@vuu-ui/vuu-utils");
+var import_react47 = require("react");
 var sortOrderFromAvailableColumns = (availableColumns, columns) => {
   const sortedColumns = [];
   for (const { name: name2 } of availableColumns) {
@@ -6569,7 +6596,7 @@ var buildColumnItems = (availableColumns, configuredColumns) => {
     const configuredColumn = configuredColumns.find((col) => col.name === name2);
     return {
       hidden: configuredColumn == null ? void 0 : configuredColumn.hidden,
-      isCalculated: (0, import_vuu_utils46.isCalculatedColumn)(name2),
+      isCalculated: (0, import_vuu_utils48.isCalculatedColumn)(name2),
       label: configuredColumn == null ? void 0 : configuredColumn.label,
       name: name2,
       serverDataType,
@@ -6583,18 +6610,18 @@ var useTableSettings = ({
   onDataSourceConfigChange,
   tableConfig: tableConfigProp
 }) => {
-  const [{ availableColumns, tableConfig }, setColumnState] = (0, import_react48.useState)({
+  const [{ availableColumns, tableConfig }, setColumnState] = (0, import_react47.useState)({
     availableColumns: availableColumnsProp,
     tableConfig: tableConfigProp
   });
-  const columnItems = (0, import_react48.useMemo)(
+  const columnItems = (0, import_react47.useMemo)(
     () => buildColumnItems(availableColumns, tableConfig.columns),
     [availableColumns, tableConfig.columns]
   );
-  const handleMoveListItem = (0, import_react48.useCallback)(
+  const handleMoveListItem = (0, import_react47.useCallback)(
     (fromIndex, toIndex) => {
       setColumnState((state) => {
-        const newAvailableColumns = (0, import_vuu_utils46.moveItem)(
+        const newAvailableColumns = (0, import_vuu_utils48.moveItem)(
           state.availableColumns,
           fromIndex,
           toIndex
@@ -6614,7 +6641,7 @@ var useTableSettings = ({
     },
     [tableConfig.columns]
   );
-  const handleColumnChange = (0, import_react48.useCallback)(
+  const handleColumnChange = (0, import_react47.useCallback)(
     (name2, property, value) => {
       const columnItem = columnItems.find((col) => col.name === name2);
       if (property === "subscribed") {
@@ -6625,7 +6652,7 @@ var useTableSettings = ({
             tableConfig: {
               ...tableConfig,
               columns: tableConfig.columns.filter(
-                (0, import_vuu_utils46.subscribedOnly)(subscribedColumns)
+                (0, import_vuu_utils48.subscribedOnly)(subscribedColumns)
               )
             }
           }));
@@ -6635,7 +6662,7 @@ var useTableSettings = ({
         } else {
           const newConfig = {
             ...tableConfig,
-            columns: (0, import_vuu_utils46.addColumnToSubscribedColumns)(
+            columns: (0, import_vuu_utils48.addColumnToSubscribedColumns)(
               tableConfig.columns,
               availableColumns,
               name2
@@ -6668,7 +6695,7 @@ var useTableSettings = ({
     },
     [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
   );
-  const handleChangeColumnLabels = (0, import_react48.useCallback)((evt) => {
+  const handleChangeColumnLabels = (0, import_react47.useCallback)((evt) => {
     const { value } = evt.target;
     const columnFormatHeader = value === "0" ? void 0 : value === "1" ? "capitalize" : "uppercase";
     setColumnState((state) => ({
@@ -6679,7 +6706,7 @@ var useTableSettings = ({
       }
     }));
   }, []);
-  const handleChangeTableAttribute = (0, import_react48.useCallback)(
+  const handleChangeTableAttribute = (0, import_react47.useCallback)(
     (evt) => {
       const { ariaChecked, value } = evt.target;
       setColumnState((state) => ({
@@ -6692,7 +6719,7 @@ var useTableSettings = ({
     },
     []
   );
-  (0, import_vuu_utils46.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils48.useLayoutEffectSkipFirst)(() => {
     onConfigChange == null ? void 0 : onConfigChange(tableConfig);
   }, [onConfigChange, tableConfig]);
   const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;