@alaarab/ogrid-js 2.1.14 → 2.2.0

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;
@@ -694,6 +710,66 @@ function calculateDropTarget(params) {
   }
   return { targetIndex, indicatorX };
 }
+function computeVisibleColumnRange(scrollLeft, columnWidths, containerWidth, overscan = 2) {
+  if (columnWidths.length === 0 || containerWidth <= 0) {
+    return { startIndex: 0, endIndex: -1, leftOffset: 0, rightOffset: 0 };
+  }
+  let cumWidth = 0;
+  let rawStart = columnWidths.length;
+  let rawEnd = -1;
+  for (let i = 0; i < columnWidths.length; i++) {
+    const colStart = cumWidth;
+    cumWidth += columnWidths[i];
+    if (cumWidth > scrollLeft && rawStart === columnWidths.length) {
+      rawStart = i;
+    }
+    if (colStart < scrollLeft + containerWidth) {
+      rawEnd = i;
+    }
+  }
+  if (rawStart > rawEnd) {
+    return { startIndex: 0, endIndex: -1, leftOffset: 0, rightOffset: 0 };
+  }
+  const startIndex = Math.max(0, rawStart - overscan);
+  const endIndex = Math.min(columnWidths.length - 1, rawEnd + overscan);
+  let leftOffset = 0;
+  for (let i = 0; i < startIndex; i++) {
+    leftOffset += columnWidths[i];
+  }
+  let rightOffset = 0;
+  for (let i = endIndex + 1; i < columnWidths.length; i++) {
+    rightOffset += columnWidths[i];
+  }
+  return { startIndex, endIndex, leftOffset, rightOffset };
+}
+function partitionColumnsForVirtualization(visibleCols, columnRange, pinnedColumns) {
+  const pinnedLeft = [];
+  const pinnedRight = [];
+  const unpinned = [];
+  for (const col of visibleCols) {
+    const pin = pinnedColumns?.[col.columnId];
+    if (pin === "left") pinnedLeft.push(col);
+    else if (pin === "right") pinnedRight.push(col);
+    else unpinned.push(col);
+  }
+  if (!columnRange || columnRange.endIndex < 0) {
+    return {
+      pinnedLeft,
+      virtualizedUnpinned: unpinned,
+      pinnedRight,
+      leftSpacerWidth: 0,
+      rightSpacerWidth: 0
+    };
+  }
+  const virtualizedUnpinned = unpinned.slice(columnRange.startIndex, columnRange.endIndex + 1);
+  return {
+    pinnedLeft,
+    virtualizedUnpinned,
+    pinnedRight,
+    leftSpacerWidth: columnRange.leftOffset,
+    rightSpacerWidth: columnRange.rightOffset
+  };
+}
 function computeVisibleRange(scrollTop, rowHeight, containerHeight, totalRows, overscan = 5) {
   if (totalRows <= 0 || rowHeight <= 0 || containerHeight <= 0) {
     return { startIndex: 0, endIndex: 0, offsetTop: 0, offsetBottom: 0 };
@@ -721,6 +797,235 @@ function getScrollTopForRow(rowIndex, rowHeight, containerHeight, align = "start
       return Math.max(0, rowTop - containerHeight + rowHeight);
   }
 }
+function workerBody() {
+  const ctx = self;
+  ctx.onmessage = (e) => {
+    const msg = e.data;
+    if (msg.type !== "sort-filter") return;
+    const { requestId, values, filters, sort } = msg;
+    const rowCount = values.length;
+    let indices = [];
+    const filterEntries = Object.entries(filters);
+    if (filterEntries.length === 0) {
+      indices = new Array(rowCount);
+      for (let i = 0; i < rowCount; i++) indices[i] = i;
+    } else {
+      for (let r = 0; r < rowCount; r++) {
+        let pass = true;
+        for (let f = 0; f < filterEntries.length; f++) {
+          const colIdx = Number(filterEntries[f][0]);
+          const filter = filterEntries[f][1];
+          const cellVal = values[r][colIdx];
+          switch (filter.type) {
+            case "text": {
+              const trimmed = filter.value.trim().toLowerCase();
+              if (trimmed && !String(cellVal ?? "").toLowerCase().includes(trimmed)) {
+                pass = false;
+              }
+              break;
+            }
+            case "multiSelect": {
+              if (filter.value.length > 0) {
+                const set = new Set(filter.value);
+                if (!set.has(String(cellVal ?? ""))) {
+                  pass = false;
+                }
+              }
+              break;
+            }
+            case "date": {
+              if (cellVal == null) {
+                pass = false;
+                break;
+              }
+              const ts = new Date(String(cellVal)).getTime();
+              if (isNaN(ts)) {
+                pass = false;
+                break;
+              }
+              if (filter.value.from) {
+                const fromTs = (/* @__PURE__ */ new Date(filter.value.from + "T00:00:00")).getTime();
+                if (ts < fromTs) {
+                  pass = false;
+                  break;
+                }
+              }
+              if (filter.value.to) {
+                const toTs = (/* @__PURE__ */ new Date(filter.value.to + "T23:59:59.999")).getTime();
+                if (ts > toTs) {
+                  pass = false;
+                  break;
+                }
+              }
+              break;
+            }
+          }
+          if (!pass) break;
+        }
+        if (pass) indices.push(r);
+      }
+    }
+    if (sort) {
+      const { columnIndex, direction } = sort;
+      const dir = direction === "asc" ? 1 : -1;
+      indices.sort((a, b) => {
+        const av = values[a][columnIndex];
+        const bv = values[b][columnIndex];
+        if (av == null && bv == null) return 0;
+        if (av == null) return -1 * dir;
+        if (bv == null) return 1 * dir;
+        if (typeof av === "number" && typeof bv === "number") {
+          return av === bv ? 0 : av > bv ? dir : -dir;
+        }
+        const sa = String(av).toLowerCase();
+        const sb = String(bv).toLowerCase();
+        return sa === sb ? 0 : sa > sb ? dir : -dir;
+      });
+    }
+    const response = {
+      type: "sort-filter-result",
+      requestId,
+      indices
+    };
+    ctx.postMessage(response);
+  };
+}
+var workerInstance = null;
+var requestCounter = 0;
+var pendingRequests = /* @__PURE__ */ new Map();
+function createSortFilterWorker() {
+  if (workerInstance) return workerInstance;
+  if (typeof Worker === "undefined" || typeof Blob === "undefined" || typeof URL === "undefined") {
+    return null;
+  }
+  try {
+    const fnStr = workerBody.toString();
+    const blob = new Blob(
+      [`(${fnStr})()`],
+      { type: "application/javascript" }
+    );
+    const url = URL.createObjectURL(blob);
+    workerInstance = new Worker(url);
+    URL.revokeObjectURL(url);
+    workerInstance.onmessage = (e) => {
+      const { requestId, indices } = e.data;
+      const pending = pendingRequests.get(requestId);
+      if (pending) {
+        pendingRequests.delete(requestId);
+        pending.resolve(indices);
+      }
+    };
+    workerInstance.onerror = (err) => {
+      for (const [id, pending] of pendingRequests) {
+        pending.reject(new Error(err.message || "Worker error"));
+        pendingRequests.delete(id);
+      }
+    };
+    return workerInstance;
+  } catch {
+    return null;
+  }
+}
+function terminateSortFilterWorker() {
+  if (workerInstance) {
+    workerInstance.terminate();
+    workerInstance = null;
+  }
+  for (const [id, pending] of pendingRequests) {
+    pending.reject(new Error("Worker terminated"));
+    pendingRequests.delete(id);
+  }
+}
+function extractValueMatrix(data, columns) {
+  const matrix = new Array(data.length);
+  for (let r = 0; r < data.length; r++) {
+    const row = new Array(columns.length);
+    for (let c = 0; c < columns.length; c++) {
+      const val = getCellValue(data[r], columns[c]);
+      if (val == null) {
+        row[c] = null;
+      } else if (typeof val === "string" || typeof val === "number" || typeof val === "boolean") {
+        row[c] = val;
+      } else {
+        row[c] = String(val);
+      }
+    }
+    matrix[r] = row;
+  }
+  return matrix;
+}
+function processClientSideDataAsync(data, columns, filters, sortBy, sortDirection) {
+  if (sortBy) {
+    const sortCol = columns.find((c) => c.columnId === sortBy);
+    if (sortCol?.compare) {
+      return Promise.resolve(processClientSideData(data, columns, filters, sortBy, sortDirection));
+    }
+  }
+  const worker = createSortFilterWorker();
+  if (!worker) {
+    return Promise.resolve(processClientSideData(data, columns, filters, sortBy, sortDirection));
+  }
+  const columnIndexMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < columns.length; i++) {
+    columnIndexMap.set(columns[i].columnId, i);
+  }
+  const values = extractValueMatrix(data, columns);
+  const columnMeta = columns.map((col, idx) => ({
+    type: col.type ?? "text",
+    index: idx
+  }));
+  const workerFilters = {};
+  for (const col of columns) {
+    const filterKey = getFilterField(col);
+    const val = filters[filterKey];
+    if (!val) continue;
+    const colIdx = columnIndexMap.get(col.columnId);
+    if (colIdx === void 0) continue;
+    switch (val.type) {
+      case "text":
+        workerFilters[colIdx] = { type: "text", value: val.value };
+        break;
+      case "multiSelect":
+        workerFilters[colIdx] = { type: "multiSelect", value: val.value };
+        break;
+      case "date":
+        workerFilters[colIdx] = { type: "date", value: { from: val.value.from, to: val.value.to } };
+        break;
+      // 'people' filter has a UserLike object — fall back to sync
+      case "people":
+        return Promise.resolve(processClientSideData(data, columns, filters, sortBy, sortDirection));
+    }
+  }
+  let sort;
+  if (sortBy) {
+    const sortColIdx = columnIndexMap.get(sortBy);
+    if (sortColIdx !== void 0) {
+      sort = { columnIndex: sortColIdx, direction: sortDirection ?? "asc" };
+    }
+  }
+  const requestId = ++requestCounter;
+  return new Promise((resolve, reject) => {
+    pendingRequests.set(requestId, {
+      resolve: (indices) => {
+        const result = new Array(indices.length);
+        for (let i = 0; i < indices.length; i++) {
+          result[i] = data[indices[i]];
+        }
+        resolve(result);
+      },
+      reject
+    });
+    const request = {
+      type: "sort-filter",
+      requestId,
+      values,
+      columnMeta,
+      filters: workerFilters,
+      sort
+    };
+    worker.postMessage(request);
+  });
+}
 function getHeaderFilterConfig(col, input) {
   const filterable = isFilterConfig(col.filterable) ? col.filterable : null;
   const filterType = filterable?.type ?? "none";
@@ -1261,7 +1566,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 };
 }
@@ -1651,6 +1956,7 @@ var GridState = class {
     this._ariaLabel = options.ariaLabel;
     this._stickyHeader = options.stickyHeader ?? true;
     this._fullScreen = options.fullScreen ?? false;
+    this._workerSort = options.workerSort ?? false;
     if (!this._dataSource) {
       this._filterOptions = deriveFilterOptionsFromData(
         this._data,
@@ -1754,6 +2060,31 @@ var GridState = class {
     const items = filtered.slice(startIdx, endIdx);
     return { items, totalCount };
   }
+  /** Whether worker sort should be used for the current data set. */
+  get useWorkerSort() {
+    return this._workerSort === true || this._workerSort === "auto" && this._data.length > 5e3;
+  }
+  /**
+   * Async version of getProcessedItems that offloads sort/filter to a Web Worker.
+   * Falls back to sync when worker sort is not active.
+   */
+  async getProcessedItemsAsync() {
+    if (this.isServerSide || !this.useWorkerSort) {
+      return this.getProcessedItems();
+    }
+    const filtered = await processClientSideDataAsync(
+      this._data,
+      this._columns,
+      this._filters,
+      this._sort?.field,
+      this._sort?.direction
+    );
+    const totalCount = filtered.length;
+    const startIdx = (this._page - 1) * this._pageSize;
+    const endIdx = startIdx + this._pageSize;
+    const items = filtered.slice(startIdx, endIdx);
+    return { items, totalCount };
+  }
   // --- Server-side fetch ---
   fetchServerData() {
     if (!this._dataSource) return;
@@ -1958,6 +2289,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;
@@ -2132,6 +2474,9 @@ var TableRenderer = class {
     this.table = document.createElement("table");
     this.table.className = "ogrid-table";
     this.table.setAttribute("role", "grid");
+    if (this.virtualScrollState) {
+      this.table.setAttribute("data-virtual-scroll", "");
+    }
     this.thead = document.createElement("thead");
     if (this.state.stickyHeader) {
       this.thead.classList.add("ogrid-sticky-header");
@@ -2227,6 +2572,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];
@@ -2234,7 +2586,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;
@@ -2245,28 +2596,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) {
@@ -2536,6 +2889,23 @@ var TableRenderer = class {
         this.tbody.appendChild(topSpacer);
       }
     }
+    const colVirtActive = vs?.columnVirtualizationEnabled === true && vs.columnRange != null;
+    let renderCols = visibleCols;
+    let colGlobalIndexMap = null;
+    let colLeftSpacerWidth = 0;
+    let colRightSpacerWidth = 0;
+    if (colVirtActive && vs) {
+      const partition = partitionColumnsForVirtualization(
+        visibleCols,
+        vs.columnRange,
+        this.interactionState?.pinnedColumns
+      );
+      const combined = [...partition.pinnedLeft, ...partition.virtualizedUnpinned, ...partition.pinnedRight];
+      colGlobalIndexMap = combined.map((c) => visibleCols.indexOf(c));
+      renderCols = combined;
+      colLeftSpacerWidth = partition.leftSpacerWidth;
+      colRightSpacerWidth = partition.rightSpacerWidth;
+    }
     for (let rowIndex = startIndex; rowIndex <= endIndex; rowIndex++) {
       const item = items[rowIndex];
       if (!item) continue;
@@ -2575,9 +2945,18 @@ var TableRenderer = class {
         td.textContent = String(rowNumberOffset + rowIndex + 1);
         tr.appendChild(td);
       }
-      for (let colIndex = 0; colIndex < visibleCols.length; colIndex++) {
-        const col = visibleCols[colIndex];
-        const globalColIndex = colIndex + colOffset;
+      if (colLeftSpacerWidth > 0) {
+        const spacerTd = document.createElement("td");
+        spacerTd.style.width = `${colLeftSpacerWidth}px`;
+        spacerTd.style.minWidth = `${colLeftSpacerWidth}px`;
+        spacerTd.style.padding = "0";
+        spacerTd.style.border = "none";
+        spacerTd.setAttribute("aria-hidden", "true");
+        tr.appendChild(spacerTd);
+      }
+      for (let colIndex = 0; colIndex < renderCols.length; colIndex++) {
+        const col = renderCols[colIndex];
+        const globalColIndex = (colGlobalIndexMap ? colGlobalIndexMap[colIndex] : colIndex) + colOffset;
         const td = document.createElement("td");
         td.className = "ogrid-cell";
         td.setAttribute("data-column-id", col.columnId);
@@ -2645,6 +3024,15 @@ var TableRenderer = class {
         }
         tr.appendChild(td);
       }
+      if (colRightSpacerWidth > 0) {
+        const spacerTd = document.createElement("td");
+        spacerTd.style.width = `${colRightSpacerWidth}px`;
+        spacerTd.style.minWidth = `${colRightSpacerWidth}px`;
+        spacerTd.style.padding = "0";
+        spacerTd.style.border = "none";
+        spacerTd.setAttribute("aria-hidden", "true");
+        tr.appendChild(spacerTd);
+      }
       this.tbody.appendChild(tr);
     }
     if (isVirtual && vs) {
@@ -3989,7 +4377,16 @@ 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 };
+    // Column virtualization
+    this._scrollLeft = 0;
+    this._scrollLeftRafId = 0;
+    this._containerWidth = 0;
+    this._columnWidths = [];
+    this._cachedColumnRange = null;
+    this._roWidth = null;
+    this._resizeWidthRafId = 0;
     this._config = config ?? { enabled: false };
     validateVirtualScrollConfig(this._config);
   }
@@ -4018,6 +4415,71 @@ var VirtualScrollState = class {
   get totalHeight() {
     return computeTotalHeight(this._totalRows, this._config.rowHeight ?? DEFAULT_ROW_HEIGHT);
   }
+  /** Whether column virtualization is active. */
+  get columnVirtualizationEnabled() {
+    return this._config.columns === true;
+  }
+  /** Get the current visible column range (null when column virtualization is disabled). */
+  get columnRange() {
+    return this._cachedColumnRange;
+  }
+  /** Set the unpinned column widths for horizontal virtualization. */
+  setColumnWidths(widths) {
+    this._columnWidths = widths;
+    this.recomputeColumnRange();
+  }
+  /** Handle horizontal scroll events. RAF-throttled. */
+  handleHorizontalScroll(scrollLeft) {
+    if (!this.columnVirtualizationEnabled) return;
+    if (this._scrollLeftRafId) cancelAnimationFrame(this._scrollLeftRafId);
+    this._scrollLeftRafId = requestAnimationFrame(() => {
+      this._scrollLeftRafId = 0;
+      this._scrollLeft = scrollLeft;
+      this.recomputeColumnRange();
+    });
+  }
+  /** Observe a container element for width changes (column virtualization). */
+  observeContainerWidth(el) {
+    this.disconnectWidthObserver();
+    if (typeof ResizeObserver !== "undefined") {
+      this._roWidth = new ResizeObserver((entries) => {
+        if (entries.length === 0) return;
+        this._containerWidth = entries[0].contentRect.width;
+        if (this._resizeWidthRafId) cancelAnimationFrame(this._resizeWidthRafId);
+        this._resizeWidthRafId = requestAnimationFrame(() => {
+          this._resizeWidthRafId = 0;
+          this.recomputeColumnRange();
+        });
+      });
+      this._roWidth.observe(el);
+    }
+    this._containerWidth = el.clientWidth;
+  }
+  disconnectWidthObserver() {
+    if (this._roWidth) {
+      this._roWidth.disconnect();
+      this._roWidth = null;
+    }
+  }
+  /** Recompute visible column range and emit if changed. */
+  recomputeColumnRange() {
+    if (!this.columnVirtualizationEnabled || this._columnWidths.length === 0 || this._containerWidth <= 0) {
+      if (this._cachedColumnRange !== null) {
+        this._cachedColumnRange = null;
+        this.emitter.emit("columnRangeChanged", { columnRange: null });
+      }
+      return;
+    }
+    const overscan = this._config.columnOverscan ?? 2;
+    const newRange = computeVisibleColumnRange(this._scrollLeft, this._columnWidths, this._containerWidth, overscan);
+    const prev = this._cachedColumnRange;
+    if (!prev || prev.startIndex !== newRange.startIndex || prev.endIndex !== newRange.endIndex) {
+      this._cachedColumnRange = newRange;
+      this.emitter.emit("columnRangeChanged", { columnRange: newRange });
+    } else {
+      this._cachedColumnRange = newRange;
+    }
+  }
   /** Handle scroll events from the table container. RAF-throttled. */
   handleScroll(scrollTop) {
     if (this.rafId) cancelAnimationFrame(this.rafId);
@@ -4052,11 +4514,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);
     }
@@ -4092,13 +4556,21 @@ var VirtualScrollState = class {
     this.emitter.on("rangeChanged", handler);
     return () => this.emitter.off("rangeChanged", handler);
   }
+  onColumnRangeChanged(handler) {
+    this.emitter.on("columnRangeChanged", handler);
+    return () => this.emitter.off("columnRangeChanged", handler);
+  }
   onConfigChanged(handler) {
     this.emitter.on("configChanged", handler);
     return () => this.emitter.off("configChanged", handler);
   }
   destroy() {
     if (this.rafId) cancelAnimationFrame(this.rafId);
+    if (this._resizeRafId) cancelAnimationFrame(this._resizeRafId);
+    if (this._scrollLeftRafId) cancelAnimationFrame(this._scrollLeftRafId);
+    if (this._resizeWidthRafId) cancelAnimationFrame(this._resizeWidthRafId);
     this.disconnectObserver();
+    this.disconnectWidthObserver();
     this.emitter.removeAllListeners();
   }
 };
@@ -4744,7 +5216,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;
@@ -4996,7 +5468,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);
@@ -6387,16 +6860,25 @@ var OGrid = class {
         this.renderer.setVirtualScrollState(this.virtualScrollState);
         const handleScroll = () => {
           this.virtualScrollState?.handleScroll(this.tableContainer.scrollTop);
+          this.virtualScrollState?.handleHorizontalScroll(this.tableContainer.scrollLeft);
         };
         this.tableContainer.addEventListener("scroll", handleScroll, { passive: true });
         this.unsubscribes.push(() => {
           this.tableContainer.removeEventListener("scroll", handleScroll);
         });
+        if (options.virtualScroll?.columns) {
+          this.virtualScrollState.observeContainerWidth(this.tableContainer);
+        }
         this.unsubscribes.push(
           this.virtualScrollState.onRangeChanged(() => {
             this.renderingHelper.updateRendererInteractionState();
           })
         );
+        this.unsubscribes.push(
+          this.virtualScrollState.onColumnRangeChanged(() => {
+            this.renderingHelper.updateRendererInteractionState();
+          })
+        );
         this.api.scrollToRow = (index, opts) => {
           this.virtualScrollState?.scrollToRow(index, this.tableContainer, opts?.align);
         };
@@ -6639,4 +7121,4 @@ var OGrid = class {
   }
 };
 
-export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CellDescriptorCache, ClipboardState, ColumnChooser, ColumnPinningState, ColumnReorderState, ColumnResizeState, ContextMenu, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, EventEmitter, FillHandleState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridState, HeaderFilter, HeaderFilterState, InlineCellEditor, KeyboardNavState, MAX_PAGE_BUTTONS, MarchingAntsOverlay, OGrid, OGridEventWiring, OGridRendering, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, PaginationControls, ROW_NUMBER_COLUMN_WIDTH, RowSelectionState, SIDEBAR_TRANSITION_MS, SelectionState, SideBar, SideBarState, StatusBar, TableLayoutState, TableRenderer, UndoRedoStack, UndoRedoState, VirtualScrollState, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCellIndex, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isColumnEditable, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, validateColumns, validateRowIds, validateVirtualScrollConfig };
+export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CellDescriptorCache, ClipboardState, ColumnChooser, ColumnPinningState, ColumnReorderState, ColumnResizeState, ContextMenu, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, EventEmitter, FillHandleState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridState, HeaderFilter, HeaderFilterState, InlineCellEditor, KeyboardNavState, MAX_PAGE_BUTTONS, MarchingAntsOverlay, OGrid, OGridEventWiring, OGridRendering, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, PaginationControls, ROW_NUMBER_COLUMN_WIDTH, RowSelectionState, SIDEBAR_TRANSITION_MS, SelectionState, SideBar, SideBarState, StatusBar, TableLayoutState, TableRenderer, UndoRedoStack, UndoRedoState, VirtualScrollState, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCellIndex, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleColumnRange, computeVisibleRange, createSortFilterWorker, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, extractValueMatrix, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isColumnEditable, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, partitionColumnsForVirtualization, processClientSideData, processClientSideDataAsync, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, terminateSortFilterWorker, toUserLike, triggerCsvDownload, validateColumns, validateRowIds, validateVirtualScrollConfig };

package/dist/styles/ogrid.css

@@ -329,8 +329,16 @@
   border-bottom: 1px solid var(--ogrid-border, #e8e8e8);
   position: relative;
   color: var(--ogrid-fg, #242424);
+  contain: content;
 }
 
+/* Pinned columns need contain: none because contain breaks position: sticky */
+.ogrid-table td[data-pinned='left'],
+.ogrid-table td[data-pinned='right'] { contain: none; }
+
+/* content-visibility: auto on rows for non-virtualized grids */
+.ogrid-table:not([data-virtual-scroll]) tbody tr { content-visibility: auto; }
+
 .ogrid-table tbody tr:last-child td {
   border-bottom: none;
 }
@@ -494,10 +502,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/state/GridState.d.ts

@@ -28,6 +28,7 @@ export declare class GridState<T> {
     private _ariaLabel?;
     private _stickyHeader;
     private _fullScreen;
+    private _workerSort;
     private _filterOptions;
     private _columnOrder;
     private _visibleColsCache;
@@ -60,6 +61,16 @@ export declare class GridState<T> {
         items: T[];
         totalCount: number;
     };
+    /** Whether worker sort should be used for the current data set. */
+    get useWorkerSort(): boolean;
+    /**
+     * Async version of getProcessedItems that offloads sort/filter to a Web Worker.
+     * Falls back to sync when worker sort is not active.
+     */
+    getProcessedItemsAsync(): Promise<{
+        items: T[];
+        totalCount: number;
+    }>;
     private fetchServerData;
     setData(data: T[]): void;
     setPage(page: number): void;

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

@@ -1,8 +1,11 @@
-import type { IVirtualScrollConfig, IVisibleRange } from '@alaarab/ogrid-core';
+import type { IVirtualScrollConfig, IVisibleRange, IVisibleColumnRange } from '@alaarab/ogrid-core';
 interface VirtualScrollEvents extends Record<string, unknown> {
     rangeChanged: {
         visibleRange: IVisibleRange;
     };
+    columnRangeChanged: {
+        columnRange: IVisibleColumnRange | null;
+    };
     configChanged: {
         config: IVirtualScrollConfig;
     };
@@ -19,7 +22,15 @@ export declare class VirtualScrollState {
     private _totalRows;
     private rafId;
     private _ro;
+    private _resizeRafId;
     private _cachedRange;
+    private _scrollLeft;
+    private _scrollLeftRafId;
+    private _containerWidth;
+    private _columnWidths;
+    private _cachedColumnRange;
+    private _roWidth;
+    private _resizeWidthRafId;
     constructor(config?: IVirtualScrollConfig);
     /** Whether virtual scrolling is active (enabled + meets the row threshold). */
     get enabled(): boolean;
@@ -31,6 +42,19 @@ export declare class VirtualScrollState {
     get visibleRange(): IVisibleRange;
     /** Get the total scrollable height for all rows. */
     get totalHeight(): number;
+    /** Whether column virtualization is active. */
+    get columnVirtualizationEnabled(): boolean;
+    /** Get the current visible column range (null when column virtualization is disabled). */
+    get columnRange(): IVisibleColumnRange | null;
+    /** Set the unpinned column widths for horizontal virtualization. */
+    setColumnWidths(widths: number[]): void;
+    /** Handle horizontal scroll events. RAF-throttled. */
+    handleHorizontalScroll(scrollLeft: number): void;
+    /** Observe a container element for width changes (column virtualization). */
+    observeContainerWidth(el: HTMLElement): void;
+    private disconnectWidthObserver;
+    /** Recompute visible column range and emit if changed. */
+    private recomputeColumnRange;
     /** Handle scroll events from the table container. RAF-throttled. */
     handleScroll(scrollTop: number): void;
     /** Scroll the container to bring a specific row into view. */
@@ -45,6 +69,7 @@ export declare class VirtualScrollState {
     /** Recompute visible range and emit if changed. */
     private recompute;
     onRangeChanged(handler: (data: VirtualScrollEvents['rangeChanged']) => void): () => void;
+    onColumnRangeChanged(handler: (data: VirtualScrollEvents['columnRangeChanged']) => void): () => void;
     onConfigChanged(handler: (data: VirtualScrollEvents['configChanged']) => void): () => void;
     destroy(): void;
 }

package/dist/types/types/gridTypes.d.ts

@@ -100,6 +100,13 @@ export interface OGridOptions<T> {
     onFirstDataRendered?: () => void;
     /** Virtual scrolling configuration. */
     virtualScroll?: IVirtualScrollConfig;
+    /**
+     * Offload sorting to a Web Worker to avoid blocking the main thread.
+     * - `true`: always use worker sort
+     * - `'auto'`: use worker sort when data.length > 5000
+     * - `false` (default): use synchronous sort
+     */
+    workerSort?: boolean | 'auto';
     /** Fixed row height in pixels. Overrides default row height (36px). */
     rowHeight?: number;
     /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */

package/package.json

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