@ornery/ui-grid-react 0.1.8 → 0.1.10

package/dist/index.mjs

@@ -61,6 +61,7 @@ import {
   buildGridFocusCellResult,
   findNextGridCell,
   isPrintableGridKey,
+  isGridNavigationKey,
   isGridCellPosition,
   exportCsvRows,
   buildGridRows,
@@ -186,6 +187,7 @@ function useGridState(options, onRegisterApi) {
   });
   const [autoViewportHeight, setAutoViewportHeight] = useState(null);
   const [pinnedColumns, setPinnedColumns] = useState({});
+  const [columnWidthOverrides, setColumnWidthOverrides] = useState({});
   const gridContainerRef = useRef(null);
   const initializedGridIdRef = useRef(null);
   const lastCanvasHeightRef = useRef(0);
@@ -223,6 +225,14 @@ function useGridState(options, onRegisterApi) {
   currentPageRef.current = currentPage;
   const pageSizeRef = useRef(pageSize);
   pageSizeRef.current = pageSize;
+  const setEditingCellState = useCallback((nextEditingCell) => {
+    editingCellRef.current = nextEditingCell;
+    setEditingCell(nextEditingCell);
+  }, []);
+  const setEditingValueState = useCallback((nextEditingValue) => {
+    editingValueRef.current = nextEditingValue;
+    setEditingValue(nextEditingValue);
+  }, []);
   const infiniteScrollStateRef = useRef(infiniteScrollState);
   infiniteScrollStateRef.current = infiniteScrollState;
   const optionsRef = useRef(options);
@@ -230,9 +240,13 @@ function useGridState(options, onRegisterApi) {
   const rowSize = options.rowHeight ?? 44;
   const visibleColumns = useMemo(() => {
     const orderedColumns = orderVisibleColumns(options.columnDefs, columnOrder);
+    const applyWidthOverrides = (columns) => columns.map((col) => {
+      const override = columnWidthOverrides[col.name];
+      return override == null ? col : { ...col, width: override };
+    });
     const pinnedEntries = Object.entries(pinnedColumns);
     if (pinnedEntries.length === 0) {
-      return orderedColumns;
+      return applyWidthOverrides(orderedColumns);
     }
     const columnByName = new Map(orderedColumns.map((column) => [column.name, column]));
     const pinnedLeft = pinnedEntries.filter(([, direction]) => direction === "left").map(([columnName]) => columnByName.get(columnName)).filter((column) => column !== void 0);
@@ -240,8 +254,8 @@ function useGridState(options, onRegisterApi) {
     const centerColumns = orderedColumns.filter(
       (column) => pinnedColumns[column.name] === void 0
     );
-    return [...pinnedLeft, ...centerColumns, ...pinnedRight];
-  }, [options.columnDefs, columnOrder, pinnedColumns]);
+    return applyWidthOverrides([...pinnedLeft, ...centerColumns, ...pinnedRight]);
+  }, [options.columnDefs, columnOrder, pinnedColumns, columnWidthOverrides]);
   const visibleColumnsRef = useRef(visibleColumns);
   visibleColumnsRef.current = visibleColumns;
   const pipeline = useMemo(() => {
@@ -378,11 +392,12 @@ function useGridState(options, onRegisterApi) {
         if (retry) requestAnimationFrame(() => doFocus(false));
         return;
       }
-      target.focus();
+      target.focus({ preventScroll: true });
       if (retry && container.ownerDocument.activeElement !== target) {
         requestAnimationFrame(() => doFocus(false));
       }
     };
+    doFocus(true);
     queueMicrotask(() => doFocus(true));
   }, []);
   const focusEditorInput = useCallback((focusToken) => {
@@ -710,8 +725,8 @@ function useGridState(options, onRegisterApi) {
         gridApiRef.current,
         {
           setFocusedCell: (fc) => setFocusedCell(fc),
-          setEditingCell: (ec2) => setEditingCell(ec2),
-          setEditingValue: (ev) => setEditingValue(ev)
+          setEditingCell: setEditingCellState,
+          setEditingValue: setEditingValueState
         },
         row,
         column,
@@ -723,15 +738,15 @@ function useGridState(options, onRegisterApi) {
         queueMicrotask(() => focusEditorInput(focusToken));
       }
     },
-    [focusEditorInput]
+    [focusEditorInput, setEditingCellState, setEditingValueState]
   );
   const commitCellEditFn = useCallback(
     (direction, restoreFocus = true) => {
       const result = commitGridCellEditCommand(gridApiRef.current, {
         getEditingCell: () => editingCellRef.current,
         getEditingValue: () => editingValueRef.current,
-        setEditingCell: (ec) => setEditingCell(ec),
-        setEditingValue: (ev) => setEditingValue(ev),
+        setEditingCell: setEditingCellState,
+        setEditingValue: setEditingValueState,
         findRowById: (rowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
         findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName),
         parseEditedValue: (column, value, oldValue) => parseGridEditedValue(column, value, oldValue),
@@ -749,25 +764,25 @@ function useGridState(options, onRegisterApi) {
         focusRenderedCell(result.focusTarget);
       }
     },
-    [buildRowsFromData, focusRenderedCell]
+    [buildRowsFromData, focusRenderedCell, setEditingCellState, setEditingValueState]
   );
   const cancelCellEditFn = useCallback(() => {
     const hadEditingCell = editingCellRef.current !== null;
     const result = cancelGridCellEditCommand(gridApiRef.current, {
       getEditingCell: () => editingCellRef.current,
-      setEditingCell: (ec) => setEditingCell(ec),
-      setEditingValue: (ev) => setEditingValue(ev),
+      setEditingCell: setEditingCellState,
+      setEditingValue: setEditingValueState,
       findRowById: (rowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
       findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName)
     });
     if (!hadEditingCell) return;
     editorFocusTokenRef.current += 1;
     if (result.focusTarget) focusRenderedCell(result.focusTarget);
-  }, [buildRowsFromData, focusRenderedCell]);
+  }, [buildRowsFromData, focusRenderedCell, setEditingCellState, setEditingValueState]);
   const moveFocusFn = useCallback(
     (row, column, direction, triggerEvent) => {
       const nextCell = findNextGridCell({
-        rows: pipelineRef.current.visibleRows,
+        rows: pipelineRef.current.displayItems.filter((item) => item.kind === "row").map((item) => item.row),
         columns: visibleColumnsRef.current,
         rowId: row.id,
         columnName: column.name,
@@ -844,8 +859,8 @@ function useGridState(options, onRegisterApi) {
     setHiddenRowReasons({});
     setCollapsedGroups({});
     setFocusedCell(null);
-    setEditingCell(null);
-    setEditingValue("");
+    setEditingCellState(null);
+    setEditingValueState("");
     setExpandedRows({});
     setExpandedTreeRows({});
     setColumnOrder(options.columnDefs.map((column) => column.name));
@@ -879,7 +894,7 @@ function useGridState(options, onRegisterApi) {
     }
   }, [pipeline, gridApi, rowSize]);
   useEffect(() => {
-    if (!FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
+    if (!FEATURE_AUTO_RESIZE) return;
     const container = gridContainerRef.current;
     if (!container) return;
     const observer = observeGridHostSize(container, ({ height: nextHeight, width: nextWidth }) => {
@@ -981,6 +996,9 @@ function useGridState(options, onRegisterApi) {
   const isFocusedCellFn = useCallback((row, column) => {
     return isGridCellPosition(focusedCellRef.current, row.id, column.name);
   }, []);
+  const isFocusedRowFn = useCallback((row) => {
+    return focusedCellRef.current?.rowId === row.id || editingCellRef.current?.rowId === row.id;
+  }, []);
   const isEditingCellFn = useCallback((row, column) => {
     return isGridCellPosition(editingCellRef.current, row.id, column.name);
   }, []);
@@ -1104,34 +1122,45 @@ function useGridState(options, onRegisterApi) {
   );
   const handleCellKeyDownFn = useCallback(
     (row, column, event) => {
-      focusCellFn(row, column, event.nativeEvent);
+      if (isGridNavigationKey(event.key)) {
+        setFocusedCell({ rowId: row.id, columnName: column.name });
+      } else {
+        focusCellFn(row, column, event.nativeEvent);
+      }
       switch (event.key) {
         case "ArrowLeft":
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, "left", event.nativeEvent);
           return;
         case "ArrowRight":
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, "right", event.nativeEvent);
           return;
         case "ArrowUp":
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, "up", event.nativeEvent);
           return;
         case "ArrowDown":
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, "down", event.nativeEvent);
           return;
         case "Tab":
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, event.shiftKey ? "left" : "right", event.nativeEvent);
           return;
         case "Enter":
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, event.shiftKey ? "up" : "down", event.nativeEvent);
           return;
         case "F2":
           event.preventDefault();
+          event.stopPropagation();
           if (isCellEditable(row, column, event.nativeEvent)) {
             startCellEditFn(row, column, event.nativeEvent);
           }
@@ -1140,6 +1169,7 @@ function useGridState(options, onRegisterApi) {
         case "Delete":
           if (isCellEditable(row, column, event.nativeEvent)) {
             event.preventDefault();
+            event.stopPropagation();
             startCellEditFn(row, column, event.nativeEvent, "");
           }
           return;
@@ -1148,6 +1178,7 @@ function useGridState(options, onRegisterApi) {
       }
       if (isPrintableGridKey(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
         event.preventDefault();
+        event.stopPropagation();
         startCellEditFn(row, column, event.nativeEvent, event.key);
       }
     },
@@ -1163,23 +1194,32 @@ function useGridState(options, onRegisterApi) {
     [focusCellFn, isCellEditable, startCellEditFn]
   );
   const updateEditingValueFn = useCallback((value) => {
-    setEditingValue(value);
-  }, []);
+    setEditingValueState(value);
+  }, [setEditingValueState]);
   const handleEditorKeyDownFn = useCallback(
     (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
+        event.stopPropagation();
         cancelCellEditFn();
         return;
       }
       if (event.key === "Enter") {
         event.preventDefault();
+        event.stopPropagation();
         commitCellEditFn(event.shiftKey ? "up" : "down");
         return;
       }
       if (event.key === "Tab") {
         event.preventDefault();
+        event.stopPropagation();
         commitCellEditFn(event.shiftKey ? "left" : "right");
+        return;
+      }
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        commitCellEditFn(event.key === "ArrowUp" ? "up" : "down");
       }
     },
     [cancelCellEditFn, commitCellEditFn]
@@ -1241,6 +1281,72 @@ function useGridState(options, onRegisterApi) {
     },
     [setPaginationPageSizeFn]
   );
+  const canResizeColumnsFn = useCallback(() => {
+    return optionsRef.current.enableColumnResizing !== false;
+  }, []);
+  const setColumnWidthOverrideFn = useCallback((columnName, widthPx) => {
+    const nextWidth = `${Math.max(88, Math.round(widthPx))}px`;
+    setColumnWidthOverrides((current) => ({ ...current, [columnName]: nextWidth }));
+  }, []);
+  const measureAutoColumnWidthFn = useCallback((columnName) => {
+    const container = gridContainerRef.current;
+    if (container == null) return 176;
+    const escaped = CSS.escape ? CSS.escape(columnName) : columnName.replace(/([\\".#:[\](){}+~> ])/g, "\\$1");
+    const selectors = [
+      `.header-cell[data-col-name="${escaped}"]`,
+      `.filter-cell[data-col-name="${escaped}"]`,
+      `.body-cell[data-col-name="${escaped}"] .cell-shell`
+    ];
+    let maxWidth = 0;
+    for (const selector of selectors) {
+      const elements = container.querySelectorAll(selector);
+      for (const element of elements) {
+        maxWidth = Math.max(maxWidth, element.scrollWidth);
+      }
+    }
+    return maxWidth + 12;
+  }, []);
+  const handleHeaderResizeMouseDownFn = useCallback(
+    (column, event) => {
+      if (!canResizeColumnsFn()) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const headerCell = event.currentTarget.closest(".header-cell");
+      if (headerCell == null) return;
+      const startX = event.clientX;
+      const startWidth = headerCell.getBoundingClientRect().width;
+      let lastWidth = startWidth;
+      const handleMove = (moveEvent) => {
+        lastWidth = Math.max(88, startWidth + (moveEvent.clientX - startX));
+        const widthStr = `${Math.round(lastWidth)}px`;
+        const newTemplate = buildGridTemplateColumns(
+          visibleColumnsRef.current.map(
+            (c) => c.name === column.name ? { ...c, width: widthStr } : c
+          )
+        );
+        gridContainerRef.current?.querySelectorAll(".header-grid, .filter-grid, .body-grid").forEach((el) => {
+          el.style.gridTemplateColumns = newTemplate;
+        });
+      };
+      const handleUp = () => {
+        window.removeEventListener("mousemove", handleMove);
+        window.removeEventListener("mouseup", handleUp);
+        setColumnWidthOverrideFn(column.name, lastWidth);
+      };
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    },
+    [canResizeColumnsFn, setColumnWidthOverrideFn]
+  );
+  const autoSizeColumnFn = useCallback(
+    (column, event) => {
+      if (!canResizeColumnsFn()) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setColumnWidthOverrideFn(column.name, measureAutoColumnWidthFn(column.name));
+    },
+    [canResizeColumnsFn, setColumnWidthOverrideFn, measureAutoColumnWidthFn]
+  );
   const onViewportScrollFn = useCallback((startIndex) => {
     if (!scrollingRef.current) {
       scrollingRef.current = true;
@@ -1298,6 +1404,7 @@ function useGridState(options, onRegisterApi) {
     paginationSelectedPageSize,
     rowSize,
     viewportHeightPx,
+    autoViewportHeight,
     headerLabel: headerLabelFn,
     isGroupItem: isGroupItemFn,
     isExpandableItem: isExpandableItemFn,
@@ -1313,6 +1420,7 @@ function useGridState(options, onRegisterApi) {
     groupDisclosureLabel: groupDisclosureLabelFn,
     displayValue: displayValueFn,
     isFocusedCell: isFocusedCellFn,
+    isFocusedRow: isFocusedRowFn,
     isEditingCell: isEditingCellFn,
     editorInputType: editorInputTypeFn,
     cellContext: cellContextFn,
@@ -1359,6 +1467,9 @@ function useGridState(options, onRegisterApi) {
     toggleTreeRow: toggleTreeRowFn,
     moveColumn: moveColumnFn,
     moveVisibleColumn: moveVisibleColumnFn,
+    canResizeColumns: canResizeColumnsFn,
+    handleHeaderResizeMouseDown: handleHeaderResizeMouseDownFn,
+    autoSizeColumn: autoSizeColumnFn,
     nextPage: nextPageFn,
     previousPage: previousPageFn,
     onPageSizeChange: onPageSizeChangeFn,
@@ -1446,6 +1557,7 @@ function UiGrid({
     virtualizationEnabled,
     rowSize,
     editingValue,
+    autoViewportHeight,
     sortingFeature,
     filteringFeature,
     groupingFeature,
@@ -1463,10 +1575,8 @@ function UiGrid({
   const [headerStickyHeight, setHeaderStickyHeight] = React.useState(0);
   const [filterStickyHeight, setFilterStickyHeight] = React.useState(0);
   const stickyChromeHeight = headerStickyHeight + filterStickyHeight;
-  const bodyViewportHeight = Math.max(
-    rowSize,
-    (options.viewportHeight ?? 560) - stickyChromeHeight
-  );
+  const resolvedViewportHeight = options.viewportHeight ?? (autoViewportHeight && autoViewportHeight > 0 ? autoViewportHeight : 560);
+  const bodyViewportHeight = Math.max(rowSize, resolvedViewportHeight - stickyChromeHeight);
   const virtualScroll = useVirtualScroll({
     itemCount: displayItems.length,
     itemSize: rowSize,
@@ -1476,7 +1586,7 @@ function UiGrid({
   const [openPinMenuColumn, setOpenPinMenuColumn] = React.useState(null);
   const [draggedColumnName, setDraggedColumnName] = React.useState(null);
   const [dropTargetColumnName, setDropTargetColumnName] = React.useState(null);
-  const scrollContainerHeight = `${options.viewportHeight ?? 560}px`;
+  const scrollContainerHeight = `${resolvedViewportHeight}px`;
   function renderHeaderContent(column) {
     const value = state.headerLabel(column);
     const context = {
@@ -1782,6 +1892,7 @@ function UiGrid({
     if (column.align === "center") classes.push("align-center");
     if (column.align === "end") classes.push("align-end");
     if (state.isFocusedCell(item.row, column)) classes.push("cell-focused");
+    if (state.isFocusedRow(item.row)) classes.push("row-focused");
     if (cellEditFeature && state.isEditingCell(item.row, column)) classes.push("cell-editing");
     return classes.join(" ");
   }
@@ -1829,7 +1940,7 @@ function UiGrid({
                       {
                         className: `header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== "none" ? " is-active" : ""}${pinned ? " is-pinned" : ""}${pinMenuOpen ? " is-pin-menu-open" : ""}${draggedColumnName === column.name ? " is-dragging" : ""}${dropTargetColumnName === column.name ? " is-drag-target" : ""}`,
                         "data-part": "header-cell",
-                        role: "columnheader",
+                        "data-col-name": column.name,
                         "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
                         draggable: columnMovingFeature,
                         onDragStart: (event) => handleHeaderDragStart(column, event),
@@ -1952,7 +2063,19 @@ function UiGrid({
                                 ]
                               }
                             )
-                          ] })
+                          ] }),
+                          state.canResizeColumns() && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "column-resizer",
+                              "data-col-name": column.name,
+                              "aria-label": `Resize ${state.headerLabel(column)} column`,
+                              title: "Drag to resize, double-click to auto fit",
+                              onMouseDown: (event) => state.handleHeaderResizeMouseDown(column, event),
+                              onDoubleClick: (event) => state.autoSizeColumn(column, event)
+                            }
+                          )
                         ]
                       },
                       column.name

package/dist/ui-grid.css

@@ -1,53 +1,142 @@
 .ui-grid-host {
-  --ui-grid-border-color: var(--app-ui-grid-border-color, #d4d4d8);
-  --ui-grid-header-background: var(--app-ui-grid-header-background, #f3f4f6);
-  --ui-grid-row-odd: var(--app-ui-grid-row-odd, #fcfcfd);
-  --ui-grid-row-even: var(--app-ui-grid-row-even, #f7f7f8);
-  --ui-grid-row-hover: var(--app-ui-grid-row-hover, #eef4ff);
-  --ui-grid-cell-color: var(--app-ui-grid-cell-color, #111827);
-  --ui-grid-muted-color: var(--app-ui-grid-muted-color, #6b7280);
-  --ui-grid-surface: var(--app-ui-grid-surface, #ffffff);
-  --ui-grid-radius: var(--app-ui-grid-radius, 4px);
-  --ui-grid-shadow: var(--app-ui-grid-shadow, 0 10px 24px rgba(15, 23, 42, 0.08));
-  --ui-grid-header-weight: var(--app-ui-grid-header-weight, 700);
-  --ui-grid-accent: var(--app-ui-grid-accent, #2563eb);
-  --ui-grid-group-background: var(--app-ui-grid-group-background, #eceff3);
-  --ui-grid-status-active-bg: var(--app-ui-grid-status-active-bg, rgba(22, 163, 74, 0.14));
-  --ui-grid-status-active-color: var(--app-ui-grid-status-active-color, #166534);
-  --ui-grid-status-expansion-bg: var(--app-ui-grid-status-expansion-bg, rgba(37, 99, 235, 0.14));
-  --ui-grid-status-expansion-color: var(--app-ui-grid-status-expansion-color, #1d4ed8);
-  --ui-grid-status-enterprise-bg: var(--app-ui-grid-status-enterprise-bg, rgba(15, 118, 110, 0.14));
-  --ui-grid-status-enterprise-color: var(--app-ui-grid-status-enterprise-color, #115e59);
-  --ui-grid-status-pilot-bg: var(--app-ui-grid-status-pilot-bg, rgba(234, 88, 12, 0.14));
-  --ui-grid-status-pilot-color: var(--app-ui-grid-status-pilot-color, #c2410c);
-  --ui-grid-pin-menu-open-z-index: var(--app-ui-grid-pin-menu-open-z-index, 8);
-  --ui-grid-pin-menu-z-index: var(--app-ui-grid-pin-menu-z-index, 20);
-  --ui-grid-pin-menu-gap: var(--app-ui-grid-pin-menu-gap, 0.25rem);
-  --ui-grid-pin-menu-padding: var(--app-ui-grid-pin-menu-padding, 0.25rem);
-  --ui-grid-pin-menu-radius: var(--app-ui-grid-pin-menu-radius, 999px);
-  --ui-grid-pin-menu-shadow: var(
-    --app-ui-grid-pin-menu-shadow,
-    0 10px 24px color-mix(in srgb, var(--ui-grid-cell-color) 10%, transparent)
+  /* Stretch to fill the parent so the autoresize observer can measure a
+     deterministic height. Consumers can override these properties to opt
+     back into intrinsic sizing. */
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  --_ui-grid-border-color: var(--ui-grid-border-color, var(--app-ui-grid-border-color, #d4d4d8));
+  --_ui-grid-header-background: var(
+    --ui-grid-header-background,
+    var(--app-ui-grid-header-background, #f3f4f6)
+  );
+  --_ui-grid-row-odd: var(--ui-grid-row-odd, var(--app-ui-grid-row-odd, #fcfcfd));
+  --_ui-grid-row-even: var(--ui-grid-row-even, var(--app-ui-grid-row-even, #f7f7f8));
+  --_ui-grid-row-hover: var(--ui-grid-row-hover, var(--app-ui-grid-row-hover, #eef4ff));
+  --_ui-grid-cell-color: var(--ui-grid-cell-color, var(--app-ui-grid-cell-color, #111827));
+  --_ui-grid-muted-color: var(--ui-grid-muted-color, var(--app-ui-grid-muted-color, #6b7280));
+  --_ui-grid-surface: var(--ui-grid-surface, var(--app-ui-grid-surface, #ffffff));
+  --_ui-grid-radius: var(--ui-grid-radius, var(--app-ui-grid-radius, 4px));
+  --_ui-grid-shadow: var(
+    --ui-grid-shadow,
+    var(--app-ui-grid-shadow, 0 10px 24px rgba(15, 23, 42, 0.08))
+  );
+  --_ui-grid-header-weight: var(--ui-grid-header-weight, var(--app-ui-grid-header-weight, 700));
+  --_ui-grid-accent: var(--ui-grid-accent, var(--app-ui-grid-accent, #2563eb));
+  --_ui-grid-group-background: var(
+    --ui-grid-group-background,
+    var(--app-ui-grid-group-background, #eceff3)
+  );
+  --_ui-grid-status-active-bg: var(
+    --ui-grid-status-active-bg,
+    var(--app-ui-grid-status-active-bg, rgba(22, 163, 74, 0.14))
+  );
+  --_ui-grid-status-active-color: var(
+    --ui-grid-status-active-color,
+    var(--app-ui-grid-status-active-color, #166534)
+  );
+  --_ui-grid-status-expansion-bg: var(
+    --ui-grid-status-expansion-bg,
+    var(--app-ui-grid-status-expansion-bg, rgba(37, 99, 235, 0.14))
+  );
+  --_ui-grid-status-expansion-color: var(
+    --ui-grid-status-expansion-color,
+    var(--app-ui-grid-status-expansion-color, #1d4ed8)
+  );
+  --_ui-grid-status-enterprise-bg: var(
+    --ui-grid-status-enterprise-bg,
+    var(--app-ui-grid-status-enterprise-bg, rgba(15, 118, 110, 0.14))
+  );
+  --_ui-grid-status-enterprise-color: var(
+    --ui-grid-status-enterprise-color,
+    var(--app-ui-grid-status-enterprise-color, #115e59)
   );
-  --ui-grid-pin-menu-action-size: var(--app-ui-grid-pin-menu-action-size, 1.75rem);
-  --ui-grid-pin-control-collapsed-size: var(--app-ui-grid-pin-control-collapsed-size, 1px);
-  --ui-grid-pin-control-transition-duration: var(
-    --app-ui-grid-pin-control-transition-duration,
-    160ms
+  --_ui-grid-status-pilot-bg: var(
+    --ui-grid-status-pilot-bg,
+    var(--app-ui-grid-status-pilot-bg, rgba(234, 88, 12, 0.14))
   );
-  --ui-grid-pin-control-transition-easing: var(
-    --app-ui-grid-pin-control-transition-easing,
-    cubic-bezier(0.22, 1, 0.36, 1)
+  --_ui-grid-status-pilot-color: var(
+    --ui-grid-status-pilot-color,
+    var(--app-ui-grid-status-pilot-color, #c2410c)
+  );
+  --_ui-grid-pin-menu-open-z-index: var(
+    --ui-grid-pin-menu-open-z-index,
+    var(--app-ui-grid-pin-menu-open-z-index, 8)
+  );
+  --_ui-grid-pin-menu-z-index: var(--ui-grid-pin-menu-z-index, var(--app-ui-grid-pin-menu-z-index, 20));
+  --_ui-grid-pin-menu-gap: var(--ui-grid-pin-menu-gap, var(--app-ui-grid-pin-menu-gap, 0.25rem));
+  --_ui-grid-pin-menu-padding: var(
+    --ui-grid-pin-menu-padding,
+    var(--app-ui-grid-pin-menu-padding, 0.25rem)
+  );
+  --_ui-grid-pin-menu-radius: var(--ui-grid-pin-menu-radius, var(--app-ui-grid-pin-menu-radius, 999px));
+  --_ui-grid-pin-menu-shadow: var(
+    --ui-grid-pin-menu-shadow,
+    var(
+      --app-ui-grid-pin-menu-shadow,
+      0 10px 24px color-mix(in srgb, var(--_ui-grid-cell-color) 10%, transparent)
+    )
+  );
+  --_ui-grid-pin-menu-action-size: var(
+    --ui-grid-pin-menu-action-size,
+    var(--app-ui-grid-pin-menu-action-size, 1.75rem)
+  );
+  --_ui-grid-pin-control-collapsed-size: var(
+    --ui-grid-pin-control-collapsed-size,
+    var(--app-ui-grid-pin-control-collapsed-size, 1px)
+  );
+  --_ui-grid-pin-control-transition-duration: var(
+    --ui-grid-pin-control-transition-duration,
+    var(--app-ui-grid-pin-control-transition-duration, 160ms)
+  );
+  --_ui-grid-pin-control-transition-easing: var(
+    --ui-grid-pin-control-transition-easing,
+    var(--app-ui-grid-pin-control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))
+  );
+  --_ui-grid-pin-menu-scale-closed: var(
+    --ui-grid-pin-menu-scale-closed,
+    var(--app-ui-grid-pin-menu-scale-closed, 0.72)
   );
-  --ui-grid-pin-menu-scale-closed: var(--app-ui-grid-pin-menu-scale-closed, 0.72);
   display: block;
-  color: var(--ui-grid-cell-color);
+  color: var(--_ui-grid-cell-color);
 }
 
-.ui-grid-host,
 .ui-grid-host *,
 .ui-grid-host *::before,
 .ui-grid-host *::after {
+  --ui-grid-border-color: var(--_ui-grid-border-color);
+  --ui-grid-header-background: var(--_ui-grid-header-background);
+  --ui-grid-row-odd: var(--_ui-grid-row-odd);
+  --ui-grid-row-even: var(--_ui-grid-row-even);
+  --ui-grid-row-hover: var(--_ui-grid-row-hover);
+  --ui-grid-cell-color: var(--_ui-grid-cell-color);
+  --ui-grid-muted-color: var(--_ui-grid-muted-color);
+  --ui-grid-surface: var(--_ui-grid-surface);
+  --ui-grid-radius: var(--_ui-grid-radius);
+  --ui-grid-shadow: var(--_ui-grid-shadow);
+  --ui-grid-header-weight: var(--_ui-grid-header-weight);
+  --ui-grid-accent: var(--_ui-grid-accent);
+  --ui-grid-group-background: var(--_ui-grid-group-background);
+  --ui-grid-status-active-bg: var(--_ui-grid-status-active-bg);
+  --ui-grid-status-active-color: var(--_ui-grid-status-active-color);
+  --ui-grid-status-expansion-bg: var(--_ui-grid-status-expansion-bg);
+  --ui-grid-status-expansion-color: var(--_ui-grid-status-expansion-color);
+  --ui-grid-status-enterprise-bg: var(--_ui-grid-status-enterprise-bg);
+  --ui-grid-status-enterprise-color: var(--_ui-grid-status-enterprise-color);
+  --ui-grid-status-pilot-bg: var(--_ui-grid-status-pilot-bg);
+  --ui-grid-status-pilot-color: var(--_ui-grid-status-pilot-color);
+  --ui-grid-pin-menu-open-z-index: var(--_ui-grid-pin-menu-open-z-index);
+  --ui-grid-pin-menu-z-index: var(--_ui-grid-pin-menu-z-index);
+  --ui-grid-pin-menu-gap: var(--_ui-grid-pin-menu-gap);
+  --ui-grid-pin-menu-padding: var(--_ui-grid-pin-menu-padding);
+  --ui-grid-pin-menu-radius: var(--_ui-grid-pin-menu-radius);
+  --ui-grid-pin-menu-shadow: var(--_ui-grid-pin-menu-shadow);
+  --ui-grid-pin-menu-action-size: var(--_ui-grid-pin-menu-action-size);
+  --ui-grid-pin-control-collapsed-size: var(--_ui-grid-pin-control-collapsed-size);
+  --ui-grid-pin-control-transition-duration: var(--_ui-grid-pin-control-transition-duration);
+  --ui-grid-pin-control-transition-easing: var(--_ui-grid-pin-control-transition-easing);
+  --ui-grid-pin-menu-scale-closed: var(--_ui-grid-pin-menu-scale-closed);
   box-sizing: border-box;
 }
 
@@ -139,6 +228,12 @@
   border: 1px solid var(--ui-grid-border-color);
   box-shadow: var(--ui-grid-shadow);
   overflow: hidden;
+  /* Allow the frame to grow inside the flexed host so the body grid can fill
+     the available height when no explicit viewportHeight is set. */
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
 .metrics-strip {
@@ -231,6 +326,7 @@
   background: var(--ui-grid-header-background);
   font-weight: var(--ui-grid-header-weight);
   align-items: center;
+  position: relative;
 }
 
 .header-cell[draggable='true'] {
@@ -255,6 +351,38 @@
   z-index: var(--ui-grid-pin-menu-open-z-index);
 }
 
+.column-resizer {
+  position: absolute;
+  top: 0;
+  right: -4px;
+  width: 8px;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+  z-index: 5;
+}
+
+.column-resizer::after {
+  content: '';
+  position: absolute;
+  top: 20%;
+  bottom: 20%;
+  left: 50%;
+  width: 2px;
+  transform: translateX(-50%);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ui-grid-border-color, #888) 80%, transparent);
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.header-cell:hover .column-resizer::after,
+.column-resizer:focus-visible::after {
+  opacity: 1;
+}
+
 .header-label {
   min-width: 0;
   display: block;