@alaarab/ogrid-react 2.1.13 → 2.1.14

package/dist/esm/index.js

@@ -971,23 +971,94 @@ var ROW_NUMBER_COLUMN_WIDTH = 50;
 var DEFAULT_MIN_COLUMN_WIDTH = 80;
 var CELL_PADDING = 16;
 var GRID_BORDER_RADIUS = 6;
-var AUTOSIZE_EXTRA_PX = 28;
+var AUTOSIZE_EXTRA_PX = 16;
 var AUTOSIZE_MAX_PX = 520;
+function measureHeaderWidth(th) {
+  const cs = getComputedStyle(th);
+  const thPadding = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+  let resizeHandleWidth = 0;
+  for (let i = 0; i < th.children.length; i++) {
+    const child = th.children[i];
+    const cls = child.className || "";
+    if (cls.includes("resizeHandle") || cls.includes("resize-handle") || cls.includes("ogrid-resize-handle")) {
+      resizeHandleWidth = child.offsetWidth;
+      break;
+    }
+  }
+  const contentContainer = th.firstElementChild;
+  if (!contentContainer) return th.offsetWidth;
+  const modified = [];
+  const expandDescendants = (parent) => {
+    for (let i = 0; i < parent.children.length; i++) {
+      const child = parent.children[i];
+      const style = getComputedStyle(child);
+      if (style.overflow === "hidden" || style.flexShrink !== "0") {
+        modified.push({
+          el: child,
+          overflow: child.style.overflow,
+          flexShrink: child.style.flexShrink,
+          width: child.style.width,
+          minWidth: child.style.minWidth
+        });
+        child.style.overflow = "visible";
+        child.style.flexShrink = "0";
+        child.style.width = "max-content";
+        child.style.minWidth = "max-content";
+      }
+      expandDescendants(child);
+    }
+  };
+  const origPos = contentContainer.style.position;
+  const origWidth = contentContainer.style.width;
+  contentContainer.style.position = "absolute";
+  contentContainer.style.width = "max-content";
+  expandDescendants(contentContainer);
+  const expandedWidth = contentContainer.offsetWidth;
+  contentContainer.style.position = origPos;
+  contentContainer.style.width = origWidth;
+  for (const m of modified) {
+    m.el.style.overflow = m.overflow;
+    m.el.style.flexShrink = m.flexShrink;
+    m.el.style.width = m.width;
+    m.el.style.minWidth = m.minWidth;
+  }
+  return expandedWidth + resizeHandleWidth + thPadding;
+}
 function measureColumnContentWidth(columnId, minWidth, container) {
   const minW = minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-  const root = document;
+  const root = container ?? document;
   const cells = root.querySelectorAll(`[data-column-id="${columnId}"]`);
   if (cells.length === 0) return minW;
   let maxWidth = minW;
+  const contentEls = [];
+  const origPositions = [];
+  const origWidths = [];
   cells.forEach((cell) => {
     const el = cell;
-    const label = el.querySelector?.("[data-header-label]");
-    if (label) {
-      maxWidth = Math.max(maxWidth, label.scrollWidth + AUTOSIZE_EXTRA_PX);
+    const isHeader = !!el.querySelector?.("[data-header-label]");
+    if (isHeader) {
+      maxWidth = Math.max(maxWidth, measureHeaderWidth(el));
     } else {
-      maxWidth = Math.max(maxWidth, el.scrollWidth);
+      const content = el.firstElementChild ?? el;
+      contentEls.push(content);
     }
   });
+  if (contentEls.length > 0) {
+    for (let i = 0; i < contentEls.length; i++) {
+      const el = contentEls[i];
+      origPositions.push(el.style.position);
+      origWidths.push(el.style.width);
+      el.style.position = "absolute";
+      el.style.width = "max-content";
+    }
+    for (let i = 0; i < contentEls.length; i++) {
+      maxWidth = Math.max(maxWidth, contentEls[i].offsetWidth + AUTOSIZE_EXTRA_PX);
+    }
+    for (let i = 0; i < contentEls.length; i++) {
+      contentEls[i].style.position = origPositions[i];
+      contentEls[i].style.width = origWidths[i];
+    }
+  }
   return Math.min(AUTOSIZE_MAX_PX, Math.max(minW, Math.ceil(maxWidth)));
 }
 function findCtrlArrowTarget(pos, edge, step, isEmpty) {
@@ -3318,7 +3389,8 @@ function useTableLayout(params) {
       const rect = el.getBoundingClientRect();
       const cs = window.getComputedStyle(el);
       const borderX = (parseFloat(cs.borderLeftWidth || "0") || 0) + (parseFloat(cs.borderRightWidth || "0") || 0);
-      setContainerWidth(Math.max(0, rect.width - borderX));
+      const next = Math.round(Math.max(0, rect.width - borderX));
+      setContainerWidth((prev) => prev === next ? prev : next);
     };
     const ro = new ResizeObserver(measure);
     ro.observe(el);
@@ -3623,6 +3695,11 @@ function useDataGridLayout(params) {
     pinnedColumns,
     onColumnPinned
   });
+  const overridesKey = useMemo(() => {
+    const entries = Object.entries(columnSizingOverrides);
+    if (entries.length === 0) return "";
+    return entries.map(([id, v]) => `${id}:${Math.round(v.widthPx)}`).join(",");
+  }, [columnSizingOverrides]);
   const [measuredColumnWidths, setMeasuredColumnWidths] = useState({});
   useLayoutEffect(() => {
     const wrapper = wrapperRef.current;
@@ -3641,7 +3718,7 @@ function useDataGridLayout(params) {
       if (Object.keys(prev).length !== Object.keys(measured).length) return measured;
       return prev;
     });
-  }, [visibleCols, columnSizingOverrides, wrapperRef]);
+  }, [visibleCols, overridesKey, wrapperRef]);
   const columnWidthMap = useMemo(() => {
     const map = {};
     for (const col of visibleCols) {
@@ -4736,10 +4813,25 @@ function useColumnResize({
     document.addEventListener("mouseup", onUp);
     cleanupRef.current = cleanup;
   }, [defaultWidth, minWidth, setColumnSizingOverrides, columnSizingOverridesRef]);
+  const handleResizeDoubleClick = useCallback((e, col) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const columnId = col.columnId;
+    const thEl = e.currentTarget.closest("th");
+    const container = thEl?.closest("table")?.parentElement ?? void 0;
+    const idealWidth = measureColumnContentWidth(columnId, minWidth, container);
+    setColumnSizingOverrides((prev) => ({
+      ...prev,
+      [columnId]: { widthPx: idealWidth }
+    }));
+    if (onColumnResizedRef.current) {
+      onColumnResizedRef.current(columnId, idealWidth);
+    }
+  }, [minWidth, setColumnSizingOverrides]);
   const getColumnWidth = useCallback((col) => {
     return columnSizingOverrides[col.columnId]?.widthPx ?? col.idealWidth ?? col.defaultWidth ?? defaultWidth;
   }, [columnSizingOverrides, defaultWidth]);
-  return { handleResizeStart, getColumnWidth };
+  return { handleResizeStart, handleResizeDoubleClick, getColumnWidth };
 }
 function getSelectDisplayText(value, formatValue) {
   if (formatValue) return formatValue(value);
@@ -6071,7 +6163,7 @@ function useDataGridTableOrchestration(params) {
   const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
   const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
   const fitToContent = layoutMode === "content";
-  const { handleResizeStart, getColumnWidth } = useColumnResize({
+  const { handleResizeStart, handleResizeDoubleClick, getColumnWidth } = useColumnResize({
     columnSizingOverrides,
     setColumnSizingOverrides
   });
@@ -6135,6 +6227,7 @@ function useDataGridTableOrchestration(params) {
     pinning,
     // Column resize
     handleResizeStart,
+    handleResizeDoubleClick,
     getColumnWidth,
     // Column reorder
     isReorderDragging,

package/dist/types/hooks/useColumnResize.d.ts

@@ -13,6 +13,7 @@ export interface UseColumnResizeParams {
 }
 export interface UseColumnResizeResult<T> {
     handleResizeStart: (e: React.MouseEvent, col: IColumnDef<T>) => void;
+    handleResizeDoubleClick: (e: React.MouseEvent, col: IColumnDef<T>) => void;
     getColumnWidth: (col: IColumnDef<T>) => number;
 }
 /**

package/dist/types/hooks/useDataGridTableOrchestration.d.ts

@@ -24,6 +24,7 @@ export interface UseDataGridTableOrchestrationResult<T> {
     viewModels: DataGridViewModelState<T>;
     pinning: DataGridPinningState;
     handleResizeStart: UseColumnResizeResult<T>['handleResizeStart'];
+    handleResizeDoubleClick: UseColumnResizeResult<T>['handleResizeDoubleClick'];
     getColumnWidth: UseColumnResizeResult<T>['getColumnWidth'];
     isReorderDragging: UseColumnReorderResult['isDragging'];
     dropIndicatorX: UseColumnReorderResult['dropIndicatorX'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.1.13",
+  "version": "2.1.14",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.13",
+    "@alaarab/ogrid-core": "2.1.14",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {