@alaarab/ogrid-react 2.1.14 → 2.2.0

package/dist/esm/index.js

@@ -507,23 +507,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;
@@ -699,6 +715,285 @@ 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 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 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";
@@ -1220,7 +1515,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 };
 }
@@ -1541,7 +1836,7 @@ function useFilterOptions(dataSource, fields) {
     );
     setFilterOptions(results);
     setLoadingOptions(EMPTY_LOADING);
-  }, [stableFields]);
+  }, [stableFields, dataSourceRef]);
   useEffect(() => {
     load().catch(() => {
     });
@@ -1703,11 +1998,13 @@ function useOGridDataFetching(params) {
     page,
     pageSize,
     onError,
-    onFirstDataRendered
+    onFirstDataRendered,
+    workerSort
   } = params;
   const isClientSide = !isServerSide;
+  const useWorker = workerSort === true || workerSort === "auto" && displayData.length > 5e3;
   const clientItemsAndTotal = useMemo(() => {
-    if (!isClientSide) return null;
+    if (!isClientSide || useWorker) return null;
     const rows = processClientSideData(
       displayData,
       columns,
@@ -1719,7 +2016,29 @@ function useOGridDataFetching(params) {
     const start = (page - 1) * pageSize;
     const paged = rows.slice(start, start + pageSize);
     return { items: paged, totalCount: total };
-  }, [isClientSide, displayData, columns, stableFilters, sort.field, sort.direction, page, pageSize]);
+  }, [isClientSide, useWorker, displayData, columns, stableFilters, sort.field, sort.direction, page, pageSize]);
+  const [asyncItems, setAsyncItems] = useState(null);
+  const asyncIdRef = useRef(0);
+  useEffect(() => {
+    if (!isClientSide || !useWorker) {
+      setAsyncItems(null);
+      return;
+    }
+    const id = ++asyncIdRef.current;
+    processClientSideDataAsync(
+      displayData,
+      columns,
+      stableFilters,
+      sort.field,
+      sort.direction
+    ).then((rows) => {
+      if (id !== asyncIdRef.current) return;
+      const total = rows.length;
+      const start = (page - 1) * pageSize;
+      const paged = rows.slice(start, start + pageSize);
+      setAsyncItems({ items: paged, totalCount: total });
+    });
+  }, [isClientSide, useWorker, displayData, columns, stableFilters, sort.field, sort.direction, page, pageSize]);
   const [serverItems, setServerItems] = useState([]);
   const [serverTotalCount, setServerTotalCount] = useState(0);
   const [serverLoading, setServerLoading] = useState(true);
@@ -1752,9 +2071,10 @@ function useOGridDataFetching(params) {
     }).finally(() => {
       if (id === fetchIdRef.current) setServerLoading(false);
     });
-  }, [isServerSide, page, pageSize, sort.field, sort.direction, stableFilters, refreshCounter]);
-  const displayItems = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.items : serverItems;
-  const displayTotalCount = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.totalCount : serverTotalCount;
+  }, [isServerSide, page, pageSize, sort.field, sort.direction, stableFilters, refreshCounter, dataSourceRef, onErrorRef]);
+  const clientResult = clientItemsAndTotal ?? asyncItems;
+  const displayItems = isClientSide && clientResult ? clientResult.items : serverItems;
+  const displayTotalCount = isClientSide && clientResult ? clientResult.totalCount : serverTotalCount;
   const onFirstDataRenderedRef = useLatestRef(onFirstDataRendered);
   const firstDataRenderedRef = useRef(false);
   useEffect(() => {
@@ -1762,7 +2082,7 @@ function useOGridDataFetching(params) {
       firstDataRenderedRef.current = true;
       onFirstDataRenderedRef.current?.();
     }
-  }, [displayItems.length]);
+  }, [displayItems.length, onFirstDataRenderedRef]);
   return {
     displayItems,
     displayTotalCount,
@@ -1861,34 +2181,35 @@ function useOGrid(props, ref) {
     virtualScroll,
     rowHeight,
     density = "normal",
+    workerSort,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy
   } = props;
   const getRowIdStableRef = useLatestRef(getRowIdProp);
   const getRowId = useCallback((item) => getRowIdStableRef.current(item), [getRowIdStableRef]);
   const onColumnOrderChangeRef = useLatestRef(onColumnOrderChangeProp);
+  const hasColumnOrderChange = onColumnOrderChangeProp != null;
   const onColumnOrderChange = useMemo(
-    () => onColumnOrderChangeProp ? (order) => onColumnOrderChangeRef.current?.(order) : void 0,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [!!onColumnOrderChangeProp]
+    () => hasColumnOrderChange ? (order) => onColumnOrderChangeRef.current?.(order) : void 0,
+    [hasColumnOrderChange, onColumnOrderChangeRef]
   );
   const onCellValueChangedRef = useLatestRef(onCellValueChangedProp);
+  const hasCellValueChanged = onCellValueChangedProp != null;
   const onCellValueChanged = useMemo(
-    () => onCellValueChangedProp ? (event) => onCellValueChangedRef.current?.(event) : void 0,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [!!onCellValueChangedProp]
+    () => hasCellValueChanged ? (event) => onCellValueChangedRef.current?.(event) : void 0,
+    [hasCellValueChanged, onCellValueChangedRef]
   );
   const onUndoRef = useLatestRef(onUndoProp);
+  const hasUndo = onUndoProp != null;
   const onUndo = useMemo(
-    () => onUndoProp ? () => onUndoRef.current?.() : void 0,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [!!onUndoProp]
+    () => hasUndo ? () => onUndoRef.current?.() : void 0,
+    [hasUndo, onUndoRef]
   );
   const onRedoRef = useLatestRef(onRedoProp);
+  const hasRedo = onRedoProp != null;
   const onRedo = useMemo(
-    () => onRedoProp ? () => onRedoRef.current?.() : void 0,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [!!onRedoProp]
+    () => hasRedo ? () => onRedoRef.current?.() : void 0,
+    [hasRedo, onRedoRef]
   );
   const columnChooserPlacement = columnChooserProp === false ? "none" : columnChooserProp === "sidebar" ? "sidebar" : "toolbar";
   const columns = useMemo(() => flattenColumns(columnsProp), [columnsProp]);
@@ -1896,7 +2217,7 @@ function useOGrid(props, ref) {
   const rowIdsValidatedRef = useRef(false);
   useEffect(() => {
     validateColumns(columns);
-  }, []);
+  }, [columns]);
   const defaultSortField = defaultSortBy ?? columns[0]?.columnId ?? "";
   const [internalData, setInternalData] = useState([]);
   const [internalLoading, setInternalLoading] = useState(false);
@@ -1934,7 +2255,8 @@ function useOGrid(props, ref) {
     page: paginationState.page,
     pageSize: paginationState.pageSize,
     onError,
-    onFirstDataRendered
+    onFirstDataRendered,
+    workerSort
   });
   useEffect(() => {
     const items = dataFetchingState.displayItems;
@@ -1992,7 +2314,13 @@ function useOGrid(props, ref) {
     [selectedRows, onSelectionChange]
   );
   const [columnWidthOverrides, setColumnWidthOverrides] = useState({});
-  const [pinnedOverrides, setPinnedOverrides] = useState({});
+  const [pinnedOverrides, setPinnedOverrides] = useState(() => {
+    const initial = {};
+    for (const col of flattenColumns(columnsProp)) {
+      if (col.pinned) initial[col.columnId] = col.pinned;
+    }
+    return initial;
+  });
   const handleColumnResized = useCallback(
     (columnId, width) => {
       setColumnWidthOverrides((prev) => ({ ...prev, [columnId]: width }));
@@ -2518,15 +2846,17 @@ function useCellSelection(params) {
         }
       }
       if (!cellIndex) cellIndex = buildCellIndex(wrapperRef.current);
+      let rebuilt = false;
       for (let r = minR; r <= maxR; r++) {
         for (let c = minC; c <= maxC; c++) {
           const key = `${r},${c + colOff}`;
           let el = cellIndex?.get(key);
-          if (el && !el.isConnected) {
+          if (el && !el.isConnected && !rebuilt) {
+            rebuilt = true;
             cellIndex = buildCellIndex(wrapperRef.current);
             el = cellIndex?.get(key);
           }
-          if (el) {
+          if (el && el.isConnected) {
             styleCellInRange(el, r, c, minR, maxR, minC, maxC, anchor);
           }
         }
@@ -2661,10 +2991,13 @@ function useCellSelection(params) {
         const finalRange = liveDragRangeRef.current;
         if (finalRange) {
           setSelectionRange(finalRange);
-          setActiveCell({
-            rowIndex: finalRange.endRow,
-            columnIndex: finalRange.endCol + colOffsetRef.current
-          });
+          const anchor = dragStartRef.current;
+          if (anchor) {
+            setActiveCell({
+              rowIndex: anchor.row,
+              columnIndex: anchor.col + colOffsetRef.current
+            });
+          }
         }
       }
       clearDragAttrs();
@@ -3129,8 +3462,7 @@ function useUndoRedo(params) {
       }
       onCellValueChangedRef.current(event);
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getStack]
+    [getStack, onCellValueChangedRef]
   );
   const beginBatch = useCallback(() => {
     getStack().beginBatch();
@@ -3156,7 +3488,7 @@ function useUndoRedo(params) {
         newValue: ev.oldValue
       });
     }
-  }, [getStack]);
+  }, [getStack, onCellValueChangedRef]);
   const redo = useCallback(() => {
     if (!onCellValueChangedRef.current) return;
     const stack = getStack();
@@ -3167,7 +3499,7 @@ function useUndoRedo(params) {
     for (const ev of nextBatch) {
       onCellValueChangedRef.current(ev);
     }
-  }, [getStack]);
+  }, [getStack, onCellValueChangedRef]);
   return {
     onCellValueChanged: onCellValueChanged ? wrapped : void 0,
     undo,
@@ -3307,7 +3639,7 @@ function useFillHandle(params) {
         endCol: end.endCol
       });
       setSelectionRange(norm);
-      setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOffsetRef.current });
+      setActiveCell({ rowIndex: fillDrag.startRow, columnIndex: fillDrag.startCol + colOffsetRef.current });
       const fillEvents = applyFillValues(norm, fillDrag.startRow, fillDrag.startCol, items, visibleCols);
       if (fillEvents.length > 0) {
         beginBatch?.();
@@ -3334,7 +3666,8 @@ function useFillHandle(params) {
     beginBatch,
     endBatch,
     colOffsetRef,
-    wrapperRef
+    wrapperRef,
+    onCellValueChangedRef
   ]);
   const selectionRangeRef = useRef(selectionRange);
   selectionRangeRef.current = selectionRange;
@@ -3369,7 +3702,7 @@ function useFillHandle(params) {
       for (const evt of fillEvents) onCellValueChangedRef.current(evt);
       endBatch?.();
     }
-  }, [editable, beginBatch, endBatch]);
+  }, [editable, beginBatch, endBatch, onCellValueChangedRef, itemsRef, visibleColsRef]);
   return { fillDrag, setFillDrag, handleFillHandleMouseDown, fillDown };
 }
 function useTableLayout(params) {
@@ -3869,8 +4202,7 @@ function useDataGridEditing(params) {
         setSelectionRange({ startRow: newRow, startCol: localCol, endRow: newRow, endCol: localCol });
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setEditingCell, setPendingEditorValue, setActiveCell, setSelectionRange, colOffset, visibleColsRef, itemsLengthRef]
+    [setEditingCell, setPendingEditorValue, setActiveCell, setSelectionRange, colOffset, visibleColsRef, itemsLengthRef, onCellValueChangedRef]
   );
   const cancelPopoverEdit = useCallback(() => {
     setEditingCell(null);
@@ -6003,11 +6335,14 @@ function useVirtualScroll(params) {
     enabled,
     overscan = 5,
     threshold = DEFAULT_PASSTHROUGH_THRESHOLD,
-    containerRef
+    containerRef,
+    columnVirtualization = false,
+    columnWidths,
+    columnOverscan = 2
   } = params;
   useEffect(() => {
     validateVirtualScrollConfig({ enabled, rowHeight });
-  }, []);
+  }, [enabled, rowHeight]);
   const isActive = enabled && totalRows >= threshold;
   const getScrollElement = useCallback(
     () => containerRef.current,
@@ -6062,11 +6397,51 @@ function useVirtualScroll(params) {
     },
     [isActive, containerRef, rowHeight]
   );
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const scrollLeftRaf = useRef(0);
+  const onHorizontalScroll = useCallback(
+    (sl) => {
+      if (scrollLeftRaf.current) cancelAnimationFrame(scrollLeftRaf.current);
+      scrollLeftRaf.current = requestAnimationFrame(() => {
+        scrollLeftRaf.current = 0;
+        setScrollLeft(sl);
+      });
+    },
+    []
+  );
+  useEffect(() => {
+    return () => {
+      if (scrollLeftRaf.current) cancelAnimationFrame(scrollLeftRaf.current);
+    };
+  }, []);
+  const [containerWidth, setContainerWidth] = useState(0);
+  useEffect(() => {
+    if (!columnVirtualization) return;
+    const el = containerRef.current;
+    if (!el) return;
+    setContainerWidth(el.clientWidth);
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      if (entries.length > 0) {
+        setContainerWidth(entries[0].contentRect.width);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [columnVirtualization, containerRef]);
+  const columnRange = useMemo(() => {
+    if (!columnVirtualization || !columnWidths || columnWidths.length === 0 || containerWidth <= 0) {
+      return null;
+    }
+    return computeVisibleColumnRange(scrollLeft, columnWidths, containerWidth, columnOverscan);
+  }, [columnVirtualization, columnWidths, containerWidth, scrollLeft, columnOverscan]);
   return {
     virtualizer: isActive ? virtualizer : null,
     totalHeight,
     visibleRange: activeRange,
-    scrollToIndex
+    scrollToIndex,
+    columnRange,
+    onHorizontalScroll: columnVirtualization ? onHorizontalScroll : void 0
   };
 }
 function useListVirtualizer(opts) {
@@ -6177,13 +6552,28 @@ function useDataGridTableOrchestration(params) {
   });
   const virtualScrollEnabled = virtualScroll?.enabled === true;
   const virtualRowHeight = virtualScroll?.rowHeight ?? 36;
-  const { visibleRange } = useVirtualScroll({
+  const columnVirtualization = virtualScroll?.columns === true;
+  const unpinnedColumnWidths = useMemo(() => {
+    if (!columnVirtualization) return void 0;
+    const widths = [];
+    for (const col of visibleCols) {
+      const pin = pinnedColumns?.[col.columnId];
+      if (!pin) {
+        widths.push(getColumnWidth(col));
+      }
+    }
+    return widths;
+  }, [columnVirtualization, visibleCols, pinnedColumns, getColumnWidth]);
+  const { visibleRange, columnRange, onHorizontalScroll } = useVirtualScroll({
     totalRows: items.length,
     rowHeight: virtualRowHeight,
     enabled: virtualScrollEnabled,
     overscan: virtualScroll?.overscan,
     threshold: virtualScroll?.threshold,
-    containerRef: wrapperRef
+    containerRef: wrapperRef,
+    columnVirtualization,
+    columnWidths: unpinnedColumnWidths,
+    columnOverscan: virtualScroll?.columnOverscan
   });
   const editCallbacks = useMemo(
     () => ({ commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit }),
@@ -6201,8 +6591,10 @@ function useDataGridTableOrchestration(params) {
   const currentVersion = CellDescriptorCache.computeVersion(cellDescriptorInput);
   cellDescriptorCacheRef.current.updateVersion(currentVersion);
   const prevItemsRef = useRef(items);
-  if (prevItemsRef.current !== items) {
+  const prevVisibleColsRef = useRef(visibleCols);
+  if (prevItemsRef.current !== items || prevVisibleColsRef.current !== visibleCols) {
     prevItemsRef.current = items;
+    prevVisibleColsRef.current = visibleCols;
     cellDescriptorCacheRef.current.clear();
   }
   const handleSingleRowClick = useCallback((e) => {
@@ -6237,6 +6629,8 @@ function useDataGridTableOrchestration(params) {
     virtualScrollEnabled,
     virtualRowHeight,
     visibleRange,
+    columnRange,
+    onHorizontalScroll,
     // Derived from props
     items,
     columns,
@@ -7137,7 +7531,7 @@ function MarchingAntsOverlay({
   const selR = selRect ? roundRect(selRect) : null;
   const clipR = clipRect ? roundRect(clipRect) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    selR && !isDragging && !clipRangeMatchesSel && /* @__PURE__ */ jsx(
+    selR && !isDragging && !clipRangeMatchesSel && !(selectionRange && selectionRange.startRow === selectionRange.endRow && selectionRange.startCol === selectionRange.endCol) && /* @__PURE__ */ jsx(
       "svg",
       {
         style: {
@@ -7539,4 +7933,4 @@ function renderFilterContent(filterType, state, options, isLoadingOptions, selec
   return null;
 }
 
-export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellDescriptorCache, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP3 as NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps2 as buildInlineEditorProps, buildPopoverEditorProps2 as buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent2 as resolveCellDisplayContent, resolveCellStyle2 as resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll };
+export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellDescriptorCache, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP3 as NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps2 as buildInlineEditorProps, buildPopoverEditorProps2 as buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, partitionColumnsForVirtualization, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent2 as resolveCellDisplayContent, resolveCellStyle2 as resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll };

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

@@ -4,6 +4,7 @@ import type { DataGridLayoutState, DataGridRowSelectionState, DataGridEditingSta
 import type { UseColumnResizeResult } from './useColumnResize';
 import type { UseColumnReorderResult } from './useColumnReorder';
 import type { UseVirtualScrollResult } from './useVirtualScroll';
+import type { IVisibleColumnRange } from '@alaarab/ogrid-core';
 import type { HeaderFilterConfigInput, CellRenderDescriptorInput } from '../utils';
 import type { IStatusBarProps, RowId, HeaderRow } from '../types';
 import { CellDescriptorCache } from '@alaarab/ogrid-core';
@@ -32,6 +33,10 @@ export interface UseDataGridTableOrchestrationResult<T> {
     virtualScrollEnabled: boolean;
     virtualRowHeight: number;
     visibleRange: UseVirtualScrollResult['visibleRange'];
+    /** Visible column range for horizontal virtualization (null when disabled). */
+    columnRange: IVisibleColumnRange | null;
+    /** Callback for horizontal scroll events (column virtualization). */
+    onHorizontalScroll?: (scrollLeft: number) => void;
     items: T[];
     columns: IOGridDataGridProps<T>['columns'];
     getRowId: IOGridDataGridProps<T>['getRowId'];

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

@@ -14,6 +14,8 @@ export interface UseOGridDataFetchingParams<T> {
     pageSize: number;
     onError?: (err: unknown) => void;
     onFirstDataRendered?: () => void;
+    /** Worker sort mode: true=always, 'auto'=when data > 5000 rows, false=sync. */
+    workerSort?: boolean | 'auto';
 }
 export interface UseOGridDataFetchingState<T> {
     displayItems: T[];

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

@@ -1,6 +1,6 @@
 import type { Virtualizer } from '@tanstack/react-virtual';
 import type { RefObject } from 'react';
-import type { IVisibleRange } from '@alaarab/ogrid-core';
+import type { IVisibleRange, IVisibleColumnRange } from '@alaarab/ogrid-core';
 export type { IVirtualScrollConfig } from '@alaarab/ogrid-core';
 export interface UseVirtualScrollParams {
     /** Total number of rows in the data set. */
@@ -18,6 +18,12 @@ export interface UseVirtualScrollParams {
     threshold?: number;
     /** Ref to the scrollable container element. */
     containerRef: RefObject<HTMLElement | null>;
+    /** Enable column virtualization (only render visible columns). */
+    columnVirtualization?: boolean;
+    /** Column widths for horizontal virtualization (unpinned columns only). */
+    columnWidths?: number[];
+    /** Column overscan count. Default: 2. */
+    columnOverscan?: number;
 }
 export interface UseVirtualScrollResult {
     /** The TanStack virtualizer instance (null when disabled). */
@@ -28,11 +34,15 @@ export interface UseVirtualScrollResult {
     visibleRange: IVisibleRange;
     /** Scroll to a specific row index. */
     scrollToIndex: (index: number) => void;
+    /** Visible column range for horizontal virtualization (null when column virtualization disabled). */
+    columnRange: IVisibleColumnRange | null;
+    /** Callback to attach to scroll container's onScroll for horizontal tracking. */
+    onHorizontalScroll?: (scrollLeft: number) => void;
 }
 /**
- * Wraps TanStack Virtual for row virtualization.
+ * Wraps TanStack Virtual for row virtualization, with optional column virtualization.
  * When disabled or when totalRows < threshold, returns a pass-through (all rows visible).
- * @param params - Total rows, row height, enabled flag, overscan, threshold, and container ref.
- * @returns Virtualizer instance, total height, visible range, and scrollToIndex helper.
+ * @param params - Total rows, row height, enabled flag, overscan, threshold, container ref, and column virtualization params.
+ * @returns Virtualizer instance, total height, visible range, scrollToIndex, columnRange, and onHorizontalScroll.
  */
 export declare function useVirtualScroll(params: UseVirtualScrollParams): UseVirtualScrollResult;

package/dist/types/index.d.ts

@@ -32,7 +32,7 @@ export { BaseDropIndicator } from './components/BaseDropIndicator';
 export type { BaseDropIndicatorProps } from './components/BaseDropIndicator';
 export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterContentProps, } from './components/ColumnHeaderFilterContent';
 export type { IColumnHeaderFilterProps, DateFilterContentProps, DateFilterClassNames, } from './components/ColumnHeaderFilterContent';
-export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, CellDescriptorCache, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, UndoRedoStack, } from './utils';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, CellDescriptorCache, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, partitionColumnsForVirtualization, areGridRowPropsEqual, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, UndoRedoStack, } from './utils';
 export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, IColumnHeaderMenuItem, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, } from './utils';
 export { renderFilterContent } from './components/ColumnHeaderFilterRenderers';
 export type { FilterContentRenderers, MultiSelectRendererProps, TextRendererProps, PeopleRendererProps, DateRendererProps, } from './components/ColumnHeaderFilterRenderers';

package/dist/types/types/dataGridTypes.d.ts

@@ -80,6 +80,14 @@ interface IOGridBaseProps<T> {
     rowHeight?: number;
     /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
     density?: 'compact' | 'normal' | 'comfortable';
+    /**
+     * 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
+     * Columns with custom `compare` functions fall back to synchronous sort.
+     */
+    workerSort?: boolean | 'auto';
     /** Fires once when the grid first renders with data (useful for restoring column state). */
     onFirstDataRendered?: () => void;
     /** Called when server-side fetchPage fails. */

package/dist/types/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, computeArrowNavigation, applyCellDeletion, applyRangeRowSelection, computeRowSelectionState, UndoRedoStack, buildCellIndex, } from '@alaarab/ogrid-core';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, partitionColumnsForVirtualization, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, computeArrowNavigation, applyCellDeletion, applyRangeRowSelection, computeRowSelectionState, UndoRedoStack, buildCellIndex, } from '@alaarab/ogrid-core';
 export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, ParseValueResult, AggregationResult, IColumnHeaderMenuItem, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, ArrowNavigationContext, ArrowNavigationResult, } from '@alaarab/ogrid-core';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
 export { CellDescriptorCache } from '@alaarab/ogrid-core';

package/package.json

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