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

package/cjs/index.js

@@ -459,10 +459,10 @@ var HeaderCell = ({
 // src/Table.tsx
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
 var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
 var import_clsx9 = __toESM(require("clsx"));
-var import_react25 = require("react");
+var import_react27 = require("react");
 
 // src/Row.tsx
 var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
@@ -571,9 +571,23 @@ var TableGroupCell = ({
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils5.metadataKeys;
 var classBase6 = "vuuTableRow";
+var RowProxy = (0, import_react11.forwardRef)(
+  function RowProxy2({ height }, forwardedRef) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        className: (0, import_clsx7.default)(classBase6, `${classBase6}-proxy`),
+        ref: forwardedRef,
+        style: { height }
+      }
+    );
+  }
+);
 var Row = (0, import_react11.memo)(
   ({
     className: classNameProp,
+    classNameGenerator,
     columnMap,
     columns,
     highlighted,
@@ -600,14 +614,19 @@ var Row = (0, import_react11.memo)(
       [onClick, row]
     );
     const { True, First, Last } = import_vuu_utils5.RowSelected;
-    const className = (0, import_clsx7.default)(classBase6, classNameProp, {
-      [`${classBase6}-even`]: zebraStripes && rowIndex % 2 === 0,
-      [`${classBase6}-expanded`]: isExpanded,
-      [`${classBase6}-highlighted`]: highlighted,
-      [`${classBase6}-selected`]: selectionStatus & True,
-      [`${classBase6}-selectedStart`]: selectionStatus & First,
-      [`${classBase6}-selectedEnd`]: selectionStatus & Last
-    });
+    const className = (0, import_clsx7.default)(
+      classBase6,
+      classNameProp,
+      classNameGenerator == null ? void 0 : classNameGenerator(row, columnMap),
+      {
+        [`${classBase6}-even`]: zebraStripes && rowIndex % 2 === 0,
+        [`${classBase6}-expanded`]: isExpanded,
+        [`${classBase6}-highlighted`]: highlighted,
+        [`${classBase6}-selected`]: selectionStatus & True,
+        [`${classBase6}-selectedStart`]: selectionStatus & First,
+        [`${classBase6}-selectedEnd`]: selectionStatus & Last
+      }
+    );
     const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
     const handleGroupCellClick = (0, import_react11.useCallback)(
       (evt, column) => {
@@ -807,8 +826,8 @@ TableHeader.displayName = "TableHeader";
 
 // src/useTable.ts
 var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
-var import_react24 = require("react");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_react25 = require("react");
 
 // src/context-menu/buildContextMenuDescriptors.ts
 var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
@@ -1338,7 +1357,6 @@ var useDataSource = ({
       if (isMounted.current) {
         forceUpdate({});
       } else {
-        console.log(`ignore update as we're not mounted`);
       }
     },
     [dataWindow]
@@ -1869,11 +1887,11 @@ var columnReducer = (state, action) => {
   }
 };
 var useTableModel = (tableConfigProp, dataSource) => {
-  const [state, dispatchColumnAction] = (0, import_react20.useReducer)(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
+  const [state, dispatchTableModelAction] = (0, import_react20.useReducer)(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
   const { columns, headings, tableConfig, ...tableAttributes } = state;
   return {
     columns,
-    dispatchColumnAction,
+    dispatchTableModelAction,
     headings,
     tableAttributes,
     tableConfig
@@ -2183,11 +2201,13 @@ var useTableScroll = ({
   onHorizontalScroll,
   onVerticalScroll,
   onVerticalScrollInSitu,
+  rowHeight,
   scrollingApiRef,
   setRange,
   viewportMeasurements
 }) => {
   const firstRowRef = (0, import_react21.useRef)(0);
+  const rowHeightRef = (0, import_react21.useRef)(rowHeight);
   const contentContainerScrolledRef = (0, import_react21.useRef)(false);
   const contentContainerPosRef = (0, import_react21.useRef)({
     scrollTop: 0,
@@ -2469,10 +2489,19 @@ var useTableScroll = ({
     [scrollHandles]
   );
   (0, import_react21.useEffect)(() => {
-    const { current: from } = firstRowRef;
-    const rowRange = { from, to: from + viewportRowCount };
-    setRange(rowRange);
-  }, [setRange, viewportRowCount]);
+    if (rowHeight !== rowHeightRef.current) {
+      rowHeightRef.current = rowHeight;
+      if (contentContainerPosRef.current.scrollTop > 0) {
+        if (contentContainerRef.current) {
+          contentContainerRef.current.scrollTop = 0;
+        }
+      }
+    } else {
+      const { current: from } = firstRowRef;
+      const rowRange = { from, to: from + viewportRowCount };
+      setRange(rowRange);
+    }
+  }, [rowHeight, setRange, viewportRowCount]);
   return {
     columnsWithinViewport: columnsWithinViewportRef.current,
     /** Ref to be assigned to ScrollbarContainer */
@@ -2730,11 +2759,41 @@ var useTableAndColumnSettings = ({
   };
 };
 
+// src/useRowClassNameGenerators.ts
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_react24 = require("react");
+var createClassNameGenerator = (ids) => {
+  const functions = [];
+  ids == null ? void 0 : ids.forEach((id) => {
+    const fn = (0, import_vuu_utils21.getRowClassNameGenerator)(id);
+    if (fn) {
+      functions.push(fn.fn);
+    }
+  });
+  return (row, columnMap) => {
+    const classNames = [];
+    functions == null ? void 0 : functions.forEach((fn) => {
+      const className = fn(row, columnMap);
+      if (className) {
+        classNames.push(className);
+      }
+    });
+    return classNames.join(" ");
+  };
+};
+var useRowClassNameGenerators = ({
+  rowClassNameGenerators
+}) => {
+  return (0, import_react24.useMemo)(() => {
+    return createClassNameGenerator(rowClassNameGenerators);
+  }, [rowClassNameGenerators]);
+};
+
 // src/useTable.ts
 var stripInternalProperties = (tableConfig) => {
   return tableConfig;
 };
-var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils21.metadataKeys;
+var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils22.metadataKeys;
 var NULL_DRAG_DROP = {
   draggable: void 0,
   onMouseDown: void 0
@@ -2770,51 +2829,52 @@ var useTable = ({
   selectionModel,
   size
 }) => {
-  const [rowCount, setRowCount] = (0, import_react24.useState)(dataSource.size);
+  const [rowCount, setRowCount] = (0, import_react25.useState)(dataSource.size);
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
+  const rowClassNameGenerator = useRowClassNameGenerators(config);
   const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls4.useDragDrop : useNullDragDrop;
-  const menuBuilder = (0, import_react24.useMemo)(
+  const menuBuilder = (0, import_react25.useMemo)(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = (0, import_react24.useCallback)((size2) => {
+  const onDataRowcountChange = (0, import_react25.useCallback)((size2) => {
     setRowCount(size2);
   }, []);
   const {
     columns,
-    dispatchColumnAction,
+    dispatchTableModelAction,
     headings,
     tableAttributes,
     tableConfig
   } = useTableModel(config, dataSource);
-  (0, import_vuu_utils21.useLayoutEffectSkipFirst)(() => {
-    dispatchColumnAction({
+  (0, import_vuu_utils22.useLayoutEffectSkipFirst)(() => {
+    dispatchTableModelAction({
       type: "init",
       tableConfig: config,
       dataSource
     });
-  }, [config, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = (0, import_react24.useCallback)(
+  }, [config, dataSource, dispatchTableModelAction]);
+  const applyTableConfigChange = (0, import_react25.useCallback)(
     (config2) => {
-      dispatchColumnAction({
+      dispatchTableModelAction({
         type: "init",
         tableConfig: config2,
         dataSource
       });
       onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(config2));
     },
-    [dataSource, dispatchColumnAction, onConfigChange]
+    [dataSource, dispatchTableModelAction, onConfigChange]
   );
-  const columnMap = (0, import_react24.useMemo)(
-    () => (0, import_vuu_utils21.buildColumnMap)(dataSource.columns),
+  const columnMap = (0, import_react25.useMemo)(
+    () => (0, import_vuu_utils22.buildColumnMap)(dataSource.columns),
     [dataSource.columns]
   );
-  const onSubscribed = (0, import_react24.useCallback)(
+  const onSubscribed = (0, import_react25.useCallback)(
     ({ tableSchema }) => {
       if (tableSchema) {
-        dispatchColumnAction({
+        dispatchTableModelAction({
           type: "setTableSchema",
           tableSchema
         });
@@ -2822,7 +2882,7 @@ var useTable = ({
         console.log("subscription message with no schema");
       }
     },
-    [dispatchColumnAction]
+    [dispatchTableModelAction]
   );
   const {
     getRowAtPosition,
@@ -2861,18 +2921,18 @@ var useTable = ({
     onVerticalScrollInSitu: viewportHookSetInSituRowOffset,
     viewportMeasurements
   });
-  const handleConfigEditedInSettingsPanel = (0, import_react24.useCallback)(
+  const handleConfigEditedInSettingsPanel = (0, import_react25.useCallback)(
     (tableConfig2) => {
-      dispatchColumnAction({
+      dispatchTableModelAction({
         type: "init",
         tableConfig: tableConfig2,
         dataSource
       });
       onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(tableConfig2));
     },
-    [dataSource, dispatchColumnAction, onConfigChange]
+    [dataSource, dispatchTableModelAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = (0, import_react24.useCallback)(
+  const handleDataSourceConfigChanged = (0, import_react25.useCallback)(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2881,23 +2941,30 @@ var useTable = ({
     },
     [dataSource]
   );
-  (0, import_react24.useEffect)(() => {
-    dataSource.on("config", (config2, confirmed) => {
-      dispatchColumnAction({
+  (0, import_react25.useEffect)(() => {
+    dataSource.on("config", (config2, confirmed, changes) => {
+      const scrollSensitiveChanges = (changes == null ? void 0 : changes.filterChanged) || (changes == null ? void 0 : changes.groupByChanged);
+      if (scrollSensitiveChanges && dataSource.range.from > 0) {
+        requestScroll({
+          type: "scroll-end",
+          direction: "home"
+        });
+      }
+      dispatchTableModelAction({
         type: "tableConfig",
         ...config2,
         confirmed
       });
     });
-  }, [dataSource, dispatchColumnAction]);
-  const handleCreateCalculatedColumn = (0, import_react24.useCallback)(
+  }, [dataSource, dispatchTableModelAction, requestScroll]);
+  const handleCreateCalculatedColumn = (0, import_react25.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_react25.useCallback)(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -2911,11 +2978,11 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = (0, import_react24.useCallback)(
+  const pinColumn3 = (0, import_react25.useCallback)(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
-        columns: (0, import_vuu_utils21.updateColumn)(tableConfig.columns, {
+        columns: (0, import_vuu_utils22.updateColumn)(tableConfig.columns, {
           ...action.column,
           pin: action.pin
         })
@@ -2934,7 +3001,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = (0, import_react24.useCallback)(
+  const onPersistentColumnOperation = (0, import_react25.useCallback)(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -2947,12 +3014,12 @@ var useTable = ({
           case "pinColumn":
             return pinColumn3(action);
           default:
-            dispatchColumnAction(action);
+            dispatchTableModelAction(action);
         }
       }
     },
     [
-      dispatchColumnAction,
+      dispatchTableModelAction,
       hideColumns2,
       pinColumn3,
       showColumnSettingsPanel,
@@ -2963,10 +3030,10 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = (0, import_react24.useCallback)(
+  const handleSort = (0, import_react25.useCallback)(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
-        dataSource.sort = (0, import_vuu_utils21.applySort)(
+        dataSource.sort = (0, import_vuu_utils22.applySort)(
           dataSource.sort,
           column,
           extendSort,
@@ -2976,8 +3043,8 @@ var useTable = ({
     },
     [dataSource]
   );
-  const resizeCells = (0, import_react24.useRef)();
-  const onResizeColumn = (0, import_react24.useCallback)(
+  const resizeCells = (0, import_react25.useRef)();
+  const onResizeColumn = (0, import_react25.useCallback)(
     (phase, columnName, width) => {
       var _a, _b, _c;
       const column = columns.find((column2) => column2.name === columnName);
@@ -2988,8 +3055,8 @@ var useTable = ({
           });
         } else if (phase === "end") {
           resizeCells.current = void 0;
-          if ((0, import_vuu_utils21.isValidNumber)(width)) {
-            dispatchColumnAction({
+          if ((0, import_vuu_utils22.isValidNumber)(width)) {
+            dispatchTableModelAction({
               type: "resizeColumn",
               phase,
               column,
@@ -3012,7 +3079,7 @@ var useTable = ({
               `.vuuTableCell${byColIndex},.vuuTableHeaderCell${byColIndex}`
             )) != null ? _c : []
           );
-          dispatchColumnAction({
+          dispatchTableModelAction({
             type: "resizeColumn",
             phase,
             column,
@@ -3025,12 +3092,18 @@ var useTable = ({
         );
       }
     },
-    [columns, dispatchColumnAction, onConfigChange, tableConfig, containerRef]
+    [
+      columns,
+      dispatchTableModelAction,
+      onConfigChange,
+      tableConfig,
+      containerRef
+    ]
   );
-  const onToggleGroup = (0, import_react24.useCallback)(
+  const onToggleGroup = (0, import_react25.useCallback)(
     (row, column) => {
       var _a, _b;
-      const isJson = (0, import_vuu_utils21.isJsonGroup)(column, row, columnMap);
+      const isJson = (0, import_vuu_utils22.isJsonGroup)(column, row, columnMap);
       const key = row[KEY];
       if (row[IS_EXPANDED2]) {
         dataSource.closeTreeNode(key, true);
@@ -3038,7 +3111,7 @@ var useTable = ({
           const idx = columns.indexOf(column);
           const rows = (_a = dataSource.getRowsAtDepth) == null ? void 0 : _a.call(dataSource, idx + 1);
           if (rows && !rows.some((row2) => row2[IS_EXPANDED2] || row2[IS_LEAF2])) {
-            dispatchColumnAction({
+            dispatchTableModelAction({
               type: "hideColumns",
               columns: columns.slice(idx + 2)
             });
@@ -3054,7 +3127,7 @@ var useTable = ({
             columnsToShow.push(columns[idx + 1]);
           }
           if (columnsToShow.some((col) => col.hidden)) {
-            dispatchColumnAction({
+            dispatchTableModelAction({
               type: "showColumns",
               columns: columnsToShow
             });
@@ -3062,7 +3135,7 @@ var useTable = ({
         }
       }
     },
-    [columnMap, columns, dataSource, dispatchColumnAction]
+    [columnMap, columns, dataSource, dispatchTableModelAction]
   );
   const {
     highlightedIndexRef,
@@ -3090,7 +3163,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = (0, import_react24.useCallback)(
+  const handleFocus = (0, import_react25.useCallback)(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -3105,15 +3178,15 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = (0, import_react24.useCallback)(
+  const onMoveGroupColumn = (0, import_react25.useCallback)(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = (0, import_react24.useCallback)(
+  const onRemoveGroupColumn = (0, import_react25.useCallback)(
     (column) => {
-      if ((0, import_vuu_utils21.isGroupColumn)(column)) {
+      if ((0, import_vuu_utils22.isGroupColumn)(column)) {
         dataSource.groupBy = [];
       } else {
         if (dataSource && dataSource.groupBy.includes(column.name)) {
@@ -3125,7 +3198,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = (0, import_react24.useCallback)(
+  const handleSelectionChange = (0, import_react25.useCallback)(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
@@ -3141,7 +3214,7 @@ var useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = (0, import_react24.useCallback)(
+  const handleKeyDown = (0, import_react25.useCallback)(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -3153,42 +3226,42 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = (0, import_react24.useCallback)(
+  const handleRowClick = (0, import_react25.useCallback)(
     (row, rangeSelect, keepExistingSelection) => {
       selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
       onRowClickProp == null ? void 0 : onRowClickProp(row);
     },
     [onRowClickProp, selectionHookOnRowClick]
   );
-  const onMoveColumn = (0, import_react24.useCallback)(
+  const onMoveColumn = (0, import_react25.useCallback)(
     (columns2) => {
       const newTableConfig = {
         ...tableConfig,
         columns: columns2
       };
-      dispatchColumnAction({
+      dispatchTableModelAction({
         type: "init",
         tableConfig: newTableConfig,
         dataSource
       });
       onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(newTableConfig));
     },
-    [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
+    [dataSource, dispatchTableModelAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = (0, import_react24.useCallback)(
+  const handleDropRow = (0, import_react25.useCallback)(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = (0, import_react24.useCallback)(
+  const handleDataEdited = (0, import_react25.useCallback)(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = (0, import_react24.useCallback)(
+  const handleDragStartRow = (0, import_react25.useCallback)(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
-      const rowIndex = (0, import_vuu_utils21.getIndexFromRowElement)(initialDragElement);
+      const rowIndex = (0, import_vuu_utils22.getIndexFromRowElement)(initialDragElement);
       const row = dataRef.current.find((row2) => row2[0] === rowIndex);
       if (row) {
         dragDropState.setPayload(row);
@@ -3211,6 +3284,7 @@ var useTable = ({
   return {
     ...containerProps,
     "aria-rowcount": dataSource.size,
+    rowClassNameGenerator,
     draggableRow,
     onBlur: editingBlur,
     onDoubleClick: editingDoubleClick,
@@ -3242,10 +3316,48 @@ var useTable = ({
   };
 };
 
+// src/useRowHeight.ts
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
+var import_react26 = require("react");
+var useRowHeight = ({
+  rowHeight: rowHeightProp = 0
+}) => {
+  const [rowHeight, setRowHeight] = (0, import_react26.useState)(rowHeightProp);
+  const heightRef = (0, import_react26.useRef)(rowHeight);
+  const resizeObserver = (0, import_react26.useMemo)(() => {
+    return new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { height: measuredHeight } = entry.contentRect;
+        const newHeight = Math.round(measuredHeight);
+        if ((0, import_vuu_utils23.isValidNumber)(newHeight) && heightRef.current !== newHeight) {
+          heightRef.current = newHeight;
+          setRowHeight(newHeight);
+        }
+      }
+    });
+  }, []);
+  const rowRef = (0, import_react26.useCallback)(
+    (el) => {
+      if (el) {
+        if (rowHeightProp === 0) {
+          const { height } = el.getBoundingClientRect();
+          console.log(`measured rowHeight = ${height}`);
+          resizeObserver.observe(el);
+          setRowHeight(height);
+        }
+      } else {
+        resizeObserver.disconnect();
+      }
+    },
+    [resizeObserver, rowHeightProp]
+  );
+  return { rowHeight, rowRef };
+};
+
 // 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,
@@ -3267,14 +3379,14 @@ var TableCore = ({
   onSelect,
   onSelectionChange,
   renderBufferSize = 5,
-  rowHeight = 20,
+  rowHeight,
   scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
-  headerHeight = showColumnHeaders ? 25 : 0,
+  headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,
   size
 }) => {
-  const id = (0, import_vuu_utils22.useId)(idProp);
+  const id = (0, import_vuu_utils24.useId)(idProp);
   const {
     columnMap,
     columns,
@@ -3284,6 +3396,7 @@ var TableCore = ({
     handleContextMenuAction,
     headings,
     highlightedIndex,
+    menuBuilder,
     onDataEdited,
     onMoveColumn,
     onMoveGroupColumn,
@@ -3292,7 +3405,7 @@ var TableCore = ({
     onRowClick,
     onSortColumn,
     onToggleGroup,
-    menuBuilder,
+    rowClassNameGenerator,
     scrollProps,
     tableAttributes,
     tableConfig,
@@ -3336,7 +3449,7 @@ var TableCore = ({
     "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
     "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
     "--header-height": `${headerHeight}px`,
-    "--row-height": `${rowHeight}px`,
+    "--row-height-prop": `${rowHeight}px`,
     "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
     "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
     "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
@@ -3389,6 +3502,7 @@ var TableCore = ({
                     Row2,
                     {
                       "aria-rowindex": data2[0] + 1,
+                      classNameGenerator: rowClassNameGenerator,
                       columnMap,
                       columns: scrollProps.columnsWithinViewport,
                       highlighted: highlightedIndex === data2[IDX3],
@@ -3412,7 +3526,7 @@ var TableCore = ({
     }
   );
 };
-var Table = (0, import_react25.forwardRef)(function TableNext({
+var Table = (0, import_react27.forwardRef)(function TableNext({
   Row: Row2,
   allowDragDrop,
   availableColumns,
@@ -3433,7 +3547,7 @@ var Table = (0, import_react25.forwardRef)(function TableNext({
   onSelect,
   onSelectionChange,
   renderBufferSize,
-  rowHeight,
+  rowHeight: rowHeightProp,
   scrollingApiRef,
   selectionModel,
   showColumnHeaders,
@@ -3441,8 +3555,9 @@ var Table = (0, import_react25.forwardRef)(function TableNext({
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = (0, import_react25.useRef)(null);
-  const [size, setSize] = (0, import_react25.useState)();
+  const containerRef = (0, import_react27.useRef)(null);
+  const [size, setSize] = (0, import_react27.useState)();
+  const { rowHeight, rowRef } = useRowHeight({ rowHeight: rowHeightProp });
   if (config === void 0) {
     throw Error(
       "vuu Table requires config prop. Minimum config is list of Column Descriptors"
@@ -3451,7 +3566,7 @@ var Table = (0, import_react25.forwardRef)(function TableNext({
   if (dataSource === void 0) {
     throw Error("vuu Table requires dataSource prop");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     import_vuu_ui_controls5.MeasuredContainer,
     {
       ...htmlAttributes,
@@ -3459,56 +3574,59 @@ var Table = (0, import_react25.forwardRef)(function TableNext({
       id,
       onResize: setSize,
       ref: (0, import_core2.useForkRef)(containerRef, forwardedRef),
-      children: size ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        TableCore,
-        {
-          Row: Row2,
-          allowDragDrop,
-          availableColumns,
-          config,
-          containerRef,
-          dataSource,
-          disableFocus,
-          headerHeight,
-          highlightedIndex,
-          id,
-          navigationStyle,
-          onAvailableColumnsChange,
-          onConfigChange,
-          onDragStart,
-          onDrop,
-          onFeatureInvocation,
-          onHighlight,
-          onRowClick,
-          onSelect,
-          onSelectionChange,
-          renderBufferSize,
-          rowHeight,
-          scrollingApiRef,
-          selectionModel,
-          showColumnHeaders,
-          size
-        }
-      ) : null
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RowProxy, { ref: rowRef, height: rowHeightProp }),
+        size && rowHeight ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          TableCore,
+          {
+            Row: Row2,
+            allowDragDrop,
+            availableColumns,
+            config,
+            containerRef,
+            dataSource,
+            disableFocus,
+            headerHeight,
+            highlightedIndex,
+            id,
+            navigationStyle,
+            onAvailableColumnsChange,
+            onConfigChange,
+            onDragStart,
+            onDrop,
+            onFeatureInvocation,
+            onHighlight,
+            onRowClick,
+            onSelect,
+            onSelectionChange,
+            renderBufferSize,
+            rowHeight,
+            scrollingApiRef,
+            selectionModel,
+            showColumnHeaders,
+            size
+          }
+        ) : null
+      ]
     }
   );
 });
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
 var import_core3 = require("@salt-ds/core");
-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_react26.memo)(
+var CheckboxCell = (0, import_react28.memo)(
   ({ column, columnMap, onCommit = import_vuu_ui_controls6.WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
-    const isChecked = row[dataIdx];
-    const handleCommit = (0, import_react26.useCallback)(
+    const isChecked = !!row[dataIdx];
+    const handleCommit = (0, import_react28.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;
       },
@@ -3516,15 +3634,15 @@ var CheckboxCell = (0, import_react26.memo)(
     );
     return column.editable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core3.Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_ui_controls6.CheckboxIcon, { checked: isChecked, disabled: true });
   },
-  import_vuu_utils23.dataAndColumnUnchanged
+  import_vuu_utils25.dataColumnAndKeyUnchanged
 );
 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"
 });
 
 // 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_controls7 = require("@vuu-ui/vuu-ui-controls");
 var import_clsx10 = __toESM(require("clsx"));
@@ -3543,9 +3661,10 @@ var InputCell = ({
   row
 }) => {
   const dataIdx = columnMap[column.name];
+  const dataValue = row[dataIdx];
   const { align = "left", clientSideEditValidationCheck } = column;
   const { warningMessage, ...editProps } = (0, import_vuu_ui_controls7.useEditableText)({
-    initialValue: row[dataIdx],
+    initialValue: dataValue,
     onCommit,
     clientSideEditValidationCheck
   });
@@ -3563,18 +3682,20 @@ var InputCell = ({
     }
   );
 };
-(0, import_vuu_utils24.registerComponent)("input-cell", InputCell, "cell-renderer", {});
+(0, import_vuu_utils26.registerComponent)("input-cell", InputCell, "cell-renderer", {
+  userCanAssign: false
+});
 
 // src/cell-renderers/toggle-cell/ToggleCell.tsx
 var import_vuu_ui_controls8 = 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_react27 = require("react");
+var import_react29 = require("react");
 var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var classBase9 = "vuuTableToggleCell";
 var getValueList = ({ name, type }) => {
-  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(
@@ -3582,7 +3703,7 @@ var getValueList = ({ name, type }) => {
     );
   }
 };
-var ToggleCell = (0, import_react27.memo)(
+var ToggleCell = (0, import_react29.memo)(
   function ToggleCell2({
     column,
     columnMap,
@@ -3592,11 +3713,11 @@ var ToggleCell = (0, import_react27.memo)(
     const values = getValueList(column);
     const dataIdx = columnMap[column.name];
     const value = row[dataIdx];
-    const handleCommit = (0, import_react27.useCallback)(
+    const handleCommit = (0, import_react29.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;
         });
@@ -3615,18 +3736,20 @@ var ToggleCell = (0, import_react27.memo)(
       }
     );
   },
-  import_vuu_utils25.dataAndColumnUnchanged
+  import_vuu_utils27.dataColumnAndKeyUnchanged
 );
-(0, import_vuu_utils25.registerComponent)("toggle-cell", ToggleCell, "cell-renderer", {});
+(0, import_vuu_utils27.registerComponent)("toggle-cell", ToggleCell, "cell-renderer", {
+  userCanAssign: false
+});
 
 // src/useControlledTableNavigation.ts
 var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
-var import_react28 = require("react");
+var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+var import_react30 = require("react");
 var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = (0, import_react28.useRef)(null);
+  const tableRef = (0, import_react30.useRef)(null);
   const [highlightedIndexRef, setHighlightedIndex] = (0, import_vuu_ui_controls10.useStateRef)(initialValue);
-  const handleKeyDown = (0, import_react28.useCallback)(
+  const handleKeyDown = (0, import_react30.useCallback)(
     (e) => {
       var _a;
       if (e.key === "ArrowDown") {
@@ -3639,13 +3762,13 @@ var useControlledTableNavigation = (initialValue, rowCount) => {
           `[aria-rowindex="${rowIdx}"]`
         );
         if (rowEl) {
-          (0, import_vuu_utils26.dispatchMouseEvent)(rowEl, "click");
+          (0, import_vuu_utils28.dispatchMouseEvent)(rowEl, "click");
         }
       }
     },
     [highlightedIndexRef, rowCount, setHighlightedIndex]
   );
-  const handleHighlight = (0, import_react28.useCallback)(
+  const handleHighlight = (0, import_react30.useCallback)(
     (idx) => {
       setHighlightedIndex(idx);
     },