@opencorestack/opengridx 3.2.2 → 3.3.0

package/docs/API_REFERENCE.md

@@ -17,6 +17,7 @@ The main component for displaying and interacting with data.
 | `getRowId` | `(row: R) => GridRowId` | `row.id` | Returns a unique identifier for each row. It only keys the grid's internal store: rows reach `renderCell`, events, `apiRef` and `processRowUpdate` unchanged, and the id is never written to `row.id` (v3.0+). Pass it to export functions as `getRowId` when you export `selectedRows`. It must not throw: an id is a programming contract, so a throw is not contained (for a `dataSource` row it fails that request with the error overlay). |
 | `rowHeight` | `number` | `52` | Height of each row in pixels. Without it, an enclosing `DataGridThemeProvider`'s `grid.rowHeightStandard` applies (v3.0+). |
 | `headerHeight` | `number` | `56` | Height of the header row. Without it, the theme's `grid.headerHeight` applies (v3.0+). |
+| `wrapHeaderText` | `boolean` | `false` | Wraps header titles onto several lines instead of cutting them with an ellipsis (v3.3.0+). The header keeps `headerHeight`: a title takes as many lines as fit (2 at 56px, 3 at 72px, 4 at 88px) and ends in an ellipsis if it is still longer; raise `headerHeight` to show more lines. Wrapped headers get `ogx__header-cell--wrap` and their full title as the `title` tooltip (unless `description` is set). `GridColDef.wrapHeaderText` overrides it per column. See [Header](components/header.md). |
 | `autoHeight` | `boolean` | `false` | Adjust grid height to match row total. |
 | `overscanRowCount` | `number` | `3` | Minimum rows rendered outside the visible viewport. The grid adapts this upward automatically based on scroll velocity — this prop sets the floor. |
 | `loading` | `boolean` | `false` | With no rows, the body shows skeleton rows (or `slots.loadingOverlay`). With rows already shown, they stay and a progress bar runs along the top of the grid (or `slots.loadingOverlay` is shown over them). Works in list view too. |
@@ -30,7 +31,7 @@ The main component for displaying and interacting with data.
 | `height` | `number \| string` | `undefined` | Total height of the grid. Without it the grid fills its container (`height: 100%`, or `flex: 1 1 auto; min-height: 0` as a flex item; v3.0.1+), and grows to fit every row in an auto-height container. |
 | `density` | `'compact' \| 'standard' \| 'comfortable'` | `'standard'` | Visual row density: compact = the theme's `grid.rowHeightCompact` or 32 px, standard = `rowHeight`, comfortable = the theme's `grid.rowHeightComfortable` or 72 px. |
 | `initialState` | `GridInitialState` | `undefined` | Starting state (sort, filter, pagination, columns, density), read on mount. Seeds the grid's uncontrolled state; see [State Persistence](features/state-persistence.md). |
-| `slots` | `GridSlots` | — | Custom component overrides: `toolbar`, `pagination`, `noRowsOverlay`, `loadingOverlay`, `footer`. See [`GridSlots`](#gridslots-and-gridslotprops) and the [Slots API](customization/slots-api.md). |
+| `slots` | `GridSlots` | — | Custom component overrides: `toolbar`, `pagination`, `noRowsOverlay`, `loadingOverlay`, `footer`, `cellSelectionStats`. See [`GridSlots`](#gridslots-and-gridslotprops) and the [Slots API](customization/slots-api.md). |
 | `slotProps` | `GridSlotProps` | — | Props passed to the slots, keyed like `slots`. `slotProps.toolbar` is typed as `Partial<GridToolbarProps>` (plus any extra keys your own toolbar reads), so `GridToolbar` render props are type-checked (v3.0+). |
 | `filterModel` | `GridFilterModel` | `undefined` | Active filters (controlled). Omit it to let the grid keep its own filter state, seeded from `initialState.filter` and changed by the toolbar or `apiRef.setFilterModel` (v3.0+). |
 | `sortModel` | `GridSortItem[]` | `undefined` | Active sorting. |
@@ -61,6 +62,26 @@ The main component for displaying and interacting with data.
 | `disableMultipleRowSelection` | `boolean` | `false` | When `true`, at most one row can be selected at a time — by click, checkbox, Space or `apiRef` — and the header select-all checkbox is not shown. |
 | `disableClipboardCopy` | `boolean` | `false` | When `true`, Ctrl+C / Cmd+C does not copy the selected rows, so the page or your own handler owns the shortcut. `apiRef.current.copySelectedRows()` still works. See [Clipboard](features/clipboard.md). |
 
+#### Cell Range Selection (v3.3)
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `cellSelection` | `boolean` | `false` | Spreadsheet-style cell ranges: drag (with auto-scroll), Shift+click, Shift+arrow / Home / End / PageUp / PageDown, Ctrl/Cmd+A (every data cell of the page) and Escape (collapse). While on, Ctrl/Cmd+C copies the range (the focused cell at minimum) as TSV without a header line; `apiRef.current.copySelectedRows()` still copies rows. Row selection is not changed by ranges. See [Cell Range Selection](features/cell-selection.md). |
+| `cellSelectionModel` | `GridCellSelectionModel` | — | Controlled cell selection (zero or one range). Ignored while `cellSelection` is off. |
+| `onCellSelectionModelChange` | `(model: GridCellSelectionModel, details: { reason: GridCellSelectionReason }) => void` | — | Fired when the cell selection changes. `reason`: `'pointer'`, `'keyboard'`, `'selectAll'`, `'api'`, `'clear'` or `'dataChange'` (a corner's row or column is no longer displayed, so the range was cleared). |
+| `showCellSelectionStats` | `boolean` | `false` | Status bar under the grid (above the pagination area) with Count of non-empty cells and Sum / Average of the numeric cells, while more than one cell is selected. Replaceable through `slots.cellSelectionStats`. Needs `cellSelection`. |
+
+```ts
+interface GridCellCoordinates { id: GridRowId; field: string }
+interface GridCellRange { anchor: GridCellCoordinates; head: GridCellCoordinates }  // anchor = active cell
+type GridCellSelectionModel = readonly GridCellRange[];
+type GridCellSelectionReason = 'pointer' | 'keyboard' | 'selectAll' | 'api' | 'clear' | 'dataChange';
+interface GridCellSelectionChangeDetails { reason: GridCellSelectionReason }
+interface GridSelectedCell { id: GridRowId; field: string; value: unknown }
+```
+
+Public CSS: `ogx__cell--range`, `ogx__cell--range-top` / `-bottom` / `-left` / `-right`, `ogx--range-dragging` (root, during a drag), `--ogx-range-background`, `--ogx-range-border`. Range cells carry `aria-selected="true"`.
+
 #### Column Visibility
 
 | Prop | Type | Default | Description |
@@ -210,6 +231,7 @@ The types of the `slots` and `slotProps` props (v3.0+ exports). Each slot is typ
 | `pagination` | The built-in `Pagination` bar (shown with `pagination`). | `GridPaginationSlotProps` (= `PaginationProps`: `page`, `pageSize`, `rowCount`, `pageSizeOptions`, `onPageChange`, `onPageSizeChange`, `localeText`), then `slotProps.pagination`. |
 | `noRowsOverlay` | The empty-state icon and label (shown when there are no rows and the grid is not loading). | `slotProps.noRowsOverlay` only (`GridOverlaySlotProps`). |
 | `loadingOverlay` | The loading indicator: the skeleton rows while loading with no rows, the progress bar while loading with rows shown (the slot is then shown over them). | `slotProps.loadingOverlay` only (`GridOverlaySlotProps`). |
+| `cellSelectionStats` | The status bar of `showCellSelectionStats` (v3.3). Rendered while more than one cell is selected. | `GridCellSelectionStatsSlotProps`: `apiRef`, `cellCount`, `rowCount`, `columnCount`, `count`, `numericCount`, `sum`, `average` (`null` without numeric cells), then `slotProps.cellSelectionStats`. |
 | `footer` | The pagination area. | `GridFooterSlotProps`: `apiRef`, `aggregationModel`, `aggregationResult`, `rowCount`, `pagination`, `paginationModel`, `pageSizeOptions`, `onPaginationModelChange`, then `slotProps.footer`. `rowCount` is the built-in pager's count (pinned rows excluded, v3.0+); under tree data or row grouping, the filtered data rows. |
 
 ```ts
@@ -301,6 +323,12 @@ Access these methods via the `apiRef` prop.
 | `getAggregationModel()` | `GridAggregationModel \| null` | Get the active aggregation configuration. |
 | `getAllFilteredRows()` | `R[]` | Get every row that passes the filter, sorted, regardless of pagination, including pinned rows. Under row grouping and tree data it returns the data rows (no group rows) in hierarchy order with every group expanded, ordered like the screen (also when sorting by the hierarchy column; v3.0+). With tree data and a filter, ancestors shown only to give a match its context are left out: the result is the set select-all and the aggregation footer act on (v3.0+). Use for full-dataset exports. |
 | `getGroupedExportRows()` | `GridGroupedExportRow[] \| null` | Get a flat ordered list reflecting the active row-grouping tree (group-header, leaf, subtotal, grand-total), sorted and filtered like the screen. Collapsed groups are included with their rows, and subtotals are computed over each group's exported rows. Group-header and subtotal entries carry `groupLabel`, the label the grid shows (v3.0+). Returns `null` when row grouping is not active. |
+| `getCellSelectionModel()` | `GridCellSelectionModel` | The cell selection (`[]` while `cellSelection` is off). Includes a change made earlier in the same tick (v3.3). |
+| `setCellSelectionModel(model)` | `void` | Replace the cell selection (only the first range is kept); focus moves to its anchor. `reason: 'api'` (v3.3). |
+| `selectCellRange(anchor, head)` | `void` | Select the rectangle between two `GridCellCoordinates`; `anchor` becomes the active cell (v3.3). |
+| `clearCellSelection()` | `void` | Empty the cell selection (`reason: 'clear'`) (v3.3). |
+| `getSelectedCells()` | `GridSelectedCell[]` | Cells of the range in display order with values read through `valueGetter`. Synthetic rows and span-covered positions are left out (v3.3). |
+| `copySelectedCells()` | `Promise<void>` | Copy the range (the focused cell when nothing else is selected) as TSV without a header line. Resolves without writing when there is nothing to copy; rejects when the clipboard write fails (v3.3). |
 | `copySelectedRows()` | `Promise<void>` | Copy every selected row that passes the filter (other pages, collapsed groups and pinned rows included) as TSV, with the visible columns in screen order. Resolves without writing when no selected row is found; rejects when the clipboard write fails. |
 
 ---
@@ -346,6 +374,7 @@ Defines the behavior and appearance of a single column.
 | `flex` | `number` | — | Flex grow factor — distributes remaining space proportionally. When both are set, `flex` wins over `width` until the user resizes the column. |
 | `align` | `'left' \| 'center' \| 'right'` | `'left'` | Horizontal alignment of cell content. |
 | `headerAlign` | `'left' \| 'center' \| 'right'` | `align` | Horizontal alignment of the header cell content. Falls back to the column's `align`, then `'left'`. |
+| `wrapHeaderText` | `boolean` | grid's `wrapHeaderText` | Wraps this column's header title (v3.3.0+). Overrides the grid prop either way: `false` keeps one line with an ellipsis in a wrapping grid. |
 | `zIndex` | `number` | — | CSS `z-index` for the column's cells and header cell (pinned cells default to 3). |
 
 #### Data & Type
@@ -438,6 +467,7 @@ The grid's building blocks are exported with their props types (the props types
 | `Header` | `HeaderProps` | The column header rows. See [Header](components/header.md). |
 | `Row` | `RowProps` | One body row. See [Row](components/row.md). |
 | `Cell` | `CellProps` | One body cell. See [Cell](components/cell.md). |
+| `CellSelectionStats` | `CellSelectionStatsProps` | The default status bar of `showCellSelectionStats` (v3.3), e.g. to wrap in a `cellSelectionStats` slot. |
 | `Skeleton` | `SkeletonProps` | Loading placeholder (`rows`, `columns`, both default 5). |
 | `Button`, `Input`, `Checkbox` | `ButtonProps`, `InputProps`, `CheckboxProps` | The grid's form controls. `Button` defaults to `type="button"`. |
 
@@ -453,7 +483,7 @@ Context provider for overriding the grid's visual system.
 - **`colors`**: `primary`, `primaryDark`, `primaryLight`, `primaryFocus`, `secondary*`, `success`, `warning`, `error`, `info`, `white`, `black`, `gray` (`{ 50 … 900 }`). Toolbar, menu, selection and focus accents derive from `primary*` unless set directly.
 - **`typography`**: `fontFamily`, `fontFamilyMono`, `fontSizeXs` … `fontSizeXl`.
 - **`spacing`**: `xs` … `xxl`. **`borders`**: `widthThin/Medium/Thick`, `radiusSm` … `radiusXl`, `color`, `colorHover`. **`shadows`**: `sm` … `xl`.
-- **`grid`**: surfaces (`background`, `borderColor`, `headerBackground`, `headerText`, `headerHoverBackground`, `headerSortedBackground`, `rowText`, `rowHoverBackground`, `rowAlternateBackground`, `rowSelectedBackground`, `rowSelectedHoverBackground`, `cellFocusBorder`, `pinnedLeftShadow`, `pinnedRightShadow`, `checkboxBg`, `checkboxBorder`), sizing (`rowHeightCompact`, `rowHeightStandard`, `rowHeightComfortable`, `headerHeight` in px, read by the grid's layout; the `rowHeight` / `headerHeight` props win), `cellPaddingX`, `cellPaddingY`, `cellFontSize`, `headerFontSize`.
+- **`grid`**: surfaces (`background`, `borderColor`, `headerBackground`, `headerText`, `headerHoverBackground`, `headerSortedBackground`, `rowText`, `rowHoverBackground`, `rowAlternateBackground`, `rowSelectedBackground`, `rowSelectedHoverBackground`, `cellFocusBorder`, `rangeBackground`, `rangeBorder` (v3.3), `pinnedLeftShadow`, `pinnedRightShadow`, `checkboxBg`, `checkboxBorder`), sizing (`rowHeightCompact`, `rowHeightStandard`, `rowHeightComfortable`, `headerHeight` in px, read by the grid's layout; the `rowHeight` / `headerHeight` props win), `cellPaddingX`, `cellPaddingY`, `cellFontSize`, `headerFontSize`.
 - **`toolbar`**, **`overlays`**, **`scrollbar`** (`thumbColor`, `trackColor`, `size`), **`skeleton`** (`baseColor`, `highlightColor`), **`transitions`**.
 
 Presets: `darkTheme`, `roseTheme`, `emeraldTheme`, `amberTheme`, `compactTheme`. See [Theming](customization/theming.md).
@@ -690,6 +720,8 @@ interface GridLocaleText {
   paginationOf?: (from: number, to: number, count: number) => string;
   paginationPage?: (page: number, pageCount: number) => string;
   noRowsLabel?: string;
+  /** v3.3: live-region text after a cell range change. Default "12 cells selected, 3 rows by 4 columns". */
+  cellSelectionAnnouncement?: (cellCount: number, rowCount: number, columnCount: number) => string;
 }
 ```
 

package/docs/README.md

@@ -37,6 +37,7 @@ In-depth guides on the grid's functional capabilities.
 - **[Loading & Performance](features/loading-states.md)** - Skeletons, Lazy, and Infinite loading
 - **[Row Selection](features/selection.md)** - Multi & single choice selection
 - **[Clipboard](features/clipboard.md)** - Copy and Paste grid data
+- **[Cell Range Selection](features/cell-selection.md)** - Spreadsheet-style cell ranges, copy and a sum / average status bar
 - **[Pinning](features/pinning.md)** - Sticky columns and rows
 - **[State Persistence](features/state-persistence.md)** - Save/Restore grid configuration
 - **[Aggregation & Pivot](features/aggregation-pivot.md)** - Data summarization and analytics

package/docs/architecture/datagrid-orchestration.md

@@ -17,6 +17,9 @@ in an effect, so **keep the call order when you move or add a hook**. In particu
   `useGridAggregationApi` and `useGridScrollToIndexesApi` install once per `apiRef` in a layout
   effect and read the latest values from a ref refreshed in a layout effect, so the methods are
   live in a parent's layout effect and never answer from a previous render.
+- `useGridCellSelection` runs after `useGridSpanning` (it needs `getSpanOrigin` and the span caches) and
+  before `useGridKeyboardNavigation`, which receives its Shift-key handlers. `useGridCellSelectionApi` runs
+  after the keyboard hook because it reads and sets `focusedCell`.
 - `useGridLiveRowSelection` prunes the selection, and `useGridPageCorrection` corrects a page past the
   end, in effects that run before the later hooks' effects.
 
@@ -25,7 +28,7 @@ in an effect, so **keep the call order when you move or add a hook**. In particu
 | # | Hook / util | File | Produces |
 | :- | :--- | :--- | :--- |
 | 0 | `useStableColumns` | `hooks/core/useStableColumns.ts` | The `columns` prop with a stable identity while every column is shallowly equal (inline columns do not re-run the row passes) |
-| 1 | `useGridControlledState` | `hooks/core/useGridControlledState.ts` | Controlled/uncontrolled sort, filter, aggregation, visibility, pinning, pivot, pagination, selection, density |
+| 1 | `useGridControlledState` | `hooks/core/useGridControlledState.ts` | Controlled/uncontrolled sort, filter, aggregation, visibility, pinning, pivot, pagination, selection, density, cell selection (v3.3) |
 | 2 | `useGridPivot` | `hooks/features/useGridPivot.ts` | Pivot rows/columns (or the source ones) and the pipeline filter/sort models |
 | 3 | `resolveGridModes` (pure) | `utils/gridModes.ts` | Which features are in effect: tree data, row grouping, pagination, row reordering, list view, grouping column |
 | 4 | `useGridThemeDimensions` | `hooks/core/useGridThemeDimensions.ts` | Row and header heights (props → theme provider → defaults) |
@@ -54,14 +57,16 @@ in an effect, so **keep the call order when you move or add a hook**. In particu
 | 27 | `useGridAggregationApi` | `hooks/core/useGridAggregationApi.ts` | `getAggregationResult`, `getAggregationModel`, `getGroupedExportRows` |
 | 28 | `useLayout` | `hooks/core/useLayout.ts` | Row heights, pinned column split, widths |
 | 29 | `useGridSpanning` | `hooks/features/useGridSpanning.ts` | Row/column spans |
-| 30 | `useGridClipboardApi` | `hooks/core/useGridClipboardApi.ts` | Ctrl/Cmd+C and `copySelectedRows` |
+| 29a | `useGridCellSelection` | `hooks/core/useGridCellSelection.ts` | Cell range (v3.3): the model's range resolved against `allRenderableRows` and the data columns of `navigationColumns` (grown over spans), the render rectangle, pointer drag with auto-scroll and Shift+click, the Shift-key handlers for the keyboard hook, copy text, status-bar totals and the debounced live-region text. Inert while `cellSelection` is off |
+| 30 | `useGridClipboardApi` | `hooks/core/useGridClipboardApi.ts` | Ctrl/Cmd+C and `copySelectedRows`; with `cellSelection` the shortcut copies the range (`getCellRangeCopyText`) |
 | 31 | `useGridScrollToIndexesApi` | `hooks/core/useGridScrollToIndexesApi.ts` | `scrollToIndexes` |
 | 31a | `useGridColumnAutosize` | `hooks/core/useGridColumnAutosize.ts` | `autosizeColumn` / `autosizeColumns` on the API, and the resize handle's auto-size handler (v3.1) |
 | 32 | `useGridViewport` | `hooks/core/useGridViewport.ts` | Scroll sync, viewport measurement, viewport callback ref |
 | 33 | `useGridVirtualization` | `hooks/core/useGridVirtualization.ts` | Render window |
 | 34 | `useGridSortHandlers` | `hooks/core/useGridHeaderHandlers.ts` | Header sort / shift-sort |
-| 35 | `useGridKeyboardNavigation` | `hooks/core/useGridKeyboardNavigation.ts` | Focus and keyboard handling |
+| 35 | `useGridKeyboardNavigation` | `hooks/core/useGridKeyboardNavigation.ts` | Focus and keyboard handling; takes `cellSelection.keyboard` (Shift+navigation, Escape, Ctrl/Cmd+A) |
 | 36 | `useGridPointerFocusHandlers` | `hooks/core/useGridFocusHandlers.ts` | Cell and header click focus |
+| 36a | `useGridCellSelectionApi` | `hooks/core/useGridCellSelectionApi.ts` | Keeps the range anchor and the focused cell together (layout effect: a new anchor moves focus; focus moved to another data cell collapses the range), clears a range whose corner is gone (`'dataChange'`), and installs `getCellSelectionModel`, `setCellSelectionModel`, `selectCellRange`, `clearCellSelection`, `getSelectedCells`, `copySelectedCells` (once per `apiRef`, reading the latest values from a ref) |
 | 37 | `useGridColumnMenuHandlers` | `hooks/core/useGridHeaderHandlers.ts` | Column menu Hide / Pin (`pinColumnTo` in `utils/pinning`) |
 | 38 | `useGridAriaRows` | `hooks/core/useGridAriaRows.ts` | `aria-rowcount` and `aria-rowindex` bases |
 | 39 | `useGridSpanRowWindow` | `hooks/features/useGridSpanRenderWindow.ts` | Render window widened to whole row spans |
@@ -77,6 +82,9 @@ in an effect, so **keep the call order when you move or add a hook**. In particu
 
 `GridToolbarSlot`, `GridStandaloneColumnPanel`, `GridListView` (list view) or the viewport
 (`Header`, `GridPinnedRows` top, `GridEmptyState`, `GridVirtualRows`, `GridPinnedRows` bottom,
-`GridAggregationFooter`), then `slots.footer` or `GridPaginationArea`, `GridLiveRegion`,
+`GridAggregationFooter`), `GridCellSelectionStatsArea` (`showCellSelectionStats` with `cellSelection`), then `slots.footer` or `GridPaginationArea`, `GridLiveRegion`,
 `GridLoadingOverlay` and `GridErrorOverlay`. The props all three row renderers take alike are built
-once in `DataGrid.tsx` (`rowRenderProps`) and spread into each.
+once in `DataGrid.tsx` (`rowRenderProps`) and spread into each. `rowRenderProps.cellRange` is the cell range's
+render rectangle; each row renderer turns it into a per-row `cellRange` (`getRowCellRange`), `null` for rows
+outside it, and `Row` is memoised with a value comparison of that prop, so a drag only re-renders the rows the
+range enters or leaves.

package/docs/components/header.md

@@ -24,6 +24,31 @@ Manages the column headers, sorting triggers, column resizing, and column groupi
 | `focusedCell` | `{ id: GridRowId \| null; field: string } \| null` | The grid's focus position. `id: null` means the header cell of `field` is focused (v3.0; it used to be the string `'HEADER'`, which a real row id could collide with). DOM focus is moved by the grid, not by `<Header />`. |
 | `columnIndexMap` | `Map<string, number>` | Position of each visible data column in render order. Used for `aria-colindex` and the `colIndex` passed to `renderHeader`, so they match the body cells and do not change with horizontal scrolling. |
 
+## ↩️ Wrapped Header Text
+
+By default a header title stays on one line and is cut with an ellipsis. Pass `wrapHeaderText` to `<DataGrid>` (or set `GridColDef.wrapHeaderText` on a column) and long titles wrap instead (v3.3.0+):
+
+```tsx
+const columns: GridColDef[] = [
+  // Keeps one line with an ellipsis even though the grid wraps
+  { field: 'fund', headerName: 'Fund name and share class', wrapHeaderText: false },
+  { field: 'nav', headerName: 'Net asset value per share (USD)', width: 120 },
+];
+
+<DataGrid rows={rows} columns={columns} wrapHeaderText headerHeight={72} />
+```
+
+- **The header keeps `headerHeight`.** It does not grow to fit the title (sticky offsets and virtualization rely on a fixed header height). A wrapped title takes as many lines as fit — 2 at the default 56px, 3 at 72px, 4 at 88px (16px lines inside 8px vertical padding) — and ends in an ellipsis on the last line if it is still longer. Raise `headerHeight` to show more lines. When the column shows an aggregation label under its title, the title gets one line less.
+- **Precedence:** a column's `wrapHeaderText` wins over the grid prop, in both directions.
+- **Tooltip:** a wrapped header shows its full title as the `title` tooltip, unless the column has a `description`, which is shown instead. Only string titles are used; a `renderHeader` result gets no automatic tooltip.
+- **Layout:** the sort icon, the menu button and the resize handle stay where they are and stay clickable; only the title wraps.
+- **Auto-size:** double-clicking the resize handle (or `apiRef.current.autosizeColumn`) still measures the title on one line, so the column grows until the title no longer wraps.
+- **Class:** wrapped header cells get `ogx__header-cell--wrap`; the line count is set inline as `-webkit-line-clamp` on `.ogx__header-cell-title`.
+- **Themes:** the line count assumes the default header font (13px) and cell padding (8px). With a theme that changes `headerFontSize` or `cellPaddingY`, the title is still capped to the header height, but the last visible line may be cut without an ellipsis.
+- Column group header rows are not affected.
+
+`Header` takes the same `wrapHeaderText` prop and a `headerHeight` (default 56) when used on its own.
+
 ## 📐 Column Grouping
 
 The `<Header />` dynamically calculates the nesting depth of your `columnGroupingModel` and renders one group row per level above the main column headers. Group cells are sized from `allColumns`, so they match their member columns' resolved widths; cells over pinned columns are sticky. See [Column Group Headers](../API_REFERENCE.md#️-column-group-headers) for the full behaviour.

package/docs/customization/theming.md

@@ -83,7 +83,7 @@ interface GridTheme {
   spacing?:     GridThemeSpacing;
   borders?:     GridThemeBorders;
   shadows?:     GridThemeShadows;
-  grid?:        GridThemeGrid;        // surfaces, heights (px), cellPaddingX/Y, cellFontSize, headerFontSize, …
+  grid?:        GridThemeGrid;        // surfaces, heights (px), cellPaddingX/Y, cellFontSize, headerFontSize, rangeBackground, rangeBorder, …
   toolbar?:     GridThemeToolbar;
   overlays?:    GridThemeOverlays;
   scrollbar?:   GridThemeScrollbar;
@@ -213,6 +213,8 @@ All sub-theme types (`GridThemeColors`, `GridThemeGrayScale`, `GridThemeTypograp
 | `--ogx-grid-row-selected-background` | `#eff6ff` | `#1e3a5f` | Selected row fill |
 | `--ogx-grid-row-selected-hover-background` | `#dbeafe` | `#1d4ed8` | Selected row hover |
 | `--ogx-grid-cell-focus-border` | `#3b82f6` | `#60a5fa` | Keyboard focus ring |
+| `--ogx-range-background` | `rgba(59, 130, 246, 0.12)` | `rgba(96, 165, 250, 0.18)` | Tint over a selected cell range (`cellSelection`, v3.3). Theme key `grid.rangeBackground` |
+| `--ogx-range-border` | `var(--ogx-color-primary)` | `#60a5fa` | Outline of a selected cell range, drawn as an inset box-shadow on `ogx__cell--range-top/-bottom/-left/-right` (v3.3). Theme key `grid.rangeBorder` |
 | `--ogx-grid-pinned-left-shadow` | `4px 0 24px...` | (darker) | Shadow on left-pinned columns |
 | `--ogx-grid-pinned-right-shadow` | `-4px 0 24px...` | (darker) | Shadow on right-pinned columns |
 | `--ogx-checkbox-bg` | — | `#1e293b` | Checkbox background (dark only) |

package/docs/features/cell-selection.md

@@ -0,0 +1,131 @@
+# Cell Range Selection
+
+*Since v3.3.0*
+
+Users select a rectangle of cells the way they do in Excel or Google Sheets, by dragging, Shift+clicking or pressing Shift+arrow keys, and copy it with Ctrl/Cmd+C. An optional status bar shows the count, sum and average of the selection.
+
+```tsx
+import { DataGrid } from '@opencorestack/opengridx';
+
+<DataGrid
+  rows={rows}
+  columns={columns}
+  cellSelection
+  showCellSelectionStats
+  height={500}
+/>
+```
+
+Everything is off unless `cellSelection` is set. Without it the grid behaves exactly as before.
+
+## Gestures
+
+| Input | Result |
+| :--- | :--- |
+| Click | Focus the cell. The range is that cell. A plain click still selects the row unless `disableRowSelectionOnClick` is set. |
+| Press and drag | Range from the pressed cell to the cell under the pointer. Holding the pointer near or past an edge of the body scrolls the grid, over virtualized rows and columns. |
+| Shift+click | Extend from the anchor (the active cell) to the clicked cell. |
+| Shift+Arrow | Move the far corner (head) by one cell. It does **not** wrap to the next row, though plain arrows still do. |
+| Shift+Home / Shift+End | Head to the first / last column of its row. |
+| Ctrl+Shift+Home / End (Cmd on macOS) | Head to the first / last cell of the page. |
+| Shift+PageUp / Shift+PageDown | Head one page up / down. |
+| Ctrl/Cmd+A | Select every data cell on the page. The header checkbox still selects all rows. |
+| Escape | Collapse the range to the anchor (when not editing). |
+| Ctrl/Cmd+C | Copy the range as TSV. |
+| Typing / Enter / F2 | Edit the anchor cell, as before. |
+
+Drag and Shift ranges never change the **row** selection, and the checkbox column keeps selecting rows.
+
+## The model
+
+```ts
+interface GridCellCoordinates { id: GridRowId; field: string }
+interface GridCellRange { anchor: GridCellCoordinates; head: GridCellCoordinates }
+type GridCellSelectionModel = readonly GridCellRange[];   // zero or one range in 3.3
+type GridCellSelectionReason = 'pointer' | 'keyboard' | 'selectAll' | 'api' | 'clear' | 'dataChange';
+```
+
+- `anchor` is the active cell. It keeps DOM focus and it is where an edit starts. `head` is the corner that moves, and the one that is scrolled into view. A single focused cell is a range whose `anchor` equals its `head`. It is not drawn as a range, but it is what Ctrl+C copies.
+- Corners are row **ids** and column **fields**, not indices. The rectangle is worked out from the current display order on every render, so after a sort or filter it follows the two corner rows (as Google Sheets does). If a corner's row or column is no longer displayed (filtered, on another page, removed or hidden), the range is cleared with `reason: 'dataChange'`.
+- Controlled or uncontrolled, like the other models:
+
+```tsx
+const [model, setModel] = useState<GridCellSelectionModel>([]);
+
+<DataGrid
+  cellSelection
+  cellSelectionModel={model}
+  onCellSelectionModelChange={(next, { reason }) => setModel(next)}
+/>
+```
+
+### Which cells take part
+
+- **Columns:** only data columns, in screen order: left-pinned, then centre, then right-pinned. The checkbox, detail-panel, reorder and grouping (`__group__`) columns never join a range, and clicking them works as before.
+- **Rows:** pinned top and bottom rows take part in screen order. Group headers, subtotals, tree auto-parents and the pivot Grand Total are highlighted when they fall inside the rectangle, but they are **skipped by copy** and by `getSelectedCells()`.
+- **Spans:** a range that touches part of a `colSpan` or `rowSpan` grows to cover the whole span, repeatedly until no span crosses its edge (as Excel does with merged cells). In a copy the span's value sits at its origin and the covered positions are empty.
+- **Pages:** a range covers the rows of the current page.
+
+## Copy
+
+With `cellSelection` on, Ctrl/Cmd+C copies the range (the focused cell when nothing else is selected):
+
+- values formatted the way the cells show them (`valueGetter`, then `valueFormatter`);
+- tabs between columns, line breaks between rows, **no header line**, and fields quoted where Excel needs it;
+- `exportable: false` columns are copied when they are in the range, because the user chose them on screen.
+
+Row copy stays available through `apiRef.current.copySelectedRows()`, which still includes the header line. `disableClipboardCopy` turns the shortcut off for both. Above 100,000 cells a development warning suggests `exportToCsv` instead. Nothing is truncated.
+
+## API
+
+| Method | Description |
+| :--- | :--- |
+| `getCellSelectionModel()` | The current model (`[]` when `cellSelection` is off). |
+| `setCellSelectionModel(model)` | Replace the model (only the first range is kept). Focus moves to its anchor. |
+| `selectCellRange(anchor, head)` | Select the rectangle between two cells. |
+| `clearCellSelection()` | Empty the selection (`reason: 'clear'`). |
+| `getSelectedCells()` | `{ id, field, value }[]` of the range in display order, values read through `valueGetter`. Synthetic rows and span-covered positions are left out. |
+| `copySelectedCells()` | Copy the range as TSV. Rejects when the clipboard write fails. |
+
+The methods do nothing while `cellSelection` is off.
+
+## Status bar
+
+`showCellSelectionStats` adds a strip under the grid (above the pagination area). While more than one cell is selected it shows:
+
+- **Count**: non-empty cells of data rows;
+- **Sum** and **Average**: of the numeric cells. Both are hidden when there are none.
+
+These use the shared aggregation functions. The strip keeps its height while one cell or none is selected, so the grid does not jump. Replace its content with `slots.cellSelectionStats`, which receives `GridCellSelectionStatsSlotProps` (`cellCount`, `rowCount`, `columnCount`, `count`, `numericCount`, `sum`, `average`, `apiRef`) plus `slotProps.cellSelectionStats`. The default component is exported as `CellSelectionStats`.
+
+```tsx
+function MyStats({ count, sum }: GridCellSelectionStatsSlotProps) {
+  return <span>{count} cells, total {sum ?? 0}</span>;
+}
+
+<DataGrid cellSelection showCellSelectionStats slots={{ cellSelectionStats: MyStats }} />
+```
+
+## Styling
+
+| Class / variable | Meaning |
+| :--- | :--- |
+| `ogx__cell--range` | Every cell in the range (tinted). |
+| `ogx__cell--range-top` / `-bottom` / `-left` / `-right` | Edge cells. The outline is an inset `box-shadow`, so nothing moves. |
+| `ogx--range-dragging` | On the grid root during a pointer drag (`user-select: none`). |
+| `--ogx-range-background` | Range tint. Theme key `grid.rangeBackground`. |
+| `--ogx-range-border` | Range outline. Theme key `grid.rangeBorder`. |
+
+All five built-in themes define both variables. A custom `DataGridThemeProvider` theme derives them from `colors.primary` unless it sets them.
+
+## Accessibility
+
+- Cells in the range have `aria-selected="true"`, and the grid is `aria-multiselectable`.
+- DOM focus stays on the anchor. The grid stays a single Tab stop.
+- After each change the polite live region announces the size, for example "12 cells selected, 3 rows by 4 columns", debounced to 300 ms. Translate it with `localeText.cellSelectionAnnouncement(cells, rows, columns)`.
+
+## Not in 3.3
+
+Paste, Delete-to-clear and undo (planned for 3.4), the fill handle, several ranges at once (Ctrl+drag), touch selection (on touch a drag scrolls) and ranges across pages.
+
+See also: [Clipboard](clipboard.md), [Keyboard Navigation](keyboard-navigation.md), [Theming](../customization/theming.md).

package/docs/features/clipboard.md

@@ -17,6 +17,8 @@ Selection and copying follow standard spreadsheet metaphors:
 | :--- | :--- |
 | `Ctrl + C` / `Cmd + C` | Copy currently selected rows to the clipboard. |
 
+> **Cell ranges (v3.3)**: with `cellSelection` on, Ctrl/Cmd+C copies the selected cell range instead (the focused cell at minimum), with no header line. `apiRef.current.copySelectedRows()` still copies rows. See [Cell Range Selection](cell-selection.md).
+
 > **Note**: The shortcut only copies while focus is inside the grid (a cell, a header, the toolbar), so with several grids on a page only the one in use copies, and Ctrl+C elsewhere on the page is never taken over (v3.0). It is also ignored while an input, textarea, or another editable element has focus, and while the page has a text selection, which the browser copies as usual. `apiRef.current.copySelectedRows()` is not affected by focus.
 >
 > The shortcut works with Caps Lock on and on non-Latin keyboard layouts (the key in the "C" position). Ctrl+Shift+C and Ctrl+Alt+C are not copy shortcuts and are left alone. Focus stays where it was after the copy.

package/docs/features/keyboard-navigation.md

@@ -25,8 +25,20 @@ The grid follows the [WAI-ARIA data grid pattern](https://www.w3.org/WAI/ARIA/ap
 | **Alt+ArrowRight** / **Alt+ArrowLeft** | Tree data / row grouping: expand / collapse the focused row. |
 | **Shift+Space** | Select or deselect the focused row (when rows can be selected: `checkboxSelection`, or click selection not disabled). Synthetic group rows are not selectable. |
 | **Space** | On the row checkbox: toggle the row. On the detail-panel toggle: expand or collapse the panel. Elsewhere it does nothing (it never scrolls the grid). |
-| **Ctrl+A** (Cmd+A) | Select every row, when several rows can be selected. |
-| **Ctrl+C** (Cmd+C) | Copy the selected rows (see [Clipboard](clipboard.md)). |
+| **Ctrl+A** (Cmd+A) | Select every row, when several rows can be selected. With `cellSelection`: select every data cell of the page instead. |
+| **Ctrl+C** (Cmd+C) | Copy the selected rows (see [Clipboard](clipboard.md)). With `cellSelection`: copy the cell range, or the focused cell. |
+
+With [`cellSelection`](cell-selection.md) on (v3.3), on a data cell:
+
+| Key | Action |
+| :--- | :--- |
+| **Shift+Arrow keys** | Extend the cell range by one cell. Unlike plain arrows they do not wrap to the next row. Focus stays on the anchor. |
+| **Shift+Home** / **Shift+End** | Extend to the first / last column of the row. |
+| **Ctrl+Shift+Home** / **Ctrl+Shift+End** (Cmd on macOS) | Extend to the first / last cell of the page. |
+| **Shift+PageUp** / **Shift+PageDown** | Extend one page up / down. |
+| **Escape** | Collapse the range to the anchor (when not editing). |
+
+A plain arrow key after a range collapses it to the newly focused cell. Shift+Space still selects the row.
 
 Arrow, Home/End, PageUp/PageDown and Space are always consumed, so the viewport does not scroll natively when focus cannot move further.
 

package/docs/roadmap.md

@@ -70,18 +70,75 @@ This document tracks the current status of features in `OpenGridX` and outlines
 
 ---
 
-## 📅 Upcoming Features
+## 🗓️ Q4 2026 Roadmap (October – December)
 
-### Advanced Data Features
-*   **Interactive Pivot Builder**: Drag-and-drop UI for users to dynamically create pivot tables.
-*   **Advanced Charts Integration**: Inline sparklines and trend visualization.
+**Theme: free spreadsheet editing, with AI you control.** Range selection, paste, undo/redo and a fill handle are paid features in MUI X Premium and AG Grid Enterprise, and clipboard paste (476 👍) and cell range selection (317 👍) are among the most-requested grid features on GitHub. The research behind this plan compared ten competing grids and their AI features.
 
-### Demo Site
-*   **Full source viewer coverage**: Migrate all 32 examples to `DocsLayout` using Vite `?raw` auto-loading (eliminates string-literal source maintenance). See `docs/superpowers/plans/2026-07-29-demo-app-refactor.md`.
-*   **Syntax highlighting**: Prism.js token-based highlighting in the source viewer.
+**Team:** one maintainer plus an AI coding assistant. The plan is sized for that: one headline feature per release, and anything that slips moves to the next release instead of stretching the current one.
+
+**Compatibility:** everything ships in 3.x minor releases. Each new interaction is opt-in through a prop, so existing grids behave exactly as before until the feature is enabled.
+
+### Releases
+
+| Release | Target | Headline | Also in it |
+| :--- | :--- | :--- | :--- |
+| **3.3.0** ✅ | shipped 7 Oct | **Cell range selection** (opt-in `cellSelection` prop): mouse drag, Shift+click, Shift+arrows; Ctrl+C / Cmd+C copies the block as TSV | Selection status bar (count, sum, average of selected cells); wrapped header text; React Compiler compatibility check |
+| **3.4.0** | 20 Nov | **Paste from Excel / Google Sheets** into the selection, through `processRowUpdate` (values parsed per column type, non-editable cells skipped, `onClipboardPasteError`). **Undo / redo** for cell edits and pastes (Ctrl+Z, Ctrl+Shift+Z / Ctrl+Y, `apiRef.undo()` / `redo()`) | **AI toolkit, part 1** in a new `@opencorestack/opengridx/ai` entry point: `getGridAiSchema(columns)` (JSON Schema of the filter, sort, grouping, aggregation, pivot and visibility models the columns allow) and `validateGridAiState(json, columns)` (drops unknown fields and operators, coerces values, returns errors) |
+| **3.5.0** | 15 Dec | **AI toolkit, part 2**: `aiAssistant={{ onPrompt }}` prompt panel that calls the app's own model, shows the proposed changes as removable chips and applies them with undo; `createGridAgentTools(apiRef)` (plain tool objects for CopilotKit, the Vercel AI SDK or WebMCP) | Header filter row; **fill handle** as a stretch goal (moves to Q1 2027 if 3.3–3.4 run late) |
+| Freeze | 19 Dec – 5 Jan | Bug fixes only | — |
+
+### Across the quarter
+
+*   **Published benchmark**: reproducible 100k / 1M-row numbers (scroll frame rate, sort and filter time, memory) in `docs/performance.md`.
+*   **Next.js App Router guide**: using the grid from a `'use client'` component, with the stylesheet in `app/layout.tsx`.
+*   **RTL check**: verify right-to-left layouts and document the result.
+*   **Demo site**: source viewer on all examples (`DocsLayout` with Vite `?raw`) and syntax highlighting, done alongside each release's demo page.
+
+### Definition of done for each feature
+
+*   A short design note in `docs/superpowers/specs/` before coding starts (API, keyboard behaviour, ARIA).
+*   Unit tests, browser tests in Chromium, Firefox and WebKit, and a scenario in the package smoke suite.
+*   Keyboard-only and screen-reader pass: the grid stays a single Tab stop and announces selection changes.
+*   API reference, feature guide, demo page, CHANGELOG and `llms.txt` updated (the wiki follows automatically).
+*   Bundle budget: the core bundle grows only by the feature itself; the `/ai` entry point has no dependencies and adds nothing when it is not imported.
+
+### Rules for the AI toolkit
+
+*   OpenGridX never calls an AI service and never bundles an AI SDK. The app passes a function that calls whichever model it uses.
+*   By default only column definitions and grid state are sent, never row data. Example values are opt-in per column and documented as real data.
+*   Model output is always validated against the schema and shown to the user before it changes the grid, with one-click undo.
+*   The schema carries a `schemaVersion`, since apps will cache prompts against it.
+
+### Risks
+
+*   **Range selection touches focus and keyboard handling**, where most v3.0 fixes landed. It is opt-in and gets the longest test cycle; if it slips, 3.4.0 moves rather than shipping paste on an unstable base.
+*   **Undo must cover rejected updates**: a `processRowUpdate` that throws or a paste that partly fails must leave the history consistent.
+*   **Wrong AI filters** that look plausible: the validator, visible chips and undo are required, not optional.
+
+## 🔭 Next (Q1 2027)
+
+*   **Row reordering inside tree data and row groups**, touch-friendly (MUI #4821, 405 👍, not in MUI X).
+*   **Fill handle**, if it does not make 3.5.0.
+*   **Find & highlight** (Ctrl+F through cells), **right-click context menu**, **Excel-style value (set) filter**.
+*   **Calculated columns** (`[price] * [qty]` defined by users).
+*   **Interactive pivot builder**: drag-and-drop panel for pivot and grouping.
+*   **Sparklines** and a charts adapter that passes grid state to any chart library.
+*   **AI toolkit, part 3**: smart paste (unstructured text → pending rows) and `apiRef.getAiContext()` for "summarise selection"; an `opengridx-mcp` docs server for coding assistants.
+*   **Tailwind / shadcn theme preset**, sticky header against page scroll.
+
+### Not planned
+
+*   **Spreadsheet formulas** (`=SUM(A1:A9)`): a formula engine is a product of its own; calculated columns cover most of the need.
+*   **AI on every cell**: the cost grows with each row and results are not reproducible.
+*   **Built-in semantic search or anomaly detection**: large models and app-specific logic; better built by the app on top of the grid.
+*   **Scaled scrolling past ~645,000 rows** and **list-view virtualization**: revisit if users ask.
 
 ## ✅ Implemented Features (Recent)
 
+### 3.x releases *(2026-09-29 → 2026-10-01)*
+- **3.0.0** correctness release (rows never modified, typed generics, React 18 support), **3.0.1** fill-height layout fix, **3.1.0** `sortComparator` and column auto-size, **3.2.0** non-blocking PDF export, **3.2.1** Safari boolean editor fix, **3.2.2** linear-time export regexes. Details in [CHANGELOG.md](../CHANGELOG.md); upgrade guide in [migration/v2-to-v3.md](migration/v2-to-v3.md).
+- Package smoke suite against the packed tarball in React 18 and 19 apps, pull-request CI, community files and a wiki generated from these docs.
+
 ### Consumer defect fixes *(v2.1.0, 2026-09-23)*
 - Row-grouping subtotals now use the shared aggregation functions (nulls ignored, `unique` supported, `availableAggregationFunctions` honoured); `min`/`max` no longer overflow the call stack on very large datasets.
 - Group and tree-data expansion state survives row updates, including server-side lazily loaded children.

package/lib/components/Cell/Cell.css

@@ -28,6 +28,36 @@
 .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.
+ */
+.ogx__cell--range {
+  background-image: linear-gradient(var(--ogx-range-background), var(--ogx-range-background));
+  box-shadow:
+    var(--ogx-range-edge-top, 0 0 0 0 transparent),
+    var(--ogx-range-edge-bottom, 0 0 0 0 transparent),
+    var(--ogx-range-edge-left, 0 0 0 0 transparent),
+    var(--ogx-range-edge-right, 0 0 0 0 transparent);
+}
+.ogx__cell--range-top {
+  --ogx-range-edge-top: inset 0 2px 0 0 var(--ogx-range-border);
+}
+.ogx__cell--range-bottom {
+  --ogx-range-edge-bottom: inset 0 -2px 0 0 var(--ogx-range-border);
+}
+.ogx__cell--range-left {
+  --ogx-range-edge-left: inset 2px 0 0 0 var(--ogx-range-border);
+}
+.ogx__cell--range-right {
+  --ogx-range-edge-right: inset -2px 0 0 0 var(--ogx-range-border);
+}
+/* While a pointer drag selects cells, the browser must not select text as well. */
+.ogx--range-dragging,
+.ogx--range-dragging * {
+  -webkit-user-select: none;
+  user-select: none;
+}
 .ogx__cell--editing {
   padding: 0;
   overflow: visible;

package/lib/components/Cell/Cell.tsx

@@ -6,6 +6,8 @@ import type { CellColSpanInfo } from '../../hooks/features/useGridSpanning';
 import { GridEditInputCell } from './GridEditInputCell';
 import { CellErrorBoundary } from './CellErrorBoundary';
 import { formatValueByType } from '../../utils/values';
+import { attempt } from '../../utils/attempt';
+import { RANGE_BOTTOM, RANGE_CELL, RANGE_LEFT, RANGE_RIGHT, RANGE_TOP } from '../../utils/cellSelection';
 
 export interface CellProps<R extends GridRowModel = GridRowModel> {
     onCellClick?: (params: GridCellParams<R>) => void;
@@ -46,6 +48,11 @@ export interface CellProps<R extends GridRowModel = GridRowModel> {
     rowMeta?: GridRowMeta;
     /** The error the column's valueGetter threw for this cell (computed by Row); shown as a cell error. */
     valueError?: unknown;
+    /**
+     * Place of the cell in the selected cell range (`cellSelection`), as bit flags: in range 1, top
+     * edge 2, bottom 4, left 8, right 16. 0 or absent: not in a range. @since v3.3
+     */
+    rangeFlags?: number;
 }
 
 interface FormattedValue {
@@ -82,7 +89,8 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         rowSpan: rowSpanProp,
         isHiddenByRowSpan,
         rowMeta,
-        valueError
+        valueError,
+        rangeFlags = 0,
     } = props;
 
     // All hooks must come before any early returns (Rules of Hooks)
@@ -99,12 +107,12 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
     // formatter, written for data rows, is only called for the values they do hold.
     const isSyntheticRow = rowMeta?.isGroupRow === true;
     const { formattedValue, error: formatError } = React.useMemo<FormattedValue>(() => {
-        if (colDef.valueFormatter && !(isSyntheticRow && value == null)) {
-            try {
-                return { formattedValue: colDef.valueFormatter({ value, row, field: colDef.field }) };
-            } catch (error) {
-                return { formattedValue: '', error: error ?? new Error('valueFormatter failed') };
-            }
+        const formatter = colDef.valueFormatter;
+        if (formatter && !(isSyntheticRow && value == null)) {
+            const result = attempt(() => formatter({ value, row, field: colDef.field }));
+            return result.ok
+                ? { formattedValue: result.value }
+                : { formattedValue: '', error: result.error ?? new Error('valueFormatter failed') };
         }
 
         // Without a formatter the column type decides: locale date, Yes / No, singleSelect label.
@@ -113,12 +121,10 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
 
     const resolvedCellClassName = React.useMemo(() => {
         if (!colDef.cellClassName) return '';
-        if (typeof colDef.cellClassName === 'function') {
-            try {
-                return colDef.cellClassName({ value, formattedValue, row, field: colDef.field, colDef, rowIndex, colIndex, rowMeta }) || '';
-            } catch {
-                return '';
-            }
+        const getClassName = colDef.cellClassName;
+        if (typeof getClassName === 'function') {
+            const result = attempt(() => getClassName({ value, formattedValue, row, field: colDef.field, colDef, rowIndex, colIndex, rowMeta }));
+            return (result.ok && result.value) || '';
         }
         return colDef.cellClassName;
     }, [colDef, value, formattedValue, row, rowIndex, colIndex, rowMeta]);
@@ -224,6 +230,11 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         isPinned && isPinnedEdge && `ogx__cell--pinned-${pinnedPosition}-${pinnedPosition === 'left' ? 'last' : 'first'}`,
         isEditing && 'ogx__cell--editing',
         (rowSpanProp && rowSpanProp > 1) && 'ogx__cell--spanned',
+        (rangeFlags & RANGE_CELL) !== 0 && 'ogx__cell--range',
+        (rangeFlags & RANGE_TOP) !== 0 && 'ogx__cell--range-top',
+        (rangeFlags & RANGE_BOTTOM) !== 0 && 'ogx__cell--range-bottom',
+        (rangeFlags & RANGE_LEFT) !== 0 && 'ogx__cell--range-left',
+        (rangeFlags & RANGE_RIGHT) !== 0 && 'ogx__cell--range-right',
         resolvedCellClassName
     ].filter(Boolean).join(' ');
 
@@ -266,6 +277,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
             data-colindex={colIndex}
             {...(colSpan > 1 ? { 'aria-colspan': colSpan } : {})}
             {...(rowSpan > 1 ? { 'aria-rowspan': rowSpan } : {})}
+            {...((rangeFlags & RANGE_CELL) !== 0 ? { 'aria-selected': true } : {})}
         >
             <div className="ogx__cell-content">
                 {isEditing && (onCellValueChange || onValueChange) && onEditStop ? (

package/lib/components/Cell/CellErrorBoundary.tsx

@@ -3,7 +3,10 @@ import React from 'react';
 // Must live at module scope (not inline) so React sees a stable component type.
 // Calling renderFn() here puts the throw one level BELOW CellErrorBoundary,
 // which is required — a component cannot catch errors thrown in its own render().
+// `renderFn` runs the consumer's renderCell, which may call hooks, so it must run on every render:
+// 'use no memo' stops React Compiler from memoizing the call (see GridToolbarSlot's InlineToolbar).
 function CellRenderTarget({ renderFn }: { renderFn: () => React.ReactNode }) {
+    'use no memo';
     return <>{renderFn()}</>;
 }