@alaarab/ogrid-js 2.1.13 → 2.1.15

package/dist/esm/index.js

@@ -502,23 +502,39 @@ function processClientSideData(data, columns, filters, sortBy, sortDirection) {
         const trimmed = val.value.trim();
         if (trimmed) {
           const lower = trimmed.toLowerCase();
-          predicates.push((r) => String(getCellValue(r, col) ?? "").toLowerCase().includes(lower));
+          const textCache = /* @__PURE__ */ new Map();
+          for (let j = 0; j < data.length; j++) {
+            textCache.set(data[j], String(getCellValue(data[j], col) ?? "").toLowerCase());
+          }
+          predicates.push((r) => (textCache.get(r) ?? "").includes(lower));
         }
         break;
       }
       case "people": {
         const email = val.value.email.toLowerCase();
-        predicates.push((r) => String(getCellValue(r, col) ?? "").toLowerCase() === email);
+        const peopleCache = /* @__PURE__ */ new Map();
+        for (let j = 0; j < data.length; j++) {
+          peopleCache.set(data[j], String(getCellValue(data[j], col) ?? "").toLowerCase());
+        }
+        predicates.push((r) => (peopleCache.get(r) ?? "") === email);
         break;
       }
       case "date": {
         const dv = val.value;
         const fromTs = dv.from ? (/* @__PURE__ */ new Date(dv.from + "T00:00:00")).getTime() : NaN;
         const toTs = dv.to ? (/* @__PURE__ */ new Date(dv.to + "T23:59:59.999")).getTime() : NaN;
+        const dateCache = /* @__PURE__ */ new Map();
+        for (let j = 0; j < data.length; j++) {
+          const cellVal = getCellValue(data[j], col);
+          if (cellVal == null) {
+            dateCache.set(data[j], NaN);
+          } else {
+            const t = new Date(String(cellVal)).getTime();
+            dateCache.set(data[j], Number.isNaN(t) ? NaN : t);
+          }
+        }
         predicates.push((r) => {
-          const cellVal = getCellValue(r, col);
-          if (cellVal == null) return false;
-          const cellTs = new Date(String(cellVal)).getTime();
+          const cellTs = dateCache.get(r) ?? NaN;
           if (Number.isNaN(cellTs)) return false;
           if (!Number.isNaN(fromTs) && cellTs < fromTs) return false;
           if (!Number.isNaN(toTs) && cellTs > toTs) return false;
@@ -1012,23 +1028,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) {
@@ -1190,7 +1277,7 @@ function computeRowSelectionState(selectedIds, items, getRowId) {
   if (selectedIds.size === 0 || items.length === 0) {
     return { allSelected: false, someSelected: false };
   }
-  const allSelected = items.every((item) => selectedIds.has(getRowId(item)));
+  const allSelected = selectedIds.size >= items.length && items.every((item) => selectedIds.has(getRowId(item)));
   const someSelected = !allSelected && selectedIds.size > 0;
   return { allSelected, someSelected };
 }
@@ -1887,6 +1974,17 @@ var GridState = class {
 };
 
 // src/renderer/TableRenderer.ts
+function rangeBounds(r) {
+  return {
+    minR: Math.min(r.startRow, r.endRow),
+    maxR: Math.max(r.startRow, r.endRow),
+    minC: Math.min(r.startCol, r.endCol),
+    maxC: Math.max(r.startCol, r.endCol)
+  };
+}
+function inBounds(b, row, col) {
+  return row >= b.minR && row <= b.maxR && col >= b.minC && col <= b.maxC;
+}
 var TableRenderer = class {
   constructor(container, state) {
     this.table = null;
@@ -1907,6 +2005,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 +2114,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;
@@ -2140,6 +2254,13 @@ var TableRenderer = class {
     const lastSelection = this.lastSelectionRange;
     const lastCopy = this.lastCopyRange;
     const lastCut = this.lastCutRange;
+    const selBounds = selectionRange ? rangeBounds(selectionRange) : null;
+    const lastSelBounds = lastSelection ? rangeBounds(lastSelection) : null;
+    const copyBounds = copyRange ? rangeBounds(copyRange) : null;
+    const lastCopyBounds = lastCopy ? rangeBounds(lastCopy) : null;
+    const cutBounds = cutRange ? rangeBounds(cutRange) : null;
+    const lastCutBounds = lastCut ? rangeBounds(lastCut) : null;
+    const colOffset = this.getColOffset();
     const cells = this.tbody.querySelectorAll("td[data-row-index][data-col-index]");
     for (let i = 0; i < cells.length; i++) {
       const el = cells[i];
@@ -2147,7 +2268,6 @@ var TableRenderer = class {
       if (!coords) continue;
       const rowIndex = coords.rowIndex;
       const globalColIndex = coords.colIndex;
-      const colOffset = this.getColOffset();
       const colIndex = globalColIndex - colOffset;
       const wasActive = lastActive && lastActive.rowIndex === rowIndex && lastActive.columnIndex === globalColIndex;
       const isActive = activeCell && activeCell.rowIndex === rowIndex && activeCell.columnIndex === globalColIndex;
@@ -2158,28 +2278,30 @@ var TableRenderer = class {
         el.setAttribute("data-active-cell", "true");
         el.style.outline = "2px solid var(--ogrid-accent, #0078d4)";
       }
-      const wasInRange = lastSelection && isInSelectionRange(lastSelection, rowIndex, colIndex);
-      const isInRange = selectionRange && isInSelectionRange(selectionRange, rowIndex, colIndex);
-      if (wasInRange && !isInRange) {
+      const wasInRange = lastSelBounds && inBounds(lastSelBounds, rowIndex, colIndex);
+      const isInRange = selBounds && inBounds(selBounds, rowIndex, colIndex);
+      const showRange = isInRange && !isActive;
+      const showedRange = wasInRange && !(lastActive && lastActive.rowIndex === rowIndex && lastActive.columnIndex === globalColIndex);
+      if (showedRange && !showRange) {
         el.removeAttribute("data-in-range");
         el.style.backgroundColor = "";
-      } else if (isInRange && !wasInRange) {
+      } else if (showRange && !showedRange) {
         el.setAttribute("data-in-range", "true");
         el.style.backgroundColor = "var(--ogrid-range-bg, rgba(33, 115, 70, 0.12))";
       }
-      const wasInCopy = lastCopy && isInSelectionRange(lastCopy, rowIndex, colIndex);
-      const isInCopy = copyRange && isInSelectionRange(copyRange, rowIndex, colIndex);
+      const wasInCopy = lastCopyBounds && inBounds(lastCopyBounds, rowIndex, colIndex);
+      const isInCopy = copyBounds && inBounds(copyBounds, rowIndex, colIndex);
       if (wasInCopy && !isInCopy) {
-        if (!isActive && !(cutRange && isInSelectionRange(cutRange, rowIndex, colIndex))) {
+        if (!isActive && !(cutBounds && inBounds(cutBounds, rowIndex, colIndex))) {
           el.style.outline = "";
         }
       } else if (isInCopy && !wasInCopy) {
         el.style.outline = "1px dashed var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5))";
       }
-      const wasInCut = lastCut && isInSelectionRange(lastCut, rowIndex, colIndex);
-      const isInCut = cutRange && isInSelectionRange(cutRange, rowIndex, colIndex);
+      const wasInCut = lastCutBounds && inBounds(lastCutBounds, rowIndex, colIndex);
+      const isInCut = cutBounds && inBounds(cutBounds, rowIndex, colIndex);
       if (wasInCut && !isInCut) {
-        if (!isActive && !(copyRange && isInSelectionRange(copyRange, rowIndex, colIndex))) {
+        if (!isActive && !(copyBounds && inBounds(copyBounds, rowIndex, colIndex))) {
           el.style.outline = "";
         }
       } else if (isInCut && !wasInCut) {
@@ -3902,6 +4024,7 @@ var VirtualScrollState = class {
     this._totalRows = 0;
     this.rafId = 0;
     this._ro = null;
+    this._resizeRafId = 0;
     this._cachedRange = { startIndex: 0, endIndex: -1, offsetTop: 0, offsetBottom: 0 };
     this._config = config ?? { enabled: false };
     validateVirtualScrollConfig(this._config);
@@ -3965,11 +4088,13 @@ var VirtualScrollState = class {
     this.disconnectObserver();
     if (typeof ResizeObserver !== "undefined") {
       this._ro = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const rect = entry.contentRect;
-          this._containerHeight = rect.height;
+        if (entries.length === 0) return;
+        this._containerHeight = entries[0].contentRect.height;
+        if (this._resizeRafId) cancelAnimationFrame(this._resizeRafId);
+        this._resizeRafId = requestAnimationFrame(() => {
+          this._resizeRafId = 0;
           this.recompute();
-        }
+        });
       });
       this._ro.observe(el);
     }
@@ -4011,6 +4136,7 @@ var VirtualScrollState = class {
   }
   destroy() {
     if (this.rafId) cancelAnimationFrame(this.rafId);
+    if (this._resizeRafId) cancelAnimationFrame(this._resizeRafId);
     this.disconnectObserver();
     this.emitter.removeAllListeners();
   }
@@ -4547,6 +4673,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);
@@ -4652,7 +4783,7 @@ var FillHandleState = class {
       endCol: end.endCol
     });
     this.setSelectionRange(norm);
-    this.setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + this.params.colOffset });
+    this.setActiveCell({ rowIndex: start.startRow, columnIndex: start.startCol + this.params.colOffset });
     this.applyFillValuesFromCore(norm, start);
     this._isFillDragging = false;
     this.fillDragStart = null;
@@ -4904,7 +5035,8 @@ var MarchingAntsOverlay = class {
     const clipRange = this.copyRange ?? this.cutRange;
     const selRect = this.selectionRange ? measureRange2(this.container, this.selectionRange, this.colOffset) : null;
     const clipRangeMatchesSel = this.selectionRange != null && clipRange != null && rangesEqual(this.selectionRange, clipRange);
-    if (selRect && !clipRangeMatchesSel) {
+    const isSingleCell = this.selectionRange != null && this.selectionRange.startRow === this.selectionRange.endRow && this.selectionRange.startCol === this.selectionRange.endCol;
+    if (selRect && !clipRangeMatchesSel && !isSingleCell) {
       if (!this.selSvg) {
         this.selSvg = this.createSvg(4);
         this.container.appendChild(this.selSvg);
@@ -5766,6 +5898,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 {
@@ -493,10 +494,11 @@
   padding: 6px 12px;
   box-sizing: border-box;
   font-size: 12px;
+  line-height: 20px;
   color: var(--ogrid-muted, #616161);
   background: var(--ogrid-bg-subtle, #f3f2f1);
   border-top: 1px solid var(--ogrid-border, #e0e0e0);
-  min-height: 28px;
+  min-height: 33px;
 }
 
 .ogrid-status-part {

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/dist/types/state/VirtualScrollState.d.ts

@@ -19,6 +19,7 @@ export declare class VirtualScrollState {
     private _totalRows;
     private rafId;
     private _ro;
+    private _resizeRafId;
     private _cachedRange;
     constructor(config?: IVirtualScrollConfig);
     /** Whether virtual scrolling is active (enabled + meets the row threshold). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.1.13",
+  "version": "2.1.15",
   "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.13"
+    "@alaarab/ogrid-core": "2.1.15"
   },
   "sideEffects": [
     "**/*.css"