@alaarab/ogrid-js 2.1.12 → 2.1.14

package/dist/esm/index.js

@@ -1012,23 +1012,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 = 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) {
@@ -1907,6 +1978,7 @@ var TableRenderer = class {
     // Delegated event handlers bound to thead (avoids per-<th> inline listeners)
     this._theadClickHandler = null;
     this._theadMousedownHandler = null;
+    this._theadDblclickHandler = null;
     // State tracking for incremental DOM patching
     this.lastActiveCell = null;
     this.lastSelectionRange = null;
@@ -2015,15 +2087,30 @@ var TableRenderer = class {
         }
       }
     };
+    this._theadDblclickHandler = (e) => {
+      const target = e.target;
+      if (target.classList.contains("ogrid-resize-handle")) {
+        e.stopPropagation();
+        const th = target.closest("th[data-column-id]");
+        if (!th) return;
+        const columnId = th.getAttribute("data-column-id");
+        if (columnId) {
+          this.interactionState?.onResizeDoubleClick?.(columnId);
+        }
+      }
+    };
     if (this._theadClickHandler) this.thead.addEventListener("click", this._theadClickHandler);
     this.thead.addEventListener("mousedown", this._theadMousedownHandler);
+    this.thead.addEventListener("dblclick", this._theadDblclickHandler);
   }
   detachHeaderDelegation() {
     if (!this.thead) return;
     if (this._theadClickHandler) this.thead.removeEventListener("click", this._theadClickHandler);
     if (this._theadMousedownHandler) this.thead.removeEventListener("mousedown", this._theadMousedownHandler);
+    if (this._theadDblclickHandler) this.thead.removeEventListener("dblclick", this._theadDblclickHandler);
     this._theadClickHandler = null;
     this._theadMousedownHandler = null;
+    this._theadDblclickHandler = null;
   }
   getWrapperElement() {
     return this.wrapperEl;
@@ -4547,6 +4634,11 @@ var ColumnResizeState = class {
     this.isResizing = false;
     this.resizeColumnId = null;
   }
+  /** Set a column width directly (used by double-click auto-fit). */
+  setColumnWidth(columnId, widthPx) {
+    this.columnWidths.set(columnId, widthPx);
+    this.emitter.emit("columnWidthChange", { columnId, widthPx });
+  }
   onColumnWidthChange(handler) {
     this.emitter.on("columnWidthChange", handler);
     return () => this.emitter.off("columnWidthChange", handler);
@@ -5766,6 +5858,13 @@ var OGridRendering = class {
         if (ce.event) this.ctx.handleCellContextMenu(ce.rowIndex, ce.colIndex, ce.event);
       },
       onResizeStart: renderer.getOnResizeStart(),
+      onResizeDoubleClick: (columnId) => {
+        const col = visibleCols.find((c) => c.columnId === columnId);
+        const minW = col?.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        const container = renderer.getTableElement()?.parentElement ?? void 0;
+        const idealWidth = measureColumnContentWidth(columnId, minW, container);
+        resizeState.setColumnWidth(columnId, idealWidth);
+      },
       // Fill handle
       onFillHandleMouseDown: options.editable !== false ? (e) => fillHandleState?.startFillDrag(e) : void 0,
       // Row selection

package/dist/styles/ogrid.css

@@ -199,6 +199,7 @@
   position: relative;
   min-width: fit-content;
   background: var(--ogrid-bg, #fff);
+  overflow-x: clip;
 }
 
 .ogrid-table {

package/dist/types/renderer/TableRenderer.d.ts

@@ -18,6 +18,7 @@ export interface TableRendererInteractionState {
     onCellDoubleClick?: (cellEvent: CellEvent) => void;
     onCellContextMenu?: (cellEvent: CellEvent) => void;
     onResizeStart?: (columnId: string, clientX: number, currentWidth: number) => void;
+    onResizeDoubleClick?: (columnId: string) => void;
     onFillHandleMouseDown?: (e: MouseEvent) => void;
     rowSelectionMode?: 'single' | 'multiple' | 'none';
     selectedRowIds?: Set<RowId>;
@@ -50,6 +51,7 @@ export declare class TableRenderer<T> {
     private _tbodyContextmenuHandler;
     private _theadClickHandler;
     private _theadMousedownHandler;
+    private _theadDblclickHandler;
     private lastActiveCell;
     private lastSelectionRange;
     private lastCopyRange;

package/dist/types/state/ColumnResizeState.d.ts

@@ -17,6 +17,8 @@ export declare class ColumnResizeState {
     startResize(columnId: string, clientX: number, currentWidth: number): void;
     updateResize(clientX: number): number | null;
     endResize(clientX: number): void;
+    /** Set a column width directly (used by double-click auto-fit). */
+    setColumnWidth(columnId: string, widthPx: number): void;
     onColumnWidthChange(handler: (data: ColumnResizeStateEvents['columnWidthChange']) => void): () => void;
     destroy(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.1.12",
+  "version": "2.1.14",
   "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.12"
+    "@alaarab/ogrid-core": "2.1.14"
   },
   "sideEffects": [
     "**/*.css"