@ornery/ui-grid-react 0.1.9 → 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,4 +1,11 @@
 .ui-grid-host {
+  /* 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,
@@ -221,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 {
@@ -313,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'] {
@@ -337,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;

package/dist/useGridState.d.ts

@@ -30,6 +30,7 @@ export interface UseGridStateResult {
     paginationSelectedPageSize: number;
     rowSize: number;
     viewportHeightPx: string;
+    autoViewportHeight: number | null;
     headerLabel: (column: GridColumnDef) => string;
     isGroupItem: (item: DisplayItem) => item is GroupItem;
     isExpandableItem: (item: DisplayItem) => item is ExpandableItem;
@@ -45,6 +46,7 @@ export interface UseGridStateResult {
     groupDisclosureLabel: (item: GroupItem) => string;
     displayValue: (row: GridRow, column: GridColumnDef) => string;
     isFocusedCell: (row: GridRow, column: GridColumnDef) => boolean;
+    isFocusedRow: (row: GridRow) => boolean;
     isEditingCell: (row: GridRow, column: GridColumnDef) => boolean;
     editorInputType: (column: GridColumnDef) => string;
     cellContext: (row: GridRow, column: GridColumnDef) => GridCellTemplateContext;
@@ -100,6 +102,9 @@ export interface UseGridStateResult {
     toggleTreeRow: (row: GridRow, event?: React.MouseEvent) => void;
     moveColumn: (fromIndex: number, toIndex: number) => void;
     moveVisibleColumn: (columnName: string, targetColumnName: string) => void;
+    canResizeColumns: () => boolean;
+    handleHeaderResizeMouseDown: (column: GridColumnDef, event: React.MouseEvent) => void;
+    autoSizeColumn: (column: GridColumnDef, event: React.MouseEvent) => void;
     nextPage: () => void;
     previousPage: () => void;
     onPageSizeChange: (value: string) => void;

package/dist/useGridState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGridState.d.ts","sourceRoot":"","sources":["../src/useGridState.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useGridState.d.ts","sourceRoot":"","sources":["../src/useGridState.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornery/ui-grid-react",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "React wrapper for @ornery/ui-grid-core",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,7 +14,7 @@
     "./styles": "./dist/ui-grid.css"
   },
   "peerDependencies": {
-    "@ornery/ui-grid-core": "0.1.9",
+    "@ornery/ui-grid-core": "0.1.10",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },

package/src/UiGrid.tsx

@@ -41,6 +41,7 @@ export function UiGrid({
     virtualizationEnabled,
     rowSize,
     editingValue,
+    autoViewportHeight,
     sortingFeature,
     filteringFeature,
     groupingFeature,
@@ -59,10 +60,12 @@ export 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,
-  );
+  // Prefer the explicit viewportHeight, otherwise fall back to the container
+  // height measured by the autoresize observer so the grid fills its parent
+  // by default. The 560 fallback only applies before the first measurement.
+  const resolvedViewportHeight =
+    options.viewportHeight ?? (autoViewportHeight && autoViewportHeight > 0 ? autoViewportHeight : 560);
+  const bodyViewportHeight = Math.max(rowSize, resolvedViewportHeight - stickyChromeHeight);
 
   const virtualScroll = useVirtualScroll({
     itemCount: displayItems.length,
@@ -74,7 +77,7 @@ export function UiGrid({
   const [openPinMenuColumn, setOpenPinMenuColumn] = React.useState<string | null>(null);
   const [draggedColumnName, setDraggedColumnName] = React.useState<string | null>(null);
   const [dropTargetColumnName, setDropTargetColumnName] = React.useState<string | null>(null);
-  const scrollContainerHeight = `${options.viewportHeight ?? 560}px`;
+  const scrollContainerHeight = `${resolvedViewportHeight}px`;
 
   function renderHeaderContent(column: GridColumnDef): React.ReactNode {
     const value = state.headerLabel(column);
@@ -414,6 +417,7 @@ export 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(' ');
   }
@@ -474,7 +478,7 @@ export function UiGrid({
                   key={column.name}
                   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) as any) : undefined}
                   draggable={columnMovingFeature}
                   onDragStart={(event) => handleHeaderDragStart(column, event)}
@@ -596,6 +600,18 @@ export function UiGrid({
                         </div>
                       )}
                   </div>
+
+                  {state.canResizeColumns() && (
+                    <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)}
+                    />
+                  )}
                 </div>
               );
             })}