@ornery/ui-grid-react 0.1.8 → 0.1.10

package/demo/main.tsx

@@ -45,6 +45,7 @@ function App() {
       enableFiltering: true,
       enableGrouping: true,
       enableColumnMoving: true,
+      enableColumnResizing: true,
       enableVirtualization: true,
       enableCellEditOnFocus: true,
       virtualizationThreshold: 25,
@@ -121,7 +122,8 @@ function App() {
           <h2>{options.title ?? 'UI Grid'}</h2>
           <p>
             Familiar <code>gridOptions</code> and <code>onRegisterApi</code>, rebuilt with React
-            hooks, virtualization, grouping, sorting, filtering, and column ordering.
+            hooks, virtualization, grouping, sorting, filtering, column ordering, and Excel-style
+            column resizing with drag handles plus double-click auto fit.
           </p>
         </div>
 
@@ -169,7 +171,7 @@ function App() {
         </div>
         <p>
           <code>gridOptions</code> compatibility layer: sorting, filtering, grouping, column moving,
-          templating, and virtualized rendering.
+          column resizing, templating, and virtualized rendering.
         </p>
       </div>
 

package/dist/UiGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiGrid.d.ts","sourceRoot":"","sources":["../src/UiGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,WAAW,EACX,uBAAuB,EACvB,6BAA6B,EAC7B,yBAAyB,EACzB,SAAS,EAGV,MAAM,sBAAsB,CAAC;AAK9B,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC;IACzE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,6BAA6B,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,aAAa,EACb,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,SAAS,GACV,EAAE,WAAW,2CA+rBb"}
+{"version":3,"file":"UiGrid.d.ts","sourceRoot":"","sources":["../src/UiGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,WAAW,EACX,uBAAuB,EACvB,6BAA6B,EAC7B,yBAAyB,EACzB,SAAS,EAGV,MAAM,sBAAsB,CAAC;AAK9B,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC;IACzE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,6BAA6B,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,aAAa,EACb,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,SAAS,GACV,EAAE,WAAW,2CA+sBb"}

package/dist/index.js

@@ -136,6 +136,7 @@ function useGridState(options, onRegisterApi) {
   });
   const [autoViewportHeight, setAutoViewportHeight] = (0, import_react.useState)(null);
   const [pinnedColumns, setPinnedColumns] = (0, import_react.useState)({});
+  const [columnWidthOverrides, setColumnWidthOverrides] = (0, import_react.useState)({});
   const gridContainerRef = (0, import_react.useRef)(null);
   const initializedGridIdRef = (0, import_react.useRef)(null);
   const lastCanvasHeightRef = (0, import_react.useRef)(0);
@@ -173,6 +174,14 @@ function useGridState(options, onRegisterApi) {
   currentPageRef.current = currentPage;
   const pageSizeRef = (0, import_react.useRef)(pageSize);
   pageSizeRef.current = pageSize;
+  const setEditingCellState = (0, import_react.useCallback)((nextEditingCell) => {
+    editingCellRef.current = nextEditingCell;
+    setEditingCell(nextEditingCell);
+  }, []);
+  const setEditingValueState = (0, import_react.useCallback)((nextEditingValue) => {
+    editingValueRef.current = nextEditingValue;
+    setEditingValue(nextEditingValue);
+  }, []);
   const infiniteScrollStateRef = (0, import_react.useRef)(infiniteScrollState);
   infiniteScrollStateRef.current = infiniteScrollState;
   const optionsRef = (0, import_react.useRef)(options);
@@ -180,9 +189,13 @@ function useGridState(options, onRegisterApi) {
   const rowSize = options.rowHeight ?? 44;
   const visibleColumns = (0, import_react.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);
@@ -190,8 +203,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 = (0, import_react.useRef)(visibleColumns);
   visibleColumnsRef.current = visibleColumns;
   const pipeline = (0, import_react.useMemo)(() => {
@@ -328,11 +341,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 = (0, import_react.useCallback)((focusToken) => {
@@ -660,8 +674,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,
@@ -673,15 +687,15 @@ function useGridState(options, onRegisterApi) {
         queueMicrotask(() => focusEditorInput(focusToken));
       }
     },
-    [focusEditorInput]
+    [focusEditorInput, setEditingCellState, setEditingValueState]
   );
   const commitCellEditFn = (0, import_react.useCallback)(
     (direction, restoreFocus = true) => {
       const result = (0, import_ui_grid_core2.commitGridCellEditCommand)(gridApiRef.current, {
         getEditingCell: () => editingCellRef.current,
         getEditingValue: () => editingValueRef.current,
-        setEditingCell: (ec) => setEditingCell(ec),
-        setEditingValue: (ev) => setEditingValue(ev),
+        setEditingCell: setEditingCellState,
+        setEditingValue: setEditingValueState,
         findRowById: (rowId) => (0, import_ui_grid_core2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
         findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName),
         parseEditedValue: (column, value, oldValue) => (0, import_ui_grid_core2.parseGridEditedValue)(column, value, oldValue),
@@ -699,25 +713,25 @@ function useGridState(options, onRegisterApi) {
         focusRenderedCell(result.focusTarget);
       }
     },
-    [buildRowsFromData, focusRenderedCell]
+    [buildRowsFromData, focusRenderedCell, setEditingCellState, setEditingValueState]
   );
   const cancelCellEditFn = (0, import_react.useCallback)(() => {
     const hadEditingCell = editingCellRef.current !== null;
     const result = (0, import_ui_grid_core2.cancelGridCellEditCommand)(gridApiRef.current, {
       getEditingCell: () => editingCellRef.current,
-      setEditingCell: (ec) => setEditingCell(ec),
-      setEditingValue: (ev) => setEditingValue(ev),
+      setEditingCell: setEditingCellState,
+      setEditingValue: setEditingValueState,
       findRowById: (rowId) => (0, import_ui_grid_core2.findGridRowById)(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 = (0, import_react.useCallback)(
     (row, column, direction, triggerEvent) => {
       const nextCell = (0, import_ui_grid_core2.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,
@@ -794,8 +808,8 @@ function useGridState(options, onRegisterApi) {
     setHiddenRowReasons({});
     setCollapsedGroups({});
     setFocusedCell(null);
-    setEditingCell(null);
-    setEditingValue("");
+    setEditingCellState(null);
+    setEditingValueState("");
     setExpandedRows({});
     setExpandedTreeRows({});
     setColumnOrder(options.columnDefs.map((column) => column.name));
@@ -829,7 +843,7 @@ function useGridState(options, onRegisterApi) {
     }
   }, [pipeline, gridApi, rowSize]);
   (0, import_react.useEffect)(() => {
-    if (!import_ui_grid_core2.FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
+    if (!import_ui_grid_core2.FEATURE_AUTO_RESIZE) return;
     const container = gridContainerRef.current;
     if (!container) return;
     const observer = (0, import_ui_grid_core2.observeGridHostSize)(container, ({ height: nextHeight, width: nextWidth }) => {
@@ -931,6 +945,9 @@ function useGridState(options, onRegisterApi) {
   const isFocusedCellFn = (0, import_react.useCallback)((row, column) => {
     return (0, import_ui_grid_core2.isGridCellPosition)(focusedCellRef.current, row.id, column.name);
   }, []);
+  const isFocusedRowFn = (0, import_react.useCallback)((row) => {
+    return focusedCellRef.current?.rowId === row.id || editingCellRef.current?.rowId === row.id;
+  }, []);
   const isEditingCellFn = (0, import_react.useCallback)((row, column) => {
     return (0, import_ui_grid_core2.isGridCellPosition)(editingCellRef.current, row.id, column.name);
   }, []);
@@ -1054,34 +1071,45 @@ function useGridState(options, onRegisterApi) {
   );
   const handleCellKeyDownFn = (0, import_react.useCallback)(
     (row, column, event) => {
-      focusCellFn(row, column, event.nativeEvent);
+      if ((0, import_ui_grid_core2.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);
           }
@@ -1090,6 +1118,7 @@ function useGridState(options, onRegisterApi) {
         case "Delete":
           if (isCellEditable(row, column, event.nativeEvent)) {
             event.preventDefault();
+            event.stopPropagation();
             startCellEditFn(row, column, event.nativeEvent, "");
           }
           return;
@@ -1098,6 +1127,7 @@ function useGridState(options, onRegisterApi) {
       }
       if ((0, import_ui_grid_core2.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);
       }
     },
@@ -1113,23 +1143,32 @@ function useGridState(options, onRegisterApi) {
     [focusCellFn, isCellEditable, startCellEditFn]
   );
   const updateEditingValueFn = (0, import_react.useCallback)((value) => {
-    setEditingValue(value);
-  }, []);
+    setEditingValueState(value);
+  }, [setEditingValueState]);
   const handleEditorKeyDownFn = (0, import_react.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]
@@ -1191,6 +1230,72 @@ function useGridState(options, onRegisterApi) {
     },
     [setPaginationPageSizeFn]
   );
+  const canResizeColumnsFn = (0, import_react.useCallback)(() => {
+    return optionsRef.current.enableColumnResizing !== false;
+  }, []);
+  const setColumnWidthOverrideFn = (0, import_react.useCallback)((columnName, widthPx) => {
+    const nextWidth = `${Math.max(88, Math.round(widthPx))}px`;
+    setColumnWidthOverrides((current) => ({ ...current, [columnName]: nextWidth }));
+  }, []);
+  const measureAutoColumnWidthFn = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)(
+    (column, event) => {
+      if (!canResizeColumnsFn()) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setColumnWidthOverrideFn(column.name, measureAutoColumnWidthFn(column.name));
+    },
+    [canResizeColumnsFn, setColumnWidthOverrideFn, measureAutoColumnWidthFn]
+  );
   const onViewportScrollFn = (0, import_react.useCallback)((startIndex) => {
     if (!scrollingRef.current) {
       scrollingRef.current = true;
@@ -1248,6 +1353,7 @@ function useGridState(options, onRegisterApi) {
     paginationSelectedPageSize,
     rowSize,
     viewportHeightPx,
+    autoViewportHeight,
     headerLabel: headerLabelFn,
     isGroupItem: isGroupItemFn,
     isExpandableItem: isExpandableItemFn,
@@ -1263,6 +1369,7 @@ function useGridState(options, onRegisterApi) {
     groupDisclosureLabel: groupDisclosureLabelFn,
     displayValue: displayValueFn,
     isFocusedCell: isFocusedCellFn,
+    isFocusedRow: isFocusedRowFn,
     isEditingCell: isEditingCellFn,
     editorInputType: editorInputTypeFn,
     cellContext: cellContextFn,
@@ -1309,6 +1416,9 @@ function useGridState(options, onRegisterApi) {
     toggleTreeRow: toggleTreeRowFn,
     moveColumn: moveColumnFn,
     moveVisibleColumn: moveVisibleColumnFn,
+    canResizeColumns: canResizeColumnsFn,
+    handleHeaderResizeMouseDown: handleHeaderResizeMouseDownFn,
+    autoSizeColumn: autoSizeColumnFn,
     nextPage: nextPageFn,
     previousPage: previousPageFn,
     onPageSizeChange: onPageSizeChangeFn,
@@ -1396,6 +1506,7 @@ function UiGrid({
     virtualizationEnabled,
     rowSize,
     editingValue,
+    autoViewportHeight,
     sortingFeature,
     filteringFeature,
     groupingFeature,
@@ -1413,10 +1524,8 @@ function UiGrid({
   const [headerStickyHeight, setHeaderStickyHeight] = import_react3.default.useState(0);
   const [filterStickyHeight, setFilterStickyHeight] = import_react3.default.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,
@@ -1426,7 +1535,7 @@ function UiGrid({
   const [openPinMenuColumn, setOpenPinMenuColumn] = import_react3.default.useState(null);
   const [draggedColumnName, setDraggedColumnName] = import_react3.default.useState(null);
   const [dropTargetColumnName, setDropTargetColumnName] = import_react3.default.useState(null);
-  const scrollContainerHeight = `${options.viewportHeight ?? 560}px`;
+  const scrollContainerHeight = `${resolvedViewportHeight}px`;
   function renderHeaderContent(column) {
     const value = state.headerLabel(column);
     const context = {
@@ -1732,6 +1841,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(" ");
   }
@@ -1779,7 +1889,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),
@@ -1902,7 +2012,19 @@ function UiGrid({
                                 ]
                               }
                             )
-                          ] })
+                          ] }),
+                          state.canResizeColumns() && /* @__PURE__ */ (0, import_jsx_runtime.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