@opencorestack/opengridx 3.2.2 → 3.4.0

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -1,5 +1,6 @@
 import { useState, useMemo, useRef, useId } from 'react';
 import { Checkbox } from '../ui/Checkbox';
+import { Input } from '../ui/Input';
 import type { GridColDef, GridRowModel, GridValidRowModel } from '../../types';
 
 
@@ -115,9 +116,9 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
             <div className="ogx-column-visibility-panel__search-section">
                 <div className="ogx-column-visibility-panel__search-container">
                     <SearchIcon />
-                    <input
+                    <Input
                         autoComplete="off"
-                        className="ogx-column-visibility-panel__search-input"
+                        inputClassName="ogx-column-visibility-panel__search-input"
                         placeholder="Search"
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}

package/lib/components/DataGrid/DataGrid.tsx

@@ -27,6 +27,9 @@ import { useDataGrid } from '../../hooks/core/useDataGrid';
 import { useRowReorder } from '../../hooks/useRowReorder';
 import { useGridHierarchy } from '../../hooks/core/useGridHierarchy';
 import { useGridEditing } from '../../hooks/features/useGridEditing';
+import { useGridBatchEdit } from '../../hooks/features/useGridBatchEdit';
+import { useGridClipboardPaste } from '../../hooks/core/useGridClipboardPaste';
+import { useGridUndoRedo, useGridEditCommitChannel, UNDO_HISTORY_LIMIT } from '../../hooks/core/useGridUndoRedo';
 import { useGridSpanning } from '../../hooks/features/useGridSpanning';
 import { useGridSpanRowWindow, useGridSpanColumnWindow } from '../../hooks/features/useGridSpanRenderWindow';
 import { useColumnGroupReorderGuard } from '../../hooks/features/useColumnGroupReorderGuard';
@@ -52,6 +55,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 +82,23 @@ 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,
+        disableClipboardPaste = false,
+        disableRangeClear = false,
+        onClipboardPaste,
+        onBeforeClipboardPaste,
+        undoRedo = false,
+        onHistoryChange,
         rowSelectionModel: propRowSelectionModel,
         onRowSelectionModelChange: propOnRowSelectionModelChange,
         onRowClick,
@@ -184,6 +201,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         rowSelectionModel: propRowSelectionModel,
         onRowSelectionModelChange: propOnRowSelectionModelChange,
         density,
+        cellSelectionModel: propCellSelectionModel,
+        onCellSelectionModelChange,
     });
 
     const {
@@ -261,7 +280,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         syncRows: !dataSource,
     });
     const {
-        state, apiRef, setRows, replaceRow, setColumns, setDimensions, setDataSourceLoading, setDataSourceError,
+        state, apiRef, setRows, replaceRows, setColumns, setDimensions, setDataSourceLoading, setDataSourceError,
         setRowCount
     } = gridData;
 
@@ -285,6 +304,18 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         getAggregationPosition, columnLookup, filterMode, sortingMode,
     });
 
+    // Commits (single edits and batch edits) reach the undo/redo history created further down.
+    const editCommitChannel = useGridEditCommitChannel();
+    // Batch edits (paste, range clear, undo, redo): one processRowUpdate per row, one store update.
+    const batchEdit = useGridBatchEdit<R>({
+        rowsLookup: state.rows.idRowsLookup as unknown as ReadonlyMap<GridRowId, R>,
+        columns: activeColumns,
+        processRowUpdate,
+        onProcessRowUpdateError,
+        replaceRows: replaceRows as unknown as (rows: ReadonlyMap<GridRowId, R>) => void,
+        onCommitted: editCommitChannel.emit,
+    });
+
     const editingHandlers = useGridEditing({
         rows: effectiveRows,
         getRowId: getRowIdOf,
@@ -296,8 +327,9 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
             // after an awaited processRowUpdate, by which time the rows prop (or a dataSource
             // fetch) may have replaced the rows this render saw. The returned row is stored as is
             // (the grid never writes an id onto it), even if it does not carry its key itself.
-            replaceRow(rowId, updatedRow);
+            batchEdit.storeRow(rowId, updatedRow);
         },
+        onCommitted: (changes) => editCommitChannel.emit(changes, 'edit'),
     });
 
     // The selection without ids of removed rows. Only client-owned rows are pruned: a server page
@@ -493,12 +525,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 +595,61 @@ 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,
+    });
+
+    // Ctrl/Cmd+V and Delete on a range (cellSelection); apiRef.pasteText.
+    useGridClipboardPaste<R>({
+        apiRef, containerRef, viewportRef,
+        selection: cellSelection,
+        disableClipboardPaste, disableRangeClear,
+        focusedCell,
+        allRenderableRows,
+        getRowId: getRowIdOf,
+        navigationColumns: navigationColumns as unknown as GridColDef<R>[],
+        isCellEditable,
+        rowMetaMap,
+        getSpanOrigin: spanning.getSpanOrigin,
+        isEditing: editingHandlers.editingCell !== null,
+        batchEdit,
+        onClipboardPaste,
+        onBeforeClipboardPaste,
+    });
+
+    // Undo / redo (undoRedo): history of committed edits, keys and apiRef methods.
+    useGridUndoRedo<R>({
+        apiRef,
+        enabled: Boolean(undoRedo),
+        limit: (typeof undoRedo === 'object' && undoRedo.limit) || UNDO_HISTORY_LIMIT,
+        onHistoryChange,
+        channel: editCommitChannel,
+        batchEdit,
+        isEditing: editingHandlers.editingCell !== null,
+        containerRef, viewportRef,
+        selection: cellSelection,
+        setFocusedCell,
+        allRenderableRows,
+        getRowId: getRowIdOf,
+        navigationColumns: navigationColumns as unknown as GridColDef<R>[],
+        layout,
+        rowHeight: effectiveRowHeight,
+        pinnedTopRowCount: pinnedTopRows.length,
+    });
+
     const { handleHideColumn, handlePinColumn } = useGridColumnMenuHandlers({
         columnVisibilityModel,
         onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
@@ -658,6 +762,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 +852,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 +910,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 +991,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 +1034,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.css

@@ -115,11 +115,25 @@
   border-radius: var(--ogx-border-radius-sm);
   font-family: var(--ogx-font-family);
   font-size: var(--ogx-font-size-xs);
+  line-height: revert;
   background: var(--ogx-grid-background);
   color: var(--ogx-grid-row-text);
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
+/* The text/date value box renders through the shared Input: the <input> keeps its own border,
+   so the wrapper draws nothing and only takes the input's place in the row. */
+.ogx-filter__controls .ogx-input-wrapper {
+  flex: 1;
+  min-width: 60px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  transition: none;
+}
+.ogx-filter__controls .ogx-input-wrapper:focus-within {
+  box-shadow: none;
+}
 .ogx-filter__value-input::placeholder {
   color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
   opacity: 0.6;

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -8,6 +8,7 @@ import type {
 } from '../../types';
 import { getOperatorsForType, NO_VALUE_OPERATORS } from '../../utils/filtering';
 import { toLocalDateString } from '../../utils/values';
+import { Input } from '../ui/Input';
 
 
 export interface FilterPanelProps {
@@ -107,7 +108,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
@@ -250,10 +252,10 @@ const FilterRow: React.FC<{
         );
     } else if (showValue) {
         valueControl = (
-            <input
+            <Input
                 id={`${filterId}-val`}
                 name={`filter-val-${col.field}`}
-                className={valueClassName}
+                inputClassName={valueClassName}
                 type={col.type === 'date' ? 'date' : 'text'}
                 value={draft ?? toInputText(item?.value, col)}
                 onChange={(e) => setDraft(e.target.value)}

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

@@ -65,11 +65,9 @@
   border-right: var(--ogx-border-width-thin) solid var(--ogx-grid-border-color);
 }
 
-.ogx-list-view__checkbox input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
+/* The row checkbox is the shared Checkbox (its <input> is visually hidden). */
+.ogx-list-view__checkbox .ogx-checkbox-wrapper {
   cursor: pointer;
-  accent-color: var(--ogx-color-primary);
 }
 
 /* ─── Cell content area ───────────────────────────────────────────────────── */

package/lib/components/ListView/ListViewRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { formatValueByType, getCellValue, getFormattedValue } from '../../utils/values';
 import { ExpandIcon } from '../ui/ExpandIcon';
+import { Checkbox } from '../ui/Checkbox';
 import { CellErrorBoundary } from '../Cell/CellErrorBoundary';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
 import type { GridColDef, GridRowModel, GridRowId, GridRowMeta, GridListViewColDef, GridRenderCellParams } from '../../types';
@@ -92,8 +93,7 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
         >
             {checkboxSelection && (
                 <div className="ogx-list-view__checkbox" onClick={(e) => e.stopPropagation()}>
-                    {!isSyntheticRow && <input
-                        type="checkbox"
+                    {!isSyntheticRow && <Checkbox
                         checked={isSelected}
                         onChange={handleCheckboxChange}
                         aria-label={`Select row ${id}`}

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;