@opencorestack/opengridx 3.7.1 → 3.8.0

package/docs/features/filtering.md

@@ -104,7 +104,9 @@ Every operator in `GridFilterOperator` also works in a programmatic `filterModel
 
 - Only **visible** columns with `filterable !== false` are searched. The row `id` and fields that are not columns are not searched.
 - Each column is searched by its value after `valueGetter` and, when the column has a `valueFormatter`, by the formatted text as well. `Date` values are searched as `YYYY-MM-DD`; objects are skipped.
+- Without a `valueFormatter`, `singleSelect` columns are also searched by their option label, `boolean` columns by Yes / No and `date` columns by the locale date the cell shows (since v3.7.1).
 - The toolbar search box splits what the user types on whitespace, so `john london` becomes `['john', 'london']` and matches a row with first name John and city London.
+- The searched text is cached per row object and column set, so typing does not re-read every cell. Two consequences: change a row by passing a **new** row object (mutating it in place keeps the old text), and when a `valueFormatter` reads state outside the row, pass new column definitions when that state changes.
 
 ---
 

package/lib/components/DataGrid/DataGrid.tsx

@@ -208,9 +208,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     const isInternalLoading = state.dataSource.loading;
     const effectiveLoading = loading || isInternalLoading;
 
-    const effectiveRows = useMemo(() => {
-        return state.rows.allRows.map(id => state.rows.idRowsLookup.get(id)!) as R[];
-    }, [state.rows]);
+    const effectiveRows = state.rows.rows as R[];
 
     const { treeDataHandlers, rowGroupingHandlers, activeHierarchyHandlers, rowMetaMap } = useGridHierarchy<R>({
         rows: effectiveRows,
@@ -354,7 +352,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     // Indices address the consumer's own rows, whatever the sort, filter, page or pinning.
     const rowReorderHandlers = useRowReorder({
         rows: effectiveRows,
-        getRowId: getRowIdOf,
+        indexById: state.rows.indexById,
         onRowOrderChange,
         rowReordering
     });

package/lib/components/DataGrid/GridListView.tsx

@@ -38,7 +38,7 @@ export interface GridListViewProps<R extends GridRowModel> {
     listViewColumn: GridListViewColDef<R>;
     /** Grid columns by field; a list field that names one gets its valueGetter / valueFormatter. */
     columnsByField: ReadonlyMap<string, GridColDef>;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     noRowsLabel: string;
     rowHeight: number;
     checkboxSelection: boolean;

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -53,7 +53,7 @@ export interface GridPinnedRowsProps<R extends GridRowModel> {
     colspanMap?: Map<GridRowId, Record<string, CellColSpanInfo>>;
     rowSpanningCaches?: RowSpanningCaches;
     rowHeight: number;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     /** Resolves a row's id; defaults to `row.id`. */
     getRowId?: (row: R) => GridRowId;
     /** Index of the first of these rows in the grid's renderable rows (top-pinned + centre + bottom-pinned). */

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -69,7 +69,7 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     unpinnedRowsLength: number;
     /** Last center row index in the render window: skeleton rows render only once it reaches the end of the data. */
     lastRenderedRowIndex: number;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     loadingOverlay?: React.ReactNode;
     /** Added to a row's rowIndex to get its `aria-rowindex` (header rows and earlier pages included). */
     ariaRowIndexOffset?: number;

package/lib/hooks/core/useDataGrid.ts

@@ -41,7 +41,9 @@ let warnedDuplicateIds = false;
 function buildRowsState(rows: GridRowModel[], getRowId: GetRowId, knownIds?: Map<GridRowModel, GridRowId>): GridState['rows'] {
   const idRowsLookup = new Map<GridRowId, GridRowModel>();
   const idByRow = new Map<GridRowModel, GridRowId>();
+  const indexById = new Map<GridRowId, number>();
   const allRows: GridRowId[] = [];
+  const stored: GridRowModel[] = [];
   const duplicates: GridRowId[] = [];
 
   rows.forEach(row => {
@@ -52,7 +54,9 @@ function buildRowsState(rows: GridRowModel[], getRowId: GetRowId, knownIds?: Map
     }
     idRowsLookup.set(id, row);
     idByRow.set(row, id);
+    indexById.set(id, allRows.length);
     allRows.push(id);
+    stored.push(row);
   });
 
   if (duplicates.length > 0 && !warnedDuplicateIds && process.env.NODE_ENV !== 'production') {
@@ -64,7 +68,7 @@ function buildRowsState(rows: GridRowModel[], getRowId: GetRowId, knownIds?: Map
     );
   }
 
-  return { idRowsLookup, allRows, idByRow };
+  return { idRowsLookup, allRows, idByRow, rows: stored, indexById };
 }
 
 function createInitialState<R extends GridRowModel>(rows: R[], getRowId: GetRowId, columns: GridColDef<R>[], columnVisibilityModel: GridColumnVisibilityModel = {}): GridState {
@@ -104,10 +108,39 @@ function createInitialState<R extends GridRowModel>(rows: R[], getRowId: GetRowI
   };
 }
 
+/**
+ * Stores committed edits under the ids of the rows that were edited. Edits never add, remove or
+ * reorder rows, so the id maps are updated in place (copying them cost ~100 ms each at 1M rows)
+ * and keep their identity: `getRowIdOf` and everything memoized on it stay valid. Only the row
+ * array is copied, with the edited positions patched. Writing the same entries again is a no-op,
+ * so React re-running the reducer (StrictMode, rebasing) gives the same result.
+ */
+function replaceStoredRows(
+  state: GridState,
+  edits: Iterable<readonly [GridRowId, GridRowModel]>,
+): GridState {
+  const { idRowsLookup, idByRow, indexById } = state.rows;
+  let rows: GridRowModel[] | null = null;
+  for (const [id, row] of edits) {
+    const index = indexById.get(id);
+    if (index === undefined) continue;
+    const previous = idRowsLookup.get(id);
+    if (previous !== undefined && previous !== row) idByRow.delete(previous);
+    idRowsLookup.set(id, row);
+    idByRow.set(row, id);
+    if (state.rows.rows[index] !== row) {
+      rows ??= state.rows.rows.slice();
+      rows[index] = row;
+    }
+  }
+  if (!rows) return state;
+  return { ...state, rows: { ...state.rows, rows } };
+}
+
 function gridReducer(state: GridState, action: GridAction): GridState {
   switch (action.type) {
     case 'SET_ROWS': {
-      const currentRows = state.rows.allRows.map(id => state.rows.idRowsLookup.get(id)!);
+      const currentRows = state.rows.rows;
       const newRows = typeof action.payload === 'function'
         ? action.payload(currentRows)
         : action.payload;
@@ -120,40 +153,12 @@ function gridReducer(state: GridState, action: GridAction): GridState {
       };
     }
 
-    case 'REPLACE_ROW': {
-      // Stores a committed edit under the id of the row that was edited, in the current store.
-      const previous = state.rows.idRowsLookup.get(action.id);
-      if (previous === undefined) return state;
-      const idRowsLookup = new Map(state.rows.idRowsLookup);
-      idRowsLookup.set(action.id, action.row);
-      const idByRow = new Map(state.rows.idByRow);
-      idByRow.delete(previous);
-      idByRow.set(action.row, action.id);
-      return {
-        ...state,
-        rows: { ...state.rows, idRowsLookup, idByRow },
-      };
-    }
+    case 'REPLACE_ROW':
+      return replaceStoredRows(state, [[action.id, action.row]]);
 
-    case 'REPLACE_ROWS': {
+    case 'REPLACE_ROWS':
       // A batch edit (paste, range clear, undo, redo): every stored row in one update.
-      let changed = false;
-      const idRowsLookup = new Map(state.rows.idRowsLookup);
-      const idByRow = new Map(state.rows.idByRow);
-      for (const [id, row] of action.rows) {
-        const previous = idRowsLookup.get(id);
-        if (previous === undefined) continue;
-        changed = true;
-        idRowsLookup.set(id, row);
-        idByRow.delete(previous);
-        idByRow.set(row, id);
-      }
-      if (!changed) return state;
-      return {
-        ...state,
-        rows: { ...state.rows, idRowsLookup, idByRow },
-      };
-    }
+      return replaceStoredRows(state, action.rows);
 
     case 'SET_COLUMNS': {
       const columnLookup = new Map<string, GridColDef>();
@@ -321,7 +326,7 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
   const [initialApi] = useState<GridApi>(() => ({
     ...createGridApiPlaceholder(),
     getRow: (id: GridRowId) => stateRef.current.rows.idRowsLookup.get(id) || null,
-    getAllRows: () => stateRef.current.rows.allRows.map(id => stateRef.current.rows.idRowsLookup.get(id)!),
+    getAllRows: () => stateRef.current.rows.rows.slice(),
     getColumn: (field: string) => stateRef.current.columns.lookup.get(field) || null,
     getAllColumns: () => stateRef.current.columns.all,
   }));

package/lib/hooks/core/useGridAggregationApi.ts

@@ -25,7 +25,7 @@ export interface UseGridAggregationApiParams<R extends GridRowModel> {
         rootAggregationPosition: GridGroupAggregationPosition;
         aggregationPositions: Map<GridRowId, GridGroupAggregationPosition>;
     };
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     columns: GridColDef<R>[];
     getRowId: (row: GridRowModel) => GridRowId;
     /** The column that shows the group labels, so export order matches the screen when sorting by it. */

package/lib/hooks/core/useGridCellSelection.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { RefObject } from 'react';
+import { getRowIndex } from '../../utils/rowIndex';
 import { scrollColumnIntoView, scrollRowIntoView } from '../../utils/scroll';
 import { isRtl } from '../../utils/direction';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
@@ -76,7 +77,7 @@ export interface UseGridCellSelectionParams<R extends GridRowModel> {
     navigationColumns: ReadonlyArray<RangeColumn<R>>;
     columnIndexMap: Map<string, number>;
     spanning: GridSpanningResult;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     layout: LayoutResult<R>;
     rowHeight: number;
     pinnedTopRowCount: number;
@@ -223,9 +224,7 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
 
     const context = useMemo<CellRangeContext | null>(() => {
         if (!enabled) return null;
-        const rowIds = allRenderableRows.map(getRowId);
-        const rowIndexById = new Map<GridRowId, number>();
-        rowIds.forEach((id, index) => { if (!rowIndexById.has(id)) rowIndexById.set(id, index); });
+        const { rowIds, rowIndexById } = getRowIndex(allRenderableRows, getRowId, 'renderable');
         const fields = rangeColumns.map(c => c.field);
         return {
             rowIds,

package/lib/hooks/core/useGridClipboardPaste.ts

@@ -49,7 +49,7 @@ export interface UseGridClipboardPasteParams<R extends GridRowModel> {
     /** System columns and the rendered data columns, in render order. */
     navigationColumns: ReadonlyArray<GridColDef<R>>;
     isCellEditable?: (params: GridCellParams<R>) => boolean;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     getSpanOrigin?: (rowId: GridRowId, field: string) => { rowId: GridRowId; field: string } | null;
     /** Whether a cell editor is open: paste and Delete then belong to it. */
     isEditing: boolean;

package/lib/hooks/core/useGridDetailPanel.ts

@@ -9,7 +9,7 @@ export interface UseGridDetailPanelParams {
     /** `detailPanelExpandedRowIds` prop (controlled when defined). */
     controlledExpandedRowIds: Set<GridRowId> | undefined;
     onDetailPanelExpandedRowIdsChange: ((expandedRowIds: Set<GridRowId>) => void) | undefined;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
 }
 
 export interface UseGridDetailPanelResult {

package/lib/hooks/core/useGridFillHandle.ts

@@ -47,7 +47,7 @@ export interface UseGridFillHandleParams<R extends GridRowModel> {
     navigationColumns: ReadonlyArray<GridColDef<R>>;
     columnIndexMap: Map<string, number>;
     isCellEditable?: (params: GridCellParams<R>) => boolean;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     getSpanOrigin?: (rowId: GridRowId, field: string) => { rowId: GridRowId; field: string } | null;
     batchEdit: UseGridBatchEditReturn<R>;
     onFill?: (result: GridFillResult) => void;

package/lib/hooks/core/useGridHierarchy.ts

@@ -3,7 +3,7 @@ import { useTreeData } from '../useTreeData';
 import { useRowGrouping, type UseRowGroupingParams } from '../useRowGrouping';
 import type { GridRowGroupingModel, GridRowId, GridRowMeta, GridRowModel } from '../../types';
 
-const EMPTY_ROW_META_MAP: Map<GridRowId, GridRowMeta> = new Map();
+const EMPTY_ROW_META_MAP: ReadonlyMap<GridRowId, GridRowMeta> = new Map();
 
 export interface UseGridHierarchyParams<R extends GridRowModel> extends Pick<
     UseRowGroupingParams<R>,
@@ -71,7 +71,7 @@ export function useGridHierarchy<R extends GridRowModel>(params: UseGridHierarch
 
     const activeHierarchyHandlers = isTreeData ? treeDataHandlers : (isRowGrouping ? rowGroupingHandlers : null);
 
-    const rowMetaMap = useMemo<Map<GridRowId, GridRowMeta>>(() => {
+    const rowMetaMap = useMemo<ReadonlyMap<GridRowId, GridRowMeta>>(() => {
         if (isTreeData) return treeDataHandlers.rowMetaMap;
         if (isRowGrouping) return rowGroupingHandlers.rowMetaMap;
         return EMPTY_ROW_META_MAP;

package/lib/hooks/core/useGridKeyboardNavigation.ts

@@ -71,7 +71,7 @@ export interface UseGridKeyboardNavigationParams<R extends GridRowModel> {
     /** Resolves a row's id (getRowId); defaults to `row.id`. */
     getRowId?: (row: R) => GridRowId;
     /** Hierarchy metadata. Synthetic group rows are never edited or selected from the keyboard. */
-    rowMetaMap?: Map<GridRowId, GridRowMeta>;
+    rowMetaMap?: ReadonlyMap<GridRowId, GridRowMeta>;
     /** Enter on a non-editable cell: the same handler a row click runs. */
     onRowActivate?: (params: GridRowParams<R>) => void;
     /**

package/lib/hooks/core/useGridLiveRowSelection.ts

@@ -37,13 +37,20 @@ export function useGridLiveRowSelection(params: UseGridLiveRowSelectionParams):
 
     const liveRowIds = useMemo(() => {
         if (!enabled || selectedRowIds.size === 0) return selectedRowIds;
+        // Check first, copy only when something is stale: select-all at 1M rows selects 1M ids.
         let stale = false;
+        for (const id of selectedRowIds) {
+            if (!rowsLookup.has(id) && !rowMetaMap.has(id)) {
+                stale = true;
+                break;
+            }
+        }
+        if (!stale) return selectedRowIds;
         const live = new Set<GridRowId>();
         for (const id of selectedRowIds) {
             if (rowsLookup.has(id) || rowMetaMap.has(id)) live.add(id);
-            else stale = true;
         }
-        return stale ? live : selectedRowIds;
+        return live;
     }, [enabled, selectedRowIds, rowsLookup, rowMetaMap]);
 
     // Latest callback, so an inline onRowSelectionModelChange does not report again on every render.

package/lib/hooks/core/useGridRangeEditing.ts

@@ -29,7 +29,7 @@ export interface UseGridRangeEditingParams<R extends GridRowModel> {
     navigationColumns: GridColDef<R>[];
     columnIndexMap: Map<string, number>;
     isCellEditable?: (params: GridCellParams<R>) => boolean;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     getSpanOrigin?: (rowId: GridRowId, field: string) => { rowId: GridRowId; field: string } | null;
     isEditing: boolean;
     batchEdit: UseGridBatchEditReturn<R>;

package/lib/hooks/core/useGridRowInteractions.ts

@@ -3,6 +3,7 @@ import { useGridRowSelection, type UseGridRowSelectionReturn } from './useGridRo
 import { PIVOT_GRAND_TOTAL_ID } from '../../utils/pivot';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
 import type { GridRowId, GridRowMeta, GridRowModel, GridRowParams } from '../../types';
+import { getRowIndex } from '../../utils/rowIndex';
 
 export interface UseGridRowInteractionsParams<R extends GridRowModel> {
     /** Data rows that pass the filter (pinned included, synthetic group rows excluded). */
@@ -14,7 +15,7 @@ export interface UseGridRowInteractionsParams<R extends GridRowModel> {
     disableMultipleRowSelection: boolean;
     disableRowSelectionOnClick: boolean;
     isHierarchyEnabled: boolean;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     /** The active tree-data / row-grouping handlers, if any. */
     activeHierarchyHandlers: { toggleExpansion: (id: GridRowId) => void } | null;
     onRowClick: ((params: GridRowParams<R>) => void) | undefined;
@@ -41,7 +42,7 @@ export function useGridRowInteractions<R extends GridRowModel>(
     // filter: never rows hidden by it, synthetic group rows, the pivot grand total, or stale
     // ids in the selection.
     const selectableRowIds = useMemo(() => {
-        const ids = dataRows.map(getRowId);
+        const { rowIds: ids } = getRowIndex(dataRows, getRowId, 'data');
         return isPivotActive ? ids.filter(id => id !== PIVOT_GRAND_TOTAL_ID) : ids;
     }, [dataRows, getRowId, isPivotActive]);
     const rowSelection = useGridRowSelection({

package/lib/hooks/features/useGridSpanning.ts

@@ -63,7 +63,7 @@ export interface UseGridSpanningParams<R extends GridRowModel> {
     rightPinnedColumns: GridColDef<R>[];
     /** Rows whose detail panel is expanded. A row span ends at such a row, above its panel. */
     expandedRowIds?: Set<GridRowId>;
-    rowMetaMap?: Map<GridRowId, GridRowMeta>;
+    rowMetaMap?: ReadonlyMap<GridRowId, GridRowMeta>;
     /** Resolves a row's id (the grid's getRowId); span caches are keyed by it. Defaults to `row.id`. */
     getRowId?: (row: R) => GridRowId;
 }
@@ -246,7 +246,7 @@ export function useGridSpanning<R extends GridRowModel>(params: UseGridSpanningP
 interface SectionContext<R extends GridRowModel> {
     spanColumns: { columns: SpanColumn<R>[]; leftCount: number; unpinnedCount: number };
     expandedRowIds?: Set<GridRowId>;
-    rowMetaMap?: Map<GridRowId, GridRowMeta>;
+    rowMetaMap?: ReadonlyMap<GridRowId, GridRowMeta>;
     getRowId: (row: R) => GridRowId;
     warned: Set<string>;
     out: SpanComputation;
@@ -390,7 +390,7 @@ function buildParams<R extends GridRowModel>(
     colDef: GridColDef<R>,
     rowIndex: number,
     colIndex: number,
-    rowMetaMap: Map<GridRowId, GridRowMeta> | undefined,
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta> | undefined,
     warned: Set<string>,
 ): GridRenderCellParams<R> {
     const raw = row[colDef.field as keyof R];

package/lib/hooks/useRowGrouping.ts

@@ -15,6 +15,7 @@ import { sortItemsBySortModel, type GridSortValue } from '../utils/sorting';
 import { callSafely, getCellValue } from '../utils/values';
 import type { GridColumnLookup } from '../utils/columnLookup';
 import { computeAggregations } from '../utils/aggregation';
+import { LayeredMap } from '../utils/grouping/layeredMap';
 
 /** Where a group's aggregates are shown: on the group row, on a subtotal row after its children, or not at all. */
 export type GridGroupAggregationPosition = 'inline' | 'footer' | null;
@@ -436,16 +437,24 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
 
     const getNode = useCallback((id: GridRowId) => treeNodes.get(id), [treeNodes]);
 
-    const rowMetaMap = useMemo<Map<GridRowId, GridRowMeta>>(() => {
+    // Leaf entries do not depend on expansion: built once per tree, so expanding or collapsing a
+    // group rebuilds only the group entries (a LayeredMap reads both without copying).
+    const leafMetaMap = useMemo<Map<GridRowId, GridRowMeta>>(() => {
         const map = new Map<GridRowId, GridRowMeta>();
         treeNodes.forEach((node, id) => {
-            const variants = groupRowVariants.get(id);
-            if (!variants) {
-                // One object per row (not shared per depth): `params.rowMeta` is public, and a consumer that
-                // writes to it must not change other rows.
-                map.set(id, { hasChildren: false, treeDepth: node.depth, isGroupRow: false });
-                return;
-            }
+            if (groupRowVariants.has(id)) return;
+            // One object per row (not shared per depth): `params.rowMeta` is public, and a consumer that
+            // writes to it must not change other rows.
+            map.set(id, { hasChildren: false, treeDepth: node.depth, isGroupRow: false });
+        });
+        return map;
+    }, [treeNodes, groupRowVariants]);
+
+    const rowMetaMap = useMemo<ReadonlyMap<GridRowId, GridRowMeta>>(() => {
+        const map = new Map<GridRowId, GridRowMeta>();
+        groupRowVariants.forEach((variants, id) => {
+            const node = treeNodes.get(id);
+            if (!node) return;
             const groupMeta: GridRowMeta = {
                 hasChildren: true,
                 treeDepth: node.depth,
@@ -467,8 +476,8 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
                 });
             }
         });
-        return map;
-    }, [treeNodes, groupRowVariants, expandedGroupIds, aggregationPositions]);
+        return new LayeredMap(leafMetaMap, map);
+    }, [leafMetaMap, treeNodes, groupRowVariants, expandedGroupIds, aggregationPositions]);
 
     return useMemo(() => ({
         treeNodes,

package/lib/hooks/useRowReorder.ts

@@ -11,6 +11,11 @@ export interface UseRowReorderProps<R extends GridRowModel = GridRowModel> {
      */
     rows: R[];
     getRowId?: (row: R) => GridRowId;
+    /**
+     * Row id → index in `rows`, when the caller already has it (the grid's row store does). Saves
+     * a pass over every row each time `rows` changes, such as after every cell edit.
+     */
+    indexById?: ReadonlyMap<GridRowId, number>;
     rowReordering?: boolean;
 }
 
@@ -28,16 +33,17 @@ export interface UseRowReorderReturn {
 export function useRowReorder<R extends GridRowModel = GridRowModel>(
     props: UseRowReorderProps<R>
 ): UseRowReorderReturn {
-    const { onRowOrderChange, rows, getRowId, rowReordering = false } = props;
+    const { onRowOrderChange, rows, getRowId, indexById: givenIndexById, rowReordering = false } = props;
     const [draggedRowId, setDraggedRowId] = useState<GridRowId | null>(null);
     const [dragOverRowId, setDragOverRowId] = useState<GridRowId | null>(null);
     const detachDragEndRef = useRef<() => void>(() => {});
 
-    const indexById = useMemo(() => {
+    const indexById = useMemo<ReadonlyMap<GridRowId, number>>(() => {
+        if (givenIndexById) return givenIndexById;
         const map = new Map<GridRowId, number>();
         rows.forEach((row, index) => map.set(getRowId ? getRowId(row) : row.id, index));
         return map;
-    }, [rows, getRowId]);
+    }, [givenIndexById, rows, getRowId]);
 
     const canReorderRow = useCallback((id: GridRowId) => indexById.has(id), [indexById]);
 

package/lib/types/state.ts

@@ -2,11 +2,20 @@ import type { GridRowId, GridRowModel, GridPinnedRows } from './rows';
 import type { GridColDef, GridColumnVisibilityModel, GridPinnedColumns } from './columns';
 
 export interface GridInternalState {
+  /**
+   * The row store. Cell edits (`REPLACE_ROW` / `REPLACE_ROWS`) update `idRowsLookup`, `idByRow`
+   * and `indexById` IN PLACE and only replace `rows`: never rely on those maps changing identity
+   * to detect an edit; depend on `rows` (or `state.rows`) instead. `SET_ROWS` builds new maps.
+   */
   rows: {
     idRowsLookup: Map<GridRowId, GridRowModel>;
     allRows: GridRowId[];
     /** Row object → its getRowId() key. Rows are stored untouched, so this is how ids are resolved. */
     idByRow: Map<GridRowModel, GridRowId>;
+    /** The stored rows in `allRows` order. */
+    rows: GridRowModel[];
+    /** Row id → its index in `allRows` / `rows`. */
+    indexById: Map<GridRowId, number>;
   };
   pagination: {
     /** Server-reported total (dataSource responses); undefined until one arrives. */

package/lib/utils/editing/targets.ts

@@ -5,6 +5,7 @@ import { isSystemField } from '../focus';
 import { isSyntheticRowId } from '../syntheticRows';
 import { resolveCellEditable } from './index';
 import { getCellValue } from '../values';
+import { getRowIndex } from '../rowIndex';
 
 /**
  * Where batch edits (paste, range clear, undo/redo) land: the renderable rows and the range columns
@@ -26,9 +27,7 @@ export function buildEditTargetContext<R extends GridRowModel>(
     getRowId: (row: R) => GridRowId,
     navigationColumns: ReadonlyArray<GridColDef<R>>,
 ): GridEditTargetContext<R> {
-    const rowIds = rows.map(getRowId);
-    const rowIndexById = new Map<GridRowId, number>();
-    rowIds.forEach((id, index) => { if (!rowIndexById.has(id)) rowIndexById.set(id, index); });
+    const { rowIds, rowIndexById } = getRowIndex(rows, getRowId, 'renderable');
     const columns = navigationColumns.filter(c => isRangeColumnField(c.field));
     const colIndexByField = new Map<string, number>();
     columns.forEach((c, index) => { colIndexByField.set(c.field, index); });

package/lib/utils/gridApiRows.ts

@@ -9,7 +9,7 @@ export interface CollectAllFilteredRowsParams<R extends GridRowModel> {
     /** Every unpinned row that passes the filter, sorted, across all pages. */
     sortedUnpinnedRows: R[];
     pinnedBottomRows: R[];
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     getRowId: (row: GridRowModel) => GridRowId;
     /**
      * With a hierarchy: the rows that pass the filter (the set select-all and the footer use).

package/lib/utils/grouping/groupedExportRows.ts

@@ -16,7 +16,7 @@ export interface BuildGroupedExportRowsParams<R extends GridRowModel> {
      */
     rows: R[];
     getRowId: (row: R) => GridRowId;
-    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    rowMetaMap: ReadonlyMap<GridRowId, GridRowMeta>;
     columns: GridColDef<R>[];
     aggregationModel: GridAggregationModel;
     /** The footer's grand total (already over the filtered data rows); omitted when null. */

package/lib/utils/grouping/layeredMap.ts

@@ -0,0 +1,52 @@
+/**
+ * A read-only view of two maps with disjoint keys, read as one: `top` first, then `base`. Row
+ * grouping keeps one entry per leaf row in `base` (built once per tree) and the group rows in
+ * `top` (rebuilt on every expand / collapse), so toggling a group at 1M rows does not copy a
+ * 1M-entry map. Iteration yields `base` entries, then `top` entries.
+ */
+export class LayeredMap<K, V> implements ReadonlyMap<K, V> {
+    private readonly base: ReadonlyMap<K, V>;
+    private readonly top: ReadonlyMap<K, V>;
+
+    constructor(base: ReadonlyMap<K, V>, top: ReadonlyMap<K, V>) {
+        this.base = base;
+        this.top = top;
+    }
+
+    get size(): number {
+        return this.base.size + this.top.size;
+    }
+
+    get(key: K): V | undefined {
+        const value = this.top.get(key);
+        return value !== undefined || this.top.has(key) ? value : this.base.get(key);
+    }
+
+    has(key: K): boolean {
+        return this.top.has(key) || this.base.has(key);
+    }
+
+    forEach(callback: (value: V, key: K, map: ReadonlyMap<K, V>) => void, thisArg?: unknown): void {
+        this.base.forEach((value, key) => callback.call(thisArg, value, key, this));
+        this.top.forEach((value, key) => callback.call(thisArg, value, key, this));
+    }
+
+    *entries(): MapIterator<[K, V]> {
+        yield* this.base.entries();
+        yield* this.top.entries();
+    }
+
+    *keys(): MapIterator<K> {
+        yield* this.base.keys();
+        yield* this.top.keys();
+    }
+
+    *values(): MapIterator<V> {
+        yield* this.base.values();
+        yield* this.top.values();
+    }
+
+    [Symbol.iterator](): MapIterator<[K, V]> {
+        return this.entries();
+    }
+}

package/lib/utils/rowIndex.ts

@@ -0,0 +1,67 @@
+import type { GridRowId } from '../types';
+
+/** The ids of a row array in order, and each id's first index. */
+export interface GridRowIndex {
+    rowIds: GridRowId[];
+    rowIndexById: Map<GridRowId, number>;
+}
+
+interface CacheEntry {
+    rows: readonly object[];
+    value: GridRowIndex;
+}
+
+// Last result per id resolver and view. The grid's resolver keeps its identity while the row store
+// keeps its id maps (cell edits do), so the entry lives exactly as long as it can be reused.
+const cache = new WeakMap<(row: never) => GridRowId, Map<string, CacheEntry>>();
+
+function build<R extends object>(rows: readonly R[], getRowId: (row: R) => GridRowId): GridRowIndex {
+    const rowIds = new Array<GridRowId>(rows.length);
+    const rowIndexById = new Map<GridRowId, number>();
+    for (let index = 0; index < rows.length; index++) {
+        const id = getRowId(rows[index]);
+        rowIds[index] = id;
+        if (!rowIndexById.has(id)) rowIndexById.set(id, index);
+    }
+    return { rowIds, rowIndexById };
+}
+
+/**
+ * `rows.map(getRowId)` plus an id → first index map, reusing the previous result for the same
+ * resolver and `view` when the ids are unchanged position by position. A cell edit replaces row
+ * objects but never moves or re-keys rows, so after an edit only the replaced positions are
+ * resolved (a reference comparison per row instead of a map lookup per row, ~20× cheaper at 1M
+ * rows), and callers memoized on the returned object do not recompute. Treat the result as
+ * read-only: it may be shared.
+ */
+export function getRowIndex<R extends object>(
+    rows: readonly R[],
+    getRowId: (row: R) => GridRowId,
+    view: string,
+): GridRowIndex {
+    let byView = cache.get(getRowId);
+    const previous = byView?.get(view);
+    if (previous && previous.rows.length === rows.length) {
+        const prevRows = previous.rows as readonly R[];
+        const prevIds = previous.value.rowIds;
+        let same = true;
+        for (let index = 0; index < rows.length; index++) {
+            const row = rows[index];
+            if (row !== prevRows[index] && getRowId(row) !== prevIds[index]) {
+                same = false;
+                break;
+            }
+        }
+        if (same) {
+            previous.rows = rows;
+            return previous.value;
+        }
+    }
+    const value = build(rows, getRowId);
+    if (!byView) {
+        byView = new Map();
+        cache.set(getRowId, byView);
+    }
+    byView.set(view, { rows, value });
+    return value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencorestack/opengridx",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "OpenGridX: High-performance React data infrastructure. Unlock advanced Row Grouping, Excel Export, and Column Pinning without the usual \"Pro\" gatekeeping. Built for speed, scale, and complete architectural freedom. Fully open, virtualization-ready, and feature-complete.",
   "type": "module",
   "main": "./dist/opengridx.umd.js",