@opencorestack/opengridx 3.7.0 → 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.css

@@ -19,9 +19,6 @@
   border-bottom-left-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
   border-bottom-right-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
 }
-.ogx:hover {
-  box-shadow: var(--ogx-shadow-md);
-}
 .ogx__viewport {
   flex: 1;
   overflow: auto;

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/components/ListView/ListView.css

@@ -28,7 +28,7 @@
 }
 
 .ogx-list-view__row:hover {
-  background: var(--ogx-color-gray-50, #f8fafc);
+  background: var(--ogx-grid-row-hover-background);
 }
 
 /* Keyboard focus (roving tab stop between list rows). */
@@ -41,11 +41,11 @@
 }
 
 .ogx-list-view__row--selected {
-  background: var(--ogx-selection-bg, rgba(59, 130, 246, 0.08));
+  background: var(--ogx-selection-bg, var(--ogx-grid-row-selected-background));
 }
 
 .ogx-list-view__row--selected:hover {
-  background: var(--ogx-selection-hover-bg, rgba(59, 130, 246, 0.13));
+  background: var(--ogx-selection-hover-bg, var(--ogx-grid-row-selected-hover-background));
 }
 
 /* ─── Checkbox column inside list row ────────────────────────────────────── */
@@ -79,7 +79,7 @@
   min-width: 0;
   font-family: var(--ogx-font-family);
   font-size: var(--ogx-font-size-sm);
-  color: var(--ogx-grid-cell-text);
+  color: var(--ogx-grid-row-text);
 }
 
 /* ─── Toolbar in list view mode ──────────────────────────────────────────── */

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/core/useLayout.ts

@@ -245,7 +245,9 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         getRowId = defaultGetRowId,
     } = params;
 
-    return useMemo<LayoutResult<R>>(() => {
+    // Rows and columns are measured in separate memos: a column resize must not walk every row
+    // (1M rows), and a sort or filter must not recompute column widths.
+    const rowLayout = useMemo(() => {
         const unpinnedRows = pagination ? paginatedUnpinnedRows : sortedUnpinnedRows;
 
         const heightOf = (row: R, rowIndex: number) => {
@@ -279,6 +281,35 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         const pinnedTopHeight = pinnedBlockHeight(pinnedTopRows, pinnedTopRowsLength);
         const pinnedBottomHeight = pinnedBlockHeight(pinnedBottomRows, pinnedBottomRowsLength);
 
+        return {
+            rowHeights,
+            cumulativeHeights,
+            unpinnedRowsHeight,
+            pinnedTopHeight,
+            pinnedBottomHeight,
+            pinnedTopRowsLength,
+            pinnedBottomRowsLength,
+            unpinnedRowsLength: rowCount,
+        };
+    }, [
+        rowHeight,
+        pagination,
+        paginatedUnpinnedRows,
+        sortedUnpinnedRows,
+        expandedRowIds,
+        getDetailPanelHeight,
+        detailPanelHeights,
+        pinnedTopRowsLength,
+        pinnedBottomRowsLength,
+        pinnedTopRows,
+        pinnedBottomRows,
+        paginationMode,
+        isLoading,
+        pageSize,
+        getRowId,
+    ]);
+
+    const columnLayout = useMemo(() => {
         // Pinned columns render in pinnedColumns.left / .right order; unpinned ones in column order.
         const { left: rawLeftPinnedCols, center: unpinnedCols, right: rawRightPinnedCols } =
             getPinnedColumnGroups(visibleOrderedColumns, pinnedColumns);
@@ -326,11 +357,6 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         }, [] as number[]);
 
         return {
-            rowHeights,
-            cumulativeHeights,
-            unpinnedRowsHeight,
-            pinnedTopHeight,
-            pinnedBottomHeight,
             leftPinnedCols,
             rightPinnedCols,
             unpinnedColsWithWidth,
@@ -342,22 +368,8 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
             unpinnedTotalWidth,
             systemColumnsWidth,
             pinnedSystemColumnsWidth,
-            pinnedTopRowsLength,
-            pinnedBottomRowsLength,
-            unpinnedRowsLength: unpinnedRows.length,
         };
     }, [
-        rowHeight,
-        pagination,
-        paginatedUnpinnedRows,
-        sortedUnpinnedRows,
-        expandedRowIds,
-        getDetailPanelHeight,
-        detailPanelHeights,
-        pinnedTopRowsLength,
-        pinnedBottomRowsLength,
-        pinnedTopRows,
-        pinnedBottomRows,
         visibleOrderedColumns,
         pinnedColumns,
         columnWidths,
@@ -367,9 +379,7 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         rowReordering,
         pinCheckboxColumn,
         pinExpandColumn,
-        paginationMode,
-        isLoading,
-        pageSize,
-        getRowId,
     ]);
+
+    return useMemo<LayoutResult<R>>(() => ({ ...rowLayout, ...columnLayout }), [rowLayout, columnLayout]);
 }

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/styles/base/reset.css

@@ -1,6 +1,8 @@
-*,
-*::before,
-*::after {
+/* Only the grid's own elements, including its portalled menus and panels (all carry an ogx class).
+   :where() keeps the specificity at zero, so a consumer's own box-sizing rule still wins. */
+:where([class*="ogx"], [class*="ogx"] *),
+:where([class*="ogx"], [class*="ogx"] *)::before,
+:where([class*="ogx"], [class*="ogx"] *)::after {
   box-sizing: border-box;
 }
 .ogx--dragging {

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); });