@opencorestack/opengridx 3.7.1 → 3.8.1

package/docs/API_REFERENCE.md

@@ -546,6 +546,21 @@ In every exporter, a non-empty `selectedRows` takes precedence over `groupedRows
 
 Every exporter takes `columns` typed for your rows (`GridColDef<R>[]`) or untyped (`GridColDef[]`), and its options also accept `getRowId?: (row: R) => GridRowId`. Pass the grid's `getRowId` when you use one: `selectedRows` holds those ids, and since v3.0 the grid no longer copies them onto `row.id`.
 
+### Export option types
+
+Each exporter's options are exported as a type. Fields common to all of them: `fileName`, `selectedRows`, `getRowId`, `aggregationResult`, `aggregationModel`, `groupedRows`.
+
+| Type | For | Its own fields |
+| :--- | :--- | :--- |
+| `CsvExportOptions<R>` | `exportToCsv` | `includeHeaders`, `delimiter`, `escapeFormulas`, `bom` |
+| `JsonExportOptions<R>` | `exportToJson` | `pretty` |
+| `ExcelExportOptions<R>` | `exportToExcel` (HTML `.xls`) | `sheetName`, `includeHeaders`, `escapeFormulas` |
+| `ExcelAdvancedExportOptions<R>` | `exportToExcelAdvanced` (`.xlsx`) | `sheets`, `columnStyles`, `headerFillColor`, `headerTextColor`, `headerFontSize`, `bodyFontSize` |
+| `ExcelSheetDefinition` | one entry of `sheets` | `name`, `rows` (`'all'` / `'selected'`), `includeHeaders`, `includeSummary`, `autoFilter`, `frozenHeader`, `alternateRowColor`; `{ type: 'summary', name? }` adds a totals sheet |
+| `ExcelColumnStyle` | a value of `columnStyles` (by field) | `numFmt` (e.g. `'$#,##0.00'`), `width`, `alignment`, `embedImage`, `imageWidth`, `imageHeight` |
+
+`PdfExportOptions` and `PrintOptions` are described in [PDF Export](features/pdf-export.md) and the [Export Guide](features/export-guide.md).
+
 ---
 
 ## 🤖 AI Toolkit (`@opencorestack/opengridx/ai`)
@@ -652,6 +667,10 @@ Context provider for overriding the grid's visual system.
 - **`overlays`**: colours (`background`, `text`, `border`, `shadow`, `item*`) and, v3.7, `fontFamily`, `fontWeight`, `fontSize` for menus and panels.
 - **`toolbar`**, **`scrollbar`** (`thumbColor`, `trackColor`, `size`), **`skeleton`** (`baseColor`, `highlightColor`), **`transitions`**.
 
+#### Theme types
+
+`DataGridThemeProviderProps`: `theme: GridTheme`, `children`, `className?`, `style?` (both on the wrapper element). Each key of `GridTheme` has its own exported type, for building a theme in parts: `GridThemeColors` (with `GridThemeGrayScale` for `gray`), `GridThemeTypography`, `GridThemeSpacing`, `GridThemeBorders`, `GridThemeShadows`, `GridThemeGrid`, `GridThemeOverlays`, `GridThemeToolbar`, `GridThemeScrollbar`, `GridThemeSkeleton`, `GridThemeTransitions`. Every field is optional.
+
 Presets: `darkTheme`, `roseTheme`, `emeraldTheme`, `amberTheme`, `compactTheme`. See [Theming](customization/theming.md).
 
 ---
@@ -836,6 +855,15 @@ If the key can change while the grid stays mounted, remount the grid with it (`<
 
 ## ⚙️ Interfaces & Types
 
+### Small shared types
+
+| Type | Definition | Used by |
+| :--- | :--- | :--- |
+| `GridAlignment` | `'left' \| 'center' \| 'right'` | `GridColDef.align`, `headerAlign` |
+| `GridSortDirection` | `'asc' \| 'desc' \| null` | a column's sort state (`null`: unsorted) |
+| `GridSortModel` | `{ field: string; sort: GridSortDirection }`: like `GridSortItem`, but `sort` may be `null` | a single column's sort state |
+| `GridPinnedPosition` | `'left' \| 'right'` (logical: inline start / end in RTL) | column pinning |
+
 ### `GridSortItem`
 ```typescript
 interface GridSortItem {

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/AiAssistant/GridAiAssistantPanel.css

@@ -71,7 +71,7 @@
 .ogx-ai-panel__suggestion {
   padding: 3px 10px;
   border: 1px solid var(--ogx-border-color, var(--ogx-grid-border-color));
-  border-radius: var(--ogx-border-radius-round, 999px);
+  border-radius: 999px;
   background: var(--ogx-grid-header-background);
   color: inherit;
   font: inherit;
@@ -119,7 +119,7 @@
   align-items: center;
   gap: 4px;
   padding: 2px 4px 2px 10px;
-  border-radius: var(--ogx-border-radius-round, 999px);
+  border-radius: 999px;
   background: var(--ogx-color-primary-light, #e0e7ff);
   color: var(--ogx-color-primary-dark, #1e3a8a);
 }

package/lib/components/Cell/Cell.css

@@ -27,9 +27,7 @@
   outline: 2px solid var(--ogx-grid-cell-focus-border, var(--ogx-color-primary, #2563eb));
   outline-offset: -2px;
 }
-.ogx__cell--editable {
-  cursor: text;
-}
+
 /*
  * Cell range selection (cellSelection, v3.3). The tint is a background image, so it also covers
  * pinned cells' own background; the outline is an inset box-shadow, so the layout never shifts.

package/lib/components/ColumnGroupHeader/ColumnGroupHeader.css

@@ -67,7 +67,6 @@
 }
 
 /* ─── Dark-mode overrides ────────────────────────────────────────────────────*/
-[data-theme="dark"] .ogx-col-group-cell__label,
-.ogx--dark .ogx-col-group-cell__label {
+[data-theme="dark"] .ogx-col-group-cell__label {
     color: var(--ogx-color-gray-300, #cbd5e1);
 }

package/lib/components/DataGrid/DataGrid.css

@@ -67,24 +67,7 @@
   background: var(--ogx-grid-background);
   box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
 }
-.ogx--loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
-.ogx--loading::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: color-mix(in srgb, var(--ogx-grid-background) 60%, transparent);
-  backdrop-filter: blur(2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--ogx-z-index-modal);
-}
+
 /* No height prop: fill the container, as a block child of a sized box (height: 100%) or as a
    flex item (flex: 1 with min-height: 0). In an auto-height parent 100% resolves to auto. */
 .ogx--fill {
@@ -312,16 +295,6 @@
   text-overflow: ellipsis;
 }
 
-.ogx--density-compact .ogx__cell,
-.ogx--density-compact .ogx__header-cell {
-  padding: var(--ogx-spacing-xs) var(--ogx-spacing-sm);
-  font-size: var(--ogx-font-size-xs);
-}
-.ogx--density-comfortable .ogx__cell,
-.ogx--density-comfortable .ogx__header-cell {
-  padding: var(--ogx-spacing-md) var(--ogx-spacing-lg);
-  font-size: var(--ogx-font-size-md);
-}
 .ogx__group-cell-content {
   font-weight: 500;
   text-align: start;

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;
@@ -228,7 +228,8 @@ export function GridVirtualRows<R extends GridRowModel>({
                         {Array.from({ length: infiniteScrollSkeletonCount }).map((_, i) => (
                             <Row<R>
                                 key={`__skeleton_${i}__`}
-                                row={{ id: `__skeleton_${i}__`, _isSkeleton: true } as unknown as R}
+                                row={{ id: `__skeleton_${i}__` } as unknown as R}
+                                skeleton
                                 columns={virtualColumns}
                                 rowIndex={unpinnedRowsLength + i}
                                 rowHeight={rowHeight}

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -7,9 +7,9 @@ import type {
     GridFilterOperator
 } from '../../types';
 import { filterValueToInputText, getOperatorsForType, NO_VALUE_OPERATORS } from '../../utils/filtering';
+import { filterValueFromInputText, getFilterValueOptions, isSameFilterValue, matchesFilterValueOption } from '../../utils/filtering/filterInput';
 import { Input } from '../ui/Input';
 
-
 export interface FilterPanelProps {
     filterModel: GridFilterModel;
     columns: GridColDef[];
@@ -29,17 +29,10 @@ function getActiveFilter(items: readonly FilterEntry[], field: string): GridFilt
     return items.find((entry): entry is GridFilterItem => isFilterItem(entry) && entry.field === field);
 }
 
-function sameValue(a: unknown, b: unknown): boolean {
-    if (Object.is(a, b)) return true;
-    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
-    if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => sameValue(v, b[i]));
-    return false;
-}
-
 function sameEntry(a: FilterEntry, b: FilterEntry): boolean {
     if (a === b) return true;
     if (isFilterItem(a) && isFilterItem(b)) {
-        return a.id === b.id && a.field === b.field && a.operator === b.operator && sameValue(a.value, b.value);
+        return a.id === b.id && a.field === b.field && a.operator === b.operator && isSameFilterValue(a.value, b.value);
     }
     if (!isFilterItem(a) && !isFilterItem(b)) {
         return a.id === b.id && a.logicOperator === b.logicOperator && sameEntries(a.items, b.items);
@@ -52,36 +45,11 @@ function sameEntries(a: readonly FilterEntry[], b: readonly FilterEntry[]): bool
     return a.length === b.length && a.every((entry, i) => sameEntry(entry, b[i]));
 }
 
-interface ValueOption {
-    key: string;
-    value: unknown;
-    label: string;
-}
-
-function getValueOptions(col: GridColDef): ValueOption[] {
-    return (col.valueOptions ?? []).map((option, index) => (
-        option !== null && typeof option === 'object'
-            ? { key: String(index), value: option.value, label: option.label }
-            : { key: String(index), value: option, label: String(option) }
-    ));
-}
-
-function matchesOption(option: ValueOption, value: unknown): boolean {
-    if (Object.is(option.value, value)) return true;
-    return value != null && String(option.value).toLowerCase() === String(value).toLowerCase();
-}
-
 /** Text shown in the value input for a committed value. Never used to emit anything. */
 function toInputText(value: unknown, col: GridColDef): string {
     return filterValueToInputText(value, col.type);
 }
 
-/** The item value for typed text. isAnyOf takes a comma-separated list. */
-function fromInputText(text: string, operator: GridFilterOperator): unknown {
-    if (operator === 'isAnyOf') return text.split(',').map(part => part.trim()).filter(part => part !== '');
-    return text;
-}
-
 /** Carry a value over to a newly picked operator: lists for isAnyOf, scalars for the rest. */
 function convertValueForOperator(value: unknown, operator: GridFilterOperator): unknown {
     if (NO_VALUE_OPERATORS.has(operator)) return undefined;
@@ -144,7 +112,7 @@ const FilterRow: React.FC<{
         const unchanged = current ? text === toInputText(current.value, colRef.current) : text.trim() === '';
         if (unchanged) return;
         const operator = current?.operator ?? defaultOperator;
-        onChangeRef.current(buildItem(operator, fromInputText(text, operator)));
+        onChangeRef.current(buildItem(operator, filterValueFromInputText(text, operator)));
     }, [defaultOperator, buildItem]);
 
     // Text still waiting for the debounce; flushed when the panel closes (unmounts) meanwhile.
@@ -172,7 +140,7 @@ const FilterRow: React.FC<{
 
     const handleOperatorChange = (op: GridFilterOperator) => {
         // Keep what the user typed even if the debounce has not committed it yet.
-        const value = draft !== null ? fromInputText(draft, op) : item?.value;
+        const value = draft !== null ? filterValueFromInputText(draft, op) : item?.value;
         setDraft(null);
         onChange(buildItem(op, convertValueForOperator(value, op)));
     };
@@ -183,7 +151,7 @@ const FilterRow: React.FC<{
     };
 
     const showValue = !NO_VALUE_OPERATORS.has(currentOperator);
-    const valueOptions = getValueOptions(col);
+    const valueOptions = getFilterValueOptions(col);
     const valueClassName = `ogx-filter__value-input${isActive ? ' ogx-filter__value-input--active' : ''}`;
     const valueLabel = `Filter value for ${label}`;
 
@@ -215,7 +183,7 @@ const FilterRow: React.FC<{
                 className={`${valueClassName} ogx-filter__value-multiselect`}
                 multiple
                 size={Math.min(valueOptions.length, 4)}
-                value={valueOptions.filter(o => selected.some(v => matchesOption(o, v))).map(o => o.key)}
+                value={valueOptions.filter(o => selected.some(v => matchesFilterValueOption(o, v))).map(o => o.key)}
                 onChange={(e) => {
                     const keys = new Set(Array.from(e.target.selectedOptions, option => option.value));
                     onChange(buildItem('isAnyOf', valueOptions.filter(o => keys.has(o.key)).map(o => o.value)));
@@ -226,7 +194,7 @@ const FilterRow: React.FC<{
             </select>
         );
     } else if (showValue && col.type === 'singleSelect' && valueOptions.length > 0 && (currentOperator === 'is' || currentOperator === 'not')) {
-        const current = valueOptions.find(o => matchesOption(o, item?.value));
+        const current = valueOptions.find(o => matchesFilterValueOption(o, item?.value));
         valueControl = (
             <select
                 id={`${filterId}-val`}

package/lib/components/Header/Header.css

@@ -207,12 +207,7 @@
   background-color: var(--ogx-grid-header-hover-background);
   z-index: 6;
 }
-.ogx__header-cell--focus-visible {
-  outline: 2px solid var(--ogx-grid-cell-focus-border, var(--ogx-color-primary));
-  outline-offset: -2px;
-  background-color: var(--ogx-grid-header-hover-background);
-  z-index: 6; 
-}
+
 .ogx__header-cell:focus, .ogx__header-cell:focus-visible {
   outline: none !important;
 }
@@ -241,8 +236,4 @@
   background: var(--ogx-grid-header-hover-background);
   color: var(--ogx-grid-header-text);
 }
-.ogx__menu-icon-btn--active {
-  opacity: 1;
-  background: var(--ogx-color-primary-light);
-  color: var(--ogx-color-primary);
-}
+

package/lib/components/HeaderFilter/HeaderFilterCell.tsx

@@ -10,6 +10,7 @@ import {
     getHeaderFilterOperators,
     type GridHeaderFilterState,
 } from '../../utils/headerFilters';
+import { filterValueFromInputText, getFilterValueOptions, isSameFilterValue, matchesFilterValueOption } from '../../utils/filtering/filterInput';
 import { Input } from '../ui/Input';
 import { HeaderFilterOperatorMenu } from './HeaderFilterOperatorMenu';
 import type { HeaderFilterLocale } from '../../utils/headerFilterLocale';
@@ -29,42 +30,10 @@ export interface HeaderFilterCellProps {
     locale: HeaderFilterLocale;
 }
 
-interface ValueOption {
-    key: string;
-    value: unknown;
-    label: string;
-}
-
-function getValueOptions(col: GridColDef): ValueOption[] {
-    return (col.valueOptions ?? []).map((option, index) => (
-        option !== null && typeof option === 'object'
-            ? { key: String(index), value: option.value, label: option.label }
-            : { key: String(index), value: option, label: String(option) }
-    ));
-}
-
-function matchesOption(option: ValueOption, value: unknown): boolean {
-    const single = Array.isArray(value) ? value[0] : value;
-    if (Object.is(option.value, single)) return true;
-    return single != null && String(option.value).toLowerCase() === String(single).toLowerCase();
-}
-
-/** The item value for typed text. isAnyOf takes a comma-separated list. */
-function fromInputText(text: string, operator: GridFilterOperator): unknown {
-    if (operator === 'isAnyOf') return text.split(',').map(part => part.trim()).filter(part => part !== '');
-    return text;
-}
-
-function sameValue(a: unknown, b: unknown): boolean {
-    if (Object.is(a, b)) return true;
-    if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => sameValue(v, b[i]));
-    return false;
-}
-
 function sameItem(a: GridFilterItem | undefined, b: GridFilterItem | undefined): boolean {
     if (a === b) return true;
     if (!a || !b) return false;
-    return a.operator === b.operator && sameValue(a.value, b.value);
+    return a.operator === b.operator && isSameFilterValue(a.value, b.value);
 }
 
 function ClearIcon() {
@@ -81,7 +50,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
     const label = colDef.headerName || colDef.field;
     const item = state.kind === 'editable' ? state.item : undefined;
     const operator: GridFilterOperator = item?.operator ?? getHeaderFilterDefaultOperator(colDef);
-    const valueOptions = getValueOptions(colDef);
+    const valueOptions = getFilterValueOptions(colDef);
     const usesSelect = colDef.type === 'boolean' || (colDef.type === 'singleSelect' && valueOptions.length > 0);
     const showsValue = !NO_VALUE_OPERATORS.has(operator);
 
@@ -117,7 +86,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
         const unchanged = current ? text === filterValueToInputText(current.value, col.type) : text.trim() === '';
         if (unchanged) return;
         const op = current?.operator ?? getHeaderFilterDefaultOperator(col);
-        const next = buildHeaderFilterItem(col, op, fromInputText(text, op));
+        const next = buildHeaderFilterItem(col, op, filterValueFromInputText(text, op));
         setLastEmitted(next);
         emit(col.field, next);
     }, []);
@@ -173,7 +142,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
 
     const selectOperator = (op: GridFilterOperator) => {
         // Keep what was typed even if the debounce has not committed it yet.
-        const value = draft !== null ? fromInputText(draft, op) : item?.value;
+        const value = draft !== null ? filterValueFromInputText(draft, op) : item?.value;
         setDraft(null);
         setMenuAnchor(null);
         report(buildHeaderFilterItem(colDef, op, convertHeaderFilterValue(value, op)));
@@ -271,7 +240,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                 </select>
             );
         } else if (usesSelect) {
-            const selected = valueOptions.find(o => matchesOption(o, item?.value));
+            const selected = valueOptions.find(o => matchesFilterValueOption(o, item?.value));
             valueControl = (
                 <select
                     ref={selectRef}

package/lib/components/ListView/ListView.css

@@ -109,22 +109,6 @@
   color: var(--ogx-text-secondary, #9ca3af);
 }
 
-/* ─── Responsive: auto switch at ≤768px when using ogx--list-auto class ─── */
-@media (max-width: 768px) {
-  .ogx--list-auto .ogx__viewport {
-    display: none;
-  }
-  .ogx--list-auto .ogx-list-view {
-    display: flex;
-  }
-}
-
-@media (min-width: 769px) {
-  .ogx--list-auto .ogx-list-view {
-    display: none;
-  }
-}
-
 /* Loading with no rows yet: a progress bar, or slots.loadingOverlay centred. */
 .ogx-list-view__loading {
   position: relative;

package/lib/components/Row/Row.tsx

@@ -46,6 +46,8 @@ function mergeColSpan<R extends GridRowModel>(
 
 export interface RowProps<R extends GridRowModel = GridRowModel> {
     row: R;
+    /** A shimmer placeholder shown while infinite scroll loads more rows (`row` is unused). */
+    skeleton?: boolean;
     /** The row's id (from getRowId). Defaults to `row.id`; the grid always passes it. */
     rowId?: GridRowId;
     columns: GridColDef<R>[];
@@ -108,6 +110,7 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
 function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const {
         row,
+        skeleton = false,
         rowId: rowIdProp,
         columns,
         rowIndex,
@@ -197,7 +200,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     }, [onEditStop, id]);
 
     // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
-    if (row._isSkeleton) {
+    if (skeleton) {
         // Render shimmer placeholders — one per visible column, matching row height
         const cellCount = Math.max(columns.length, 5);
         return (

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 {