@alaarab/ogrid-js 2.1.15 → 2.2.0

package/dist/esm/index.js

@@ -710,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 };
@@ -737,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";
@@ -1667,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,
@@ -1770,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;
@@ -2159,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");
@@ -2571,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;
@@ -2610,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);
@@ -2680,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) {
@@ -4026,6 +4379,14 @@ var VirtualScrollState = class {
     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);
   }
@@ -4054,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);
@@ -4130,6 +4556,10 @@ 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);
@@ -4137,7 +4567,10 @@ var VirtualScrollState = class {
   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();
   }
 };
@@ -6427,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);
         };
@@ -6679,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;
 }

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;
     };
@@ -21,6 +24,13 @@ export declare class VirtualScrollState {
     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;
@@ -32,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. */
@@ -46,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.15",
+  "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.15"
+    "@alaarab/ogrid-core": "2.2.0"
   },
   "sideEffects": [
     "**/*.css"