@opencorestack/opengridx 3.2.1 → 3.3.0

package/lib/components/CellSelectionStats/CellSelectionStats.css

@@ -0,0 +1,31 @@
+/* Status bar of showCellSelectionStats (v3.3). The area keeps its height while no range is selected. */
+.ogx__cell-selection-stats-area {
+  flex: 0 0 auto;
+  min-height: 32px;
+  border-top: var(--ogx-border-width-thin, 1px) solid var(--ogx-grid-border-color);
+  background: var(--ogx-grid-header-background);
+  color: var(--ogx-grid-header-text);
+  font-size: var(--ogx-font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+.ogx__cell-selection-stats {
+  display: flex;
+  align-items: center;
+  gap: var(--ogx-spacing-lg, 16px);
+  padding: 4px 16px;
+}
+.ogx__cell-selection-stat {
+  display: inline-flex;
+  gap: 6px;
+  white-space: nowrap;
+}
+.ogx__cell-selection-stat-label {
+  opacity: 0.75;
+}
+.ogx__cell-selection-stat-value {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}

package/lib/components/CellSelectionStats/CellSelectionStats.tsx

@@ -0,0 +1,32 @@
+import { formatAggregationValue } from '../../utils/aggregation';
+import type { GridCellSelectionStatsSlotProps } from '../../types';
+
+export type CellSelectionStatsProps = GridCellSelectionStatsSlotProps & Record<string, unknown>;
+
+/**
+ * The status bar of `showCellSelectionStats`: count of non-empty cells, and the sum and average of
+ * the numeric cells of the selected range. Replace it with `slots.cellSelectionStats`, or wrap it.
+ * @since v3.3
+ */
+export function CellSelectionStats({ count, sum, average }: CellSelectionStatsProps) {
+    return (
+        <div className="ogx__cell-selection-stats">
+            <span className="ogx__cell-selection-stat">
+                <span className="ogx__cell-selection-stat-label">Count</span>
+                <span className="ogx__cell-selection-stat-value" data-stat="count">{count.toLocaleString()}</span>
+            </span>
+            {sum !== null && (
+                <span className="ogx__cell-selection-stat">
+                    <span className="ogx__cell-selection-stat-label">Sum</span>
+                    <span className="ogx__cell-selection-stat-value" data-stat="sum">{formatAggregationValue(sum, 'sum')}</span>
+                </span>
+            )}
+            {average !== null && (
+                <span className="ogx__cell-selection-stat">
+                    <span className="ogx__cell-selection-stat-label">Average</span>
+                    <span className="ogx__cell-selection-stat-value" data-stat="average">{formatAggregationValue(average, 'avg')}</span>
+                </span>
+            )}
+        </div>
+    );
+}

package/lib/components/CellSelectionStats/GridCellSelectionStatsArea.tsx

@@ -0,0 +1,24 @@
+import type React from 'react';
+import { CellSelectionStats } from './CellSelectionStats';
+import type { GridCellSelectionStats } from '../../hooks/core/useGridCellSelection';
+import type { GridApi, GridCellSelectionStatsSlotProps } from '../../types';
+
+interface GridCellSelectionStatsAreaProps {
+    stats: GridCellSelectionStats | null;
+    apiRef: React.MutableRefObject<GridApi>;
+    slot?: React.ComponentType<GridCellSelectionStatsSlotProps & Record<string, unknown>>;
+    slotProps?: Partial<GridCellSelectionStatsSlotProps> & Record<string, unknown>;
+}
+
+/**
+ * The strip under the viewport that holds the status bar. It keeps its height while one cell or
+ * none is selected, so the viewport does not resize each time a range starts or ends.
+ */
+export function GridCellSelectionStatsArea({ stats, apiRef, slot, slotProps }: GridCellSelectionStatsAreaProps) {
+    const Component = slot ?? CellSelectionStats;
+    return (
+        <div className="ogx__cell-selection-stats-area" aria-hidden={stats ? undefined : true}>
+            {stats && <Component apiRef={apiRef} {...stats} {...slotProps} />}
+        </div>
+    );
+}

package/lib/components/DataGrid/DataGrid.tsx

@@ -52,6 +52,9 @@ import { useGridAggregationApi } from '../../hooks/core/useGridAggregationApi';
 import { useGridClipboardApi } from '../../hooks/core/useGridClipboardApi';
 import { useGridScrollToIndexesApi } from '../../hooks/core/useGridScrollToIndexesApi';
 import { useGridColumnAutosize } from '../../hooks/core/useGridColumnAutosize';
+import { useGridCellSelection } from '../../hooks/core/useGridCellSelection';
+import { useGridCellSelectionApi } from '../../hooks/core/useGridCellSelectionApi';
+import { GridCellSelectionStatsArea } from '../CellSelectionStats/GridCellSelectionStatsArea';
 import { useGridSortHandlers, useGridColumnMenuHandlers } from '../../hooks/core/useGridHeaderHandlers';
 import { useGridKeyboardMode, useGridPointerFocusHandlers } from '../../hooks/core/useGridFocusHandlers';
 import { getPaginationRowCount, pickPaginationLocaleText } from '../../utils/pagination';
@@ -76,12 +79,17 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         getRowId,
         rowHeight: rowHeightProp,
         headerHeight: headerHeightProp,
+        wrapHeaderText = false,
         autoHeight = false,
         density,
         checkboxSelection = false,
         disableRowSelectionOnClick = false,
         disableMultipleRowSelection = false,
         disableClipboardCopy = false,
+        cellSelection: cellSelectionProp = false,
+        cellSelectionModel: propCellSelectionModel,
+        onCellSelectionModelChange,
+        showCellSelectionStats = false,
         rowSelectionModel: propRowSelectionModel,
         onRowSelectionModelChange: propOnRowSelectionModelChange,
         onRowClick,
@@ -184,6 +192,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         rowSelectionModel: propRowSelectionModel,
         onRowSelectionModelChange: propOnRowSelectionModelChange,
         density,
+        cellSelectionModel: propCellSelectionModel,
+        onCellSelectionModelChange,
     });
 
     const {
@@ -493,12 +503,34 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         [layout.leftPinnedCols, layout.unpinnedColsWithWidth, layout.rightPinnedCols]
     );
 
+    // Cell range selection (cellSelection): the range, pointer drag and Shift-keys, copy text, totals.
+    const cellSelection = useGridCellSelection<R>({
+        enabled: cellSelectionProp && !listView,
+        model: controlledState.cellSelectionModel,
+        onModelChange: controlledState.handleCellSelectionModelChange,
+        getPendingModel: controlledState.getPendingCellSelectionModel,
+        allRenderableRows,
+        getRowId: getRowIdOf,
+        navigationColumns,
+        columnIndexMap,
+        spanning,
+        rowMetaMap,
+        layout,
+        rowHeight: effectiveRowHeight,
+        pinnedTopRowCount: pinnedTopRows.length,
+        viewportRef,
+        containerRef,
+        localeText,
+        showStats: showCellSelectionStats,
+    });
+
     useGridClipboardApi({
         apiRef,
         columns: renderedDataColumns as unknown as GridColDef[],
         getRowId: getRowIdOf,
         containerRef,
         disableKeyboardShortcut: disableClipboardCopy,
+        getCellRangeCopyText: cellSelection.enabled ? cellSelection.getCopyText : undefined,
     });
     useGridScrollToIndexesApi<R>({ apiRef, viewportRef, layout, rowHeight: effectiveRowHeight });
     const handleColumnAutosize = useGridColumnAutosize<R>({ apiRef, containerRef, columns: orderedColumns, onColumnResize: handleColumnResize });
@@ -541,11 +573,23 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         pinCheckboxColumn,
         pinExpandColumn,
         rowHeight: effectiveRowHeight,
+        cellSelection: cellSelection.keyboard,
     });
 
     const { handleCellClick, handleHeaderClick } = useGridPointerFocusHandlers<R>({
         ensureGridFocus, setKeyboardMode, setFocusedCell, getRowId: getRowIdOf, onCellClick,
     });
+    // Keeps the range anchor and the focused cell together; installs the cell selection API.
+    useGridCellSelectionApi({
+        apiRef,
+        selection: cellSelection,
+        model: controlledState.cellSelectionModel,
+        getPendingModel: controlledState.getPendingCellSelectionModel,
+        focusedCell,
+        setFocusedCell,
+        containerRef,
+    });
+
     const { handleHideColumn, handlePinColumn } = useGridColumnMenuHandlers({
         columnVisibilityModel,
         onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
@@ -658,6 +702,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         rowSpanningCaches: spanning.rowSpanningCaches,
         rowHeight: effectiveRowHeight,
         rowMetaMap,
+        cellRange: cellSelection.displayRange,
+        cellRangeHasRowSpan: cellSelection.hasRowSpan,
     };
 
     return (
@@ -746,11 +792,13 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                     aria-label={ariaLabel || 'Data grid'}
                     aria-rowcount={ariaRows.rowCount}
                     aria-colcount={navigationColumns.length}
-                    aria-multiselectable={rowSelectionEnabled && !disableMultipleRowSelection}
+                    aria-multiselectable={(rowSelectionEnabled && !disableMultipleRowSelection) || cellSelection.enabled}
                     aria-busy={effectiveLoading}
                     tabIndex={viewportTabIndex}
                     onKeyDownCapture={() => { setKeyboardMode(true); }}
                     onMouseDownCapture={handleMouseDownCapture}
+                    onMouseDown={cellSelection.handleMouseDown}
+                    onClickCapture={cellSelection.handleClickCapture}
                     onKeyDown={handleKeyDown}
                     onFocus={handleFocus}
                     onBlur={handleBlur}
@@ -802,6 +850,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                                 onHideColumn={handleHideColumn}
                                 onManageColumns={columnsPanel.openColumnsPanel}
                                 onPinColumn={handlePinColumn}
+                                wrapHeaderText={wrapHeaderText}
+                                headerHeight={headerHeight}
                             />
 
                             <GridPinnedRows<R>
@@ -881,6 +931,15 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 </div>
             )}
 
+            {cellSelection.enabled && showCellSelectionStats && (
+                <GridCellSelectionStatsArea
+                    stats={cellSelection.stats}
+                    apiRef={gridData.apiRef}
+                    slot={slots?.cellSelectionStats}
+                    slotProps={slotProps?.cellSelectionStats}
+                />
+            )}
+
             {FooterSlot && (
                 <FooterSlot
                     apiRef={gridData.apiRef}
@@ -915,6 +974,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 filteredRowCount={filteredRows.length}
                 dataRowCount={dataRows.length}
                 filterModel={filterModel}
+                cellSelectionAnnouncement={cellSelection.announcement}
             />
 
             {showLoadingOverRows && (

package/lib/components/DataGrid/GridLiveRegion.tsx

@@ -11,10 +11,15 @@ interface GridLiveRegionProps {
     /** Data rows that pass the filter: the "n rows found" count. */
     dataRowCount: number;
     filterModel: GridFilterModel | undefined;
+    /** The size of the selected cell range (`cellSelection`), already debounced. */
+    cellSelectionAnnouncement?: string;
 }
 
-/** Polite status announcements: loading, a load error, no rows, or the row count of an active filter. */
-export function GridLiveRegion({ loading, error, noRowsLabel, filteredRowCount, dataRowCount, filterModel }: GridLiveRegionProps) {
+/**
+ * Polite status announcements: loading, a load error, no rows, or the row count of an active filter;
+ * and the size of the selected cell range.
+ */
+export function GridLiveRegion({ loading, error, noRowsLabel, filteredRowCount, dataRowCount, filterModel, cellSelectionAnnouncement }: GridLiveRegionProps) {
     return (
         <div className="ogx-aria-live-status" role="status" aria-live="polite">
             {loading ? 'Loading data...' : ''}
@@ -26,6 +31,7 @@ export function GridLiveRegion({ loading, error, noRowsLabel, filteredRowCount,
                         ? `${dataRowCount} ${dataRowCount === 1 ? 'row' : 'rows'} found`
                         : ''
             )}
+            {cellSelectionAnnouncement ? <span className="ogx-aria-live-status__cells"> {cellSelectionAnnouncement}</span> : null}
         </div>
     );
 }

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -15,6 +15,8 @@ import type {
     GridRowMeta,
 } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
+import type { GridDisplayCellRange } from '../../hooks/core/useGridCellSelection';
+import { getRowCellRange } from '../../utils/cellSelection';
 import type { GridEditingState } from '../../hooks/features/useGridEditing';
 
 interface PinnedRowEditingHandlers {
@@ -58,6 +60,10 @@ export interface GridPinnedRowsProps<R extends GridRowModel> {
     /** `aria-rowindex` of the first of these rows. */
     ariaRowIndexBase?: number;
     columnIndexMap?: Map<string, number>;
+    /** The selected cell range to draw (`cellSelection`), in renderable-row / data-column indices. */
+    cellRange?: GridDisplayCellRange | null;
+    /** The grid has row spans: rows tell their cells how far the range bottom is. */
+    cellRangeHasRowSpan?: boolean;
     /** Pinned rows are edited like any other row. */
     editingHandlers?: PinnedRowEditingHandlers;
     isCellEditable?: (params: GridCellParams<R>) => boolean;
@@ -103,6 +109,8 @@ export function GridPinnedRows<R extends GridRowModel>({
     editingHandlers,
     isCellEditable,
     rowReordering = false,
+    cellRange,
+    cellRangeHasRowSpan = false,
 }: GridPinnedRowsProps<R>) {
     if (rows.length === 0) return null;
 
@@ -148,6 +156,7 @@ export function GridPinnedRows<R extends GridRowModel>({
                     onEditCellValueChange={editingHandlers?.setEditCellValue}
                     isCellEditable={isCellEditable}
                     rowReordering={rowReordering}
+                    cellRange={getRowCellRange(cellRange, rowIndex, cellRangeHasRowSpan)}
                 />
                 );
             })}

package/lib/components/DataGrid/GridToolbarSlot.tsx

@@ -25,8 +25,13 @@ function isPlainFunctionComponent(component: React.ComponentType<ToolbarProps>):
  * Runs a plain function toolbar inside its own fiber. The caller keys this element on the
  * function's source, so the fiber (and every hook in it) survives when the consumer redefines
  * the same toolbar inline on each render, but remounts when a different toolbar is passed.
+ *
+ * `render` calls hooks, so it must run on every render. React Compiler would memoize the call
+ * like any other and skip it when `render` and `toolbarProps` are unchanged, which breaks the
+ * toolbar's hooks; `'use no memo'` keeps this wrapper out of the compiler.
  */
 function InlineToolbar({ render, toolbarProps }: InlineToolbarProps) {
+    'use no memo';
     return <>{render(toolbarProps)}</>;
 }
 

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -18,6 +18,8 @@ import type { GridVisibleRow } from '../../hooks/core/useGridVisibleRows';
 import type { UseRowReorderReturn } from '../../hooks/useRowReorder';
 import type { GridEditingState } from '../../hooks/features/useGridEditing';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
+import type { GridDisplayCellRange } from '../../hooks/core/useGridCellSelection';
+import { getRowCellRange } from '../../utils/cellSelection';
 
 interface RowEditingHandlers {
     editingCell: GridEditingState['editingCell'];
@@ -71,6 +73,10 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     /** Added to a row's rowIndex to get its `aria-rowindex` (header rows and earlier pages included). */
     ariaRowIndexOffset?: number;
     columnIndexMap?: Map<string, number>;
+    /** The selected cell range to draw (`cellSelection`), in renderable-row / data-column indices. */
+    cellRange?: GridDisplayCellRange | null;
+    /** The grid has row spans: rows tell their cells how far the range bottom is. */
+    cellRangeHasRowSpan?: boolean;
 }
 
 export function GridVirtualRows<R extends GridRowModel>({
@@ -115,6 +121,8 @@ export function GridVirtualRows<R extends GridRowModel>({
     loadingOverlay,
     ariaRowIndexOffset,
     columnIndexMap,
+    cellRange,
+    cellRangeHasRowSpan = false,
 }: GridVirtualRowsProps<R>) {
     const skeletonColumns: GridColDef<R>[] = baseColumns.length > 0
         ? baseColumns
@@ -206,6 +214,7 @@ export function GridVirtualRows<R extends GridRowModel>({
                             rowSpanningCaches={rowSpanningCaches}
                             rowHeight={rowHeight}
                             rowMeta={rowMetaMap.get(id)}
+                            cellRange={getRowCellRange(cellRange, actualIndex, cellRangeHasRowSpan)}
                         />
                     ))
                 )}

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -107,7 +107,8 @@ const FilterRow: React.FC<{
     onChange: (item: GridFilterItem | null) => void;
 }> = ({ col, item, resetToken, onChange }) => {
     const filterId = useId();
-    const typeOperators = getOperatorsForType(col.type);
+    // Memoized so React Compiler treats the list as frozen and can keep the callbacks below memoized.
+    const typeOperators = useMemo(() => getOperatorsForType(col.type), [col.type]);
     const defaultOperator = typeOperators[0];
     const currentOperator: GridFilterOperator = item?.operator ?? defaultOperator;
     // An operator set programmatically that the column type does not list is still shown, so the

package/lib/components/Header/Header.css

@@ -68,6 +68,18 @@
   font-weight: 600;
   letter-spacing: -0.01em;
 }
+/* Wrapped header title (wrapHeaderText): as many lines as fit in --ogx-header-height, the line count
+   is set inline as -webkit-line-clamp (getHeaderLineClamp). The line-height must match
+   HEADER_WRAP_LINE_HEIGHT in utils/headerWrap.ts. max-height keeps the header at its height even when
+   a theme changes the font or padding. */
+.ogx__header-cell--wrap .ogx__header-cell-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+  overflow-wrap: break-word;
+  line-height: 16px;
+  max-height: calc(var(--ogx-header-height, 56px) - 2 * var(--ogx-grid-cell-padding-y, 8px));
+}
 .ogx__header-cell-aggregation {
   font-size: 0.6rem;
   font-weight: 500;

package/lib/components/Header/Header.tsx

@@ -7,6 +7,7 @@ import { isColumnPinned, calculatePinnedPositions, getPinnedEdgeFields } from '.
 import { getRenderedColumnWidth } from '../../utils/columnWidth';
 import { buildColumnGroupRow, getColumnGroupDepth, getColumnGroupPaths } from '../../utils/columnGroups';
 import { ColumnMenu } from './ColumnMenu';
+import { getHeaderLineClamp, shouldWrapHeaderText } from '../../utils/headerWrap';
 
 
 function MenuIcon() {
@@ -69,6 +70,10 @@ export interface HeaderProps<R extends GridRowModel = GridRowModel> {
     onManageColumns?: () => void;
     /** Position of each visible data column in render order, for `colIndex` and `aria-colindex`. */
     columnIndexMap?: Map<string, number>;
+    /** Wraps header titles onto several lines; `GridColDef.wrapHeaderText` overrides it per column. */
+    wrapHeaderText?: boolean;
+    /** Header row height in pixels; sets how many lines a wrapped title may take. Defaults to 56. */
+    headerHeight?: number;
 }
 
 export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps<R>) {
@@ -105,6 +110,8 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         onPinColumn,
         onManageColumns,
         columnIndexMap,
+        wrapHeaderText = false,
+        headerHeight = 56,
     } = props;
 
     const selectAllId = useId();
@@ -411,6 +418,8 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     const isPinned = pinnedPosition !== null;
                     const isDragging = draggedColumn === colDef.field;
                     const isDragOver = dragOverColumn === colDef.field;
+                    const wraps = shouldWrapHeaderText(colDef.wrapHeaderText, wrapHeaderText);
+                    const aggregationLabel = aggregationModel?.[colDef.field];
 
                     const classNames = [
                         'ogx__header-cell',
@@ -423,6 +432,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         pinnedPosition === 'right' && colDef.field === pinnedEdges.firstRight && 'ogx__header-cell--pinned-right-first',
                         isDragging && 'ogx__header-cell--dragging',
                         isDragOver && 'ogx__header-cell--drag-over',
+                        wraps && 'ogx__header-cell--wrap',
                         isHeaderFocused(colDef.field) && 'ogx__header-cell--focused',
                         colDef.headerClassName
                     ].filter(Boolean).join(' ');
@@ -476,7 +486,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                             key={colDef.field}
                             className={classNames}
                             style={style}
-                            title={colDef.description}
+                            title={colDef.description ?? (wraps && typeof headerContent === 'string' ? headerContent : undefined)}
                             onClick={handleHeaderClick}
                             role="columnheader"
                             draggable={!!handleDragStart}
@@ -498,12 +508,15 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                                     </div>
                                 )}
                                 <div className="ogx__header-cell-title-wrapper">
-                                    <span className="ogx__header-cell-title">
+                                    <span
+                                        className="ogx__header-cell-title"
+                                        style={wraps ? { WebkitLineClamp: getHeaderLineClamp(headerHeight, !!aggregationLabel) } : undefined}
+                                    >
                                         {headerContent}
                                     </span>
-                                    {aggregationModel && aggregationModel[colDef.field] && (
+                                    {aggregationLabel && (
                                         <span className="ogx__header-cell-aggregation">
-                                            {aggregationModel[colDef.field]}
+                                            {aggregationLabel}
                                         </span>
                                     )}
                                 </div>

package/lib/components/Row/Row.tsx

@@ -13,6 +13,8 @@ import { tryGetCellValue } from '../../utils/values';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
 import { getRenderedColumnWidth } from '../../utils/columnWidth';
 import { DEFAULT_DETAIL_PANEL_HEIGHT } from '../../utils/detailPanel';
+import { GROUPING_COLUMN_FIELD, getCellRangeFlags, isSameRowCellRange } from '../../utils/cellSelection';
+import type { GridRowCellRange } from '../../utils/cellSelection';
 
 /** Sticky system cells (drag handle, detail toggle, checkbox) sit above scrolled, spanned and focused cells. */
 const SYSTEM_CELL_Z_INDEX = 12;
@@ -96,9 +98,14 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     columnIndexMap?: Map<string, number>;
     /** 1-based `aria-rowindex` of this row in the whole grid (header rows included). Defaults to `rowIndex + 2`. */
     ariaRowIndex?: number;
+    /**
+     * The part of the selected cell range (`cellSelection`) in this row, or `null` / absent when the
+     * row is outside it. @since v3.3
+     */
+    cellRange?: GridRowCellRange | null;
 }
 
-export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
+function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const {
         row,
         rowId: rowIdProp,
@@ -144,6 +151,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         rowMeta,
         columnIndexMap,
         ariaRowIndex,
+        cellRange,
     } = props;
 
     const id = rowIdProp ?? row.id;
@@ -437,6 +445,14 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                         || (pinnedPosition === 'right' && colDef.field === pinnedEdges.firstRight);
                     const rowSpan = rowSpanningCaches?.spannedCells[id]?.[colDef.field];
                     const isHiddenByRowSpan = rowSpanningCaches?.hiddenCells[id]?.[colDef.field] || false;
+                    const rangeFlags = cellRange && !isHiddenByRowSpan && colDef.field !== GROUPING_COLUMN_FIELD
+                        ? getCellRangeFlags(
+                            cellRange,
+                            colIndex,
+                            colSpanInfo && !colSpanInfo.spannedByColSpan ? colSpanInfo.cellProps.colSpan : 1,
+                            rowSpan ?? 1,
+                        )
+                        : undefined;
 
                     return (
                         <Cell
@@ -468,6 +484,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             isHiddenByRowSpan={isHiddenByRowSpan}
                             rowMeta={rowMeta}
                             valueError={valueError}
+                            rangeFlags={rangeFlags}
                         />
                     );
                 })}
@@ -490,3 +507,23 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         </>
     );
 }
+
+/**
+ * Shallow prop comparison, except `cellRange`, which is compared by value: a row inside a cell range
+ * gets a new range object on every render, but only re-renders when its part of the range changes.
+ */
+function areRowPropsEqual<R extends GridRowModel>(prev: RowProps<R>, next: RowProps<R>): boolean {
+    const prevKeys = Object.keys(prev) as (keyof RowProps<R>)[];
+    if (prevKeys.length !== Object.keys(next).length) return false;
+    for (const key of prevKeys) {
+        if (key === 'cellRange') {
+            if (!isSameRowCellRange(prev.cellRange, next.cellRange)) return false;
+        } else if (!Object.is(prev[key], next[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+/** One grid row. Memoised: rows whose props did not change (for example outside a dragged cell range) do not re-render. */
+export const Row = React.memo(RowImpl, areRowPropsEqual) as typeof RowImpl;

package/lib/components/Toolbar/GridToolbar.tsx

@@ -474,9 +474,11 @@ function FilterPanelWrapper({
 }
 
 const EMPTY_PIVOT: GridPivotModel = { rowFields: [], columnFields: [], valueFields: [] };
+// Module-level default, so `columns` is the same frozen value on every render (React Compiler).
+const NO_COLUMNS: GridColDef[] = [];
 
 export function GridToolbar({
-    columns = [],
+    columns = NO_COLUMNS,
     baseColumns,
     aggregationModel = {},
     onAggregationModelChange,
@@ -504,7 +506,7 @@ export function GridToolbar({
     // At most one panel is open. Every way the Columns panel closes (its button, a custom
     // button, another panel opening, click-outside, Escape) reports onColumnsPanelClose, so the
     // grid can ask for it again with forceColumnsOpen.
-    const [openPanel, setOpenPanel] = useState<ToolbarPanel | null>(null);
+    const [openPanel, setOpenPanel] = useState<ToolbarPanel | null>(forceColumnsOpen ? 'columns' : null);
     const aggOpen = openPanel === 'summaries';
     const pivotOpen = openPanel === 'pivot';
     const colsOpen = openPanel === 'columns';
@@ -517,9 +519,13 @@ export function GridToolbar({
     const togglePanel = (panel: ToolbarPanel) => switchPanel(openPanel === panel ? null : panel);
     const closePanel = (panel: ToolbarPanel) => { if (openPanel === panel) switchPanel(null); };
 
-    useEffect(() => {
+    // forceColumnsOpen turning true opens the Columns panel. Adjusted during render (not in an
+    // effect) so the panel opens in the same commit.
+    const [seenForceColumnsOpen, setSeenForceColumnsOpen] = useState(forceColumnsOpen);
+    if (seenForceColumnsOpen !== forceColumnsOpen) {
+        setSeenForceColumnsOpen(forceColumnsOpen);
         if (forceColumnsOpen) setOpenPanel('columns');
-    }, [forceColumnsOpen]);
+    }
 
     // Tell the grid this toolbar shows the Columns panel for the column menu; it can only do so
     // when the grid's forceColumnsOpen reaches it and the Columns panel is enabled.

package/lib/components/ui/Checkbox.tsx

@@ -7,6 +7,15 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     inputRef?: React.Ref<HTMLInputElement>;
 }
 
+/** Points a callback or object ref at `element`. Outside the component, so it does not mutate a prop in render scope. */
+function assignRef(ref: React.Ref<HTMLInputElement> | undefined, element: HTMLInputElement | null): void {
+    if (typeof ref === 'function') {
+        ref(element);
+    } else if (ref) {
+        (ref as React.MutableRefObject<HTMLInputElement | null>).current = element;
+    }
+}
+
 export const Checkbox: React.FC<CheckboxProps> = ({
     indeterminate = false,
     label,
@@ -20,11 +29,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
     const setRef = React.useCallback((element: HTMLInputElement | null) => {
         internalRef.current = element;
 
-        if (typeof inputRef === 'function') {
-            inputRef(element);
-        } else if (inputRef) {
-            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = element;
-        }
+        assignRef(inputRef, element);
     }, [inputRef]);
 
     React.useEffect(() => {

package/lib/hooks/core/gridApiPlaceholder.ts

@@ -32,5 +32,11 @@ export function createGridApiPlaceholder<R extends GridValidRowModel = GridRowMo
         autosizeColumn: noop,
         autosizeColumns: noop,
         copySelectedRows: () => Promise.resolve(),
+        getCellSelectionModel: () => [],
+        setCellSelectionModel: noop,
+        selectCellRange: noop,
+        clearCellSelection: noop,
+        getSelectedCells: () => [],
+        copySelectedCells: () => Promise.resolve(),
     };
 }