@opencorestack/opengridx 2.0.4 → 3.0.0

package/docs/performance.md

@@ -0,0 +1,124 @@
+# Performance Best Practices
+
+Tips for getting the most out of OpenGridX with large datasets.
+
+## Stabilize column definitions
+
+The most common cause of unnecessary re-renders is a new column array being created on every render.
+
+```tsx
+// ✅ Good: stable reference
+const columns = useMemo<GridColDef[]>(() => [
+    { field: 'id',   headerName: 'ID',   width: 70 },
+    { field: 'name', headerName: 'Name', width: 200 },
+], []);
+
+// ❌ Bad: new array on every render → column layout is recomputed every render
+const columns = [
+    { field: 'id',   headerName: 'ID',   width: 70 },
+    { field: 'name', headerName: 'Name', width: 200 },
+];
+```
+
+The same applies to the `rows` prop — if you derive rows from server data, wrap the derivation in `useMemo`.
+
+## Keep cell renderers lightweight
+
+`renderCell` is called for every visible cell on every render. Expensive work inside it multiplies with overscan.
+
+```tsx
+// ✅ Good: memoized sub-component
+const StatusBadge = React.memo(({ value }: { value: string }) => (
+    <span className={`badge badge--${value}`}>{value}</span>
+));
+
+{ field: 'status', renderCell: (p) => <StatusBadge value={String(p.value)} /> }
+
+// ❌ Bad: inline object / new function reference every render
+{ field: 'status', renderCell: (p) => <span style={{ color: 'red' }}>{String(p.value)}</span> }
+```
+
+## Use fixed row heights when possible
+
+Every row has the same height (`rowHeight` or the `density` preset); there is no per-row height callback. Expanded detail panels add their own height, which the grid folds into a cumulative-height table, so many expanded panels (and `'auto'` panels, which are measured after they render) cost more than plain rows.
+
+```tsx
+// Fixed height — fastest
+<DataGrid rows={rows} columns={columns} rowHeight={48} />
+
+// Variable height — necessary for detail panels, but adds cost
+<DataGrid rows={rows} columns={columns} getDetailPanelHeight={() => 200} />
+```
+
+## Choose the right density
+
+`density="compact"` and `density="comfortable"` replace `rowHeight` with a preset (32 px / 72 px, or the theme's `grid.rowHeightCompact` / `grid.rowHeightComfortable`); `density="standard"` uses `rowHeight`. Compact rows fit more rows in the viewport.
+
+```tsx
+<DataGrid density="compact" />      // 32 px rows — more rows in viewport
+<DataGrid density="standard" />     // rowHeight (default 52 px)
+<DataGrid density="comfortable" />  // 72 px rows
+```
+
+## Tune the overscan buffer
+
+`overscanRowCount` (default `3`) is the minimum rows rendered outside the viewport. The grid raises it automatically based on scroll velocity. Raise the floor only if you still see blank flashes at the default.
+
+```tsx
+// Raise the floor for very fast scrolling environments
+<DataGrid overscanRowCount={8} rows={rows} columns={columns} />
+```
+
+See [Virtualization](./features/virtualization.md) for the full adaptive-overscan details.
+
+## Avoid `autoHeight` on large datasets
+
+`autoHeight` sizes the grid to all of its rows, so every row is rendered. Only use it when the dataset is small (< 100 rows), or together with `pagination`.
+
+## Give the grid a bounded height, and import the stylesheet
+
+Virtualization only works when the viewport has a fixed height: pass `height`, or put the grid in a container with a definite height (a flex child needs `min-height: 0`). In an unbounded container the viewport grows to fit every row and every row is rendered; a dev-mode warning reports this.
+
+The same happens when the stylesheet is missing, because the viewport's `overflow: auto` comes from it (a dev-mode warning reports a missing stylesheet too). Import it once in your app:
+
+```tsx
+import '@opencorestack/opengridx/styles';
+```
+
+## Know the browser's height limit
+
+The grid sizes its scroll content to `rowCount × rowHeight` pixels and does not scale scroll positions. Browsers cap an element's height (Chromium at 33,554,432 px, Firefox lower), so at the default 52 px row height rows past roughly 645,000 cannot be scrolled to. A dev-mode warning reports it. For more rows, use pagination, `paginationMode="server"` or infinite scroll with a `dataSource`.
+
+## Use server-side operations for very large datasets
+
+Client-side filtering, sorting, and pagination load the full dataset into JS. For very large datasets, prefer server-side modes. The simplest way is a `dataSource`: the grid calls `getRows` with the page range, sort model and filter model, and shows the response (see [Server-Side Data](./features/data-source.md)).
+
+Without a `dataSource`, fetch the rows yourself from the change callbacks and control the models:
+
+```tsx
+<DataGrid
+    rows={pageRows}            // the current page, already filtered and sorted by the server
+    columns={columns}
+    filterMode="server"
+    sortingMode="server"
+    pagination
+    paginationMode="server"
+    rowCount={totalRows}       // server total
+    paginationModel={paginationModel}
+    onPaginationModelChange={setPaginationModel}   // refetch in an effect on these models
+    sortModel={sortModel}
+    onSortModelChange={setSortModel}
+    filterModel={filterModel}
+    onFilterModelChange={setFilterModel}
+/>
+```
+
+In server modes the grid shows `rows` as given: it does not re-filter, re-sort or slice them (v3.0+; earlier versions did unless a `dataSource` was set).
+
+
+## Related
+
+- [Virtualization](./features/virtualization.md)
+- [Server-Side Data](./features/data-source.md)
+- [Sorting & Pagination](./features/sorting-pagination.md)
+- [Infinite Scroll](./features/infinite-scroll.md)

package/docs/roadmap.md

@@ -5,7 +5,7 @@ This document tracks the current status of features in `OpenGridX` and outlines
 ## ✅ Implemented Features
 
 ### Core
-*   **Virtualization**: High-performance row virtualization for handling large datasets. Column virtualization is planned (currently all columns are rendered).
+*   **Virtualization**: Row virtualization plus horizontal virtualization of unpinned columns. Requires a bounded grid height (see `docs/features/virtualization.md`).
 *   **Sorting**: Client-side and server-side multi-column sorting.
 *   **Filtering**: Client-side filtering with support for various operators.
 *   **Pagination**: Client-side and server-side pagination with customizable page sizes.
@@ -42,9 +42,9 @@ This document tracks the current status of features in `OpenGridX` and outlines
 
 ### Accessibility & Clipboard *(completed 2026-03-03)*
 *   **ARIA roles**: `role="grid"`, `role="row"`, `role="gridcell"`, `role="columnheader"` on correct elements.
-*   **ARIA attributes**: `aria-sort`, `aria-selected`, `aria-label`, `aria-expanded`, `aria-readonly`, `aria-haspopup` throughout.
-*   **Keyboard navigation**: Tab / Enter / Escape / Arrow keys / Home / End / PageUp / PageDown.
-*   **`aria-rowcount` and `aria-colcount`**: Accurate counts including system columns.
+*   **ARIA attributes**: `aria-sort`, `aria-selected`, `aria-label`, `aria-expanded`, `aria-readonly`, `aria-haspopup` throughout. v3.0 adds `aria-level` / `aria-expanded` on hierarchy rows, `aria-multiselectable`, and `aria-sort` on the primary sort column only.
+*   **Keyboard navigation**: Enter / Escape / Arrow keys / Home / End / PageUp / PageDown, Shift+Space and Ctrl+A selection, Alt+ArrowDown for the column menu; the grid is a single Tab stop (v3.0). See [Keyboard & Accessibility](features/keyboard-navigation.md).
+*   **`aria-rowcount` / `aria-rowindex` and `aria-colcount` / `aria-colindex`**: Count header rows and system columns, number rows across pages and pinned rows, and match between header and body cells (corrected in v3.0).
 *   **Clipboard**: Full TSV-formatted copy support (Ctrl+C / Cmd+C) for seamless integration with Excel/Google Sheets.
 
 ### Advanced Excel Export *(completed 2026-03-03)*
@@ -74,21 +74,27 @@ This document tracks the current status of features in `OpenGridX` and outlines
 
 ### Advanced Data Features
 *   **Interactive Pivot Builder**: Drag-and-drop UI for users to dynamically create pivot tables.
-*   **Native PDF Reporting**: Automated PDF generation with customizable layouts.
 *   **Advanced Charts Integration**: Inline sparklines and trend visualization.
 
-### DX & Publishing
-*   **npm publish**: Finalize `package.json` metadata, `README.md`, and publish to npm registry.
-
 ### 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.
-*   **GitHub Pages deployment**: CI/CD via GitHub Actions (`base: '/OpenGridX/'` already configured in `vite.config.js`).
 
 ## ✅ Implemented Features (Recent)
 
+### 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.
+- Rows are positioned correctly when rows are pinned to the top; keyboard navigation and `scrollToIndexes` keep the target row fully visible below the sticky header.
+- `valueFormatter` applies under row grouping; `formattedValue` is passed to `renderCell`.
+- `slots.footer`, `slots.noRowsOverlay` and `slots.loadingOverlay` are rendered (they were typed but ignored).
+- New `onRowDoubleClick`; `ColumnVisibilityPanel` exported; `exportToExcelAdvanced` accepts `groupedRows`.
+- Dev-mode warnings for an unbounded grid container and for `pagination` with row grouping.
+- Real-browser test project (Vitest browser mode + Playwright/Chromium), `npm run test:browser`; the npm publish workflow now runs unit and browser tests before publishing.
+- Already shipped, previously listed as upcoming: npm publishing (since 0.1.0), native PDF export (v1.2.1), GitHub Pages deployment.
+
 ### Library Hardening *(completed 2026-09-02)*
-- **`GridRowMeta`**: Hierarchy metadata (`hasChildren`, `treeDepth`, `groupingField`, `groupingValue`, `descendantCount`, `isExpanded`, `isGroupRow`) moved from `GridRowModel` into a separate `Map<GridRowId, GridRowMeta>`. Exposed as `params.rowMeta` in `renderCell`. Runtime shim maintains backward compatibility; removed in v2.0.
+- **`GridRowMeta`**: Hierarchy metadata (`hasChildren`, `treeDepth`, `groupingField`, `groupingValue`, `descendantCount`, `isExpanded`, `isGroupRow`) moved from `GridRowModel` into a separate `Map<GridRowId, GridRowMeta>`. Exposed as `params.rowMeta` in `renderCell`. The runtime shim (underscore-prefixed fields on copied row objects) was kept through v2.x and removed in v3.0 — see `docs/migration/v2-to-v3.md`.
 - **`CellErrorBoundary`**: Custom `renderCell` errors are now caught per-cell. Failing cells show a `⚠` indicator with the error as a tooltip; the rest of the grid renders normally.
 - **`GridLocaleText` / `localeText` prop**: All user-visible pagination strings (`paginationRowsPerPage`, `paginationOf`, `paginationPage`, `noRowsLabel`) are now overrideable for internationalisation.
 - **Core hook tests**: `useGridRowPipeline`, `useGridControlledState`, `useGridKeyboardNavigation` now have full test coverage (25 new tests).

package/lib/components/Cell/Cell.css

@@ -22,7 +22,7 @@
 }
 /* Show ring when keyboard navigation is active */
 .ogx--kb .ogx__cell--focused {
-  outline: 2px solid var(--ogx-color-primary, #2563eb);
+  outline: 2px solid var(--ogx-grid-cell-focus-border, var(--ogx-color-primary, #2563eb));
   outline-offset: -2px;
 }
 .ogx__cell--editable {
@@ -70,6 +70,11 @@
 .ogx:not(.ogx--row-spanning) .ogx__row--selected:hover .ogx__cell--pinned-right {
   background-color: var(--ogx-grid-row-selected-hover-background);
 }
+/* Section edge cells show a shadow outside their box; the content stays clipped by .ogx__cell-content. */
+.ogx__cell--pinned-left-last,
+.ogx__cell--pinned-right-first {
+  overflow: visible;
+}
 .ogx__cell--pinned-left-last::after {
   content: '';
   position: absolute;
@@ -101,6 +106,13 @@
   white-space: nowrap;
   width: 100%;
 }
+/* Default rendering of a type: 'image' column: the image fits the row height. */
+.ogx__cell-image {
+  display: block;
+  max-width: 100%;
+  max-height: calc(var(--ogx-row-height) - 8px);
+  object-fit: contain;
+}
 .ogx__cell--spanned {
   background-color: var(--ogx-grid-background);
   z-index: 10; 

package/lib/components/Cell/Cell.tsx

@@ -5,6 +5,7 @@ import type { CellColSpanInfo } from '../../hooks/features/useGridSpanning';
 
 import { GridEditInputCell } from './GridEditInputCell';
 import { CellErrorBoundary } from './CellErrorBoundary';
+import { formatValueByType } from '../../utils/values';
 
 export interface CellProps<R extends GridRowModel = GridRowModel> {
     onCellClick?: (params: GridCellParams<R>) => void;
@@ -15,25 +16,41 @@ export interface CellProps<R extends GridRowModel = GridRowModel> {
     colDef: GridColDef<R>;
     rowIndex: number;
     colIndex: number;
+    /** 1-based `aria-colindex` (system columns included). Defaults to `colIndex + 1`. */
+    ariaColIndex?: number;
     isSelected?: boolean;
     onClick?: (event: React.MouseEvent) => void;
     width?: number;
     pinnedPosition?: GridPinnedPosition | null;
     pinnedOffset?: number;
+    /**
+     * The cell is the last left-pinned or first right-pinned cell of its row: it gets
+     * `ogx__cell--pinned-left-last` / `ogx__cell--pinned-right-first` (the section edge shadow).
+     */
+    isPinnedEdge?: boolean;
 
     isFocused?: boolean;
     isFocusVisible?: boolean;
 
+    /** Whether this cell may enter edit mode (column, row and `isCellEditable` already resolved). */
     isEditable?: boolean;
     isEditing?: boolean;
     onEditStart?: () => void;
-    onEditStop?: (cancel?: boolean) => void;
+    /** Ends this cell's edit. `field` identifies the cell, so a late call cannot end another cell's edit. */
+    onEditStop?: (cancel?: boolean, field?: string) => void;
     onValueChange?: (newValue: unknown) => void;
 
     colSpanInfo?: CellColSpanInfo;
     rowSpan?: number;
     isHiddenByRowSpan?: boolean;
     rowMeta?: GridRowMeta;
+    /** The error the column's valueGetter threw for this cell (computed by Row); shown as a cell error. */
+    valueError?: unknown;
+}
+
+interface FormattedValue {
+    formattedValue: string;
+    error?: unknown;
 }
 
 function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
@@ -46,11 +63,13 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         colDef,
         rowIndex,
         colIndex,
+        ariaColIndex,
         isSelected,
         onClick,
         width,
         pinnedPosition,
         pinnedOffset,
+        isPinnedEdge,
         isFocused,
         isFocusVisible,
         isEditable,
@@ -62,7 +81,8 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         colSpanInfo,
         rowSpan: rowSpanProp,
         isHiddenByRowSpan,
-        rowMeta
+        rowMeta,
+        valueError
     } = props;
 
     // All hooks must come before any early returns (Rules of Hooks)
@@ -74,47 +94,85 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         }
     }, [onCellValueChange, onValueChange, colDef.field]);
 
-    const formattedValue = React.useMemo(() => {
-        if (colDef.valueFormatter) {
-            return colDef.valueFormatter({
-                value,
-                row,
-                field: colDef.field
-            });
-        }
-
-        if (value === null || value === undefined) {
-            return '';
+    // A valueFormatter that throws is contained to its cell (shown as a cell error), like renderCell.
+    // Synthetic rows (group, subtotal, auto-created tree parent) have no value in most columns: the
+    // 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') };
+            }
         }
 
-        return String(value);
-    }, [value, row, colDef]);
+        // Without a formatter the column type decides: locale date, Yes / No, singleSelect label.
+        return { formattedValue: formatValueByType(value, colDef) };
+    }, [value, row, colDef, isSyntheticRow]);
 
     const resolvedCellClassName = React.useMemo(() => {
         if (!colDef.cellClassName) return '';
         if (typeof colDef.cellClassName === 'function') {
-            return colDef.cellClassName({ value, row, field: colDef.field, colDef, rowIndex, colIndex }) || '';
+            try {
+                return colDef.cellClassName({ value, formattedValue, row, field: colDef.field, colDef, rowIndex, colIndex, rowMeta }) || '';
+            } catch {
+                return '';
+            }
         }
         return colDef.cellClassName;
-    }, [colDef, value, row, rowIndex, colIndex]);
+    }, [colDef, value, formattedValue, row, rowIndex, colIndex, rowMeta]);
 
-    const cellRef = React.useRef<HTMLDivElement>(null);
+    const cellError = valueError ?? formatError;
 
-    React.useLayoutEffect(() => {
-        if (isFocused && cellRef.current) {
-            cellRef.current.focus({ preventScroll: true });
-        }
-    }, [isFocused]);
+    const field = colDef.field;
+    const handleCommit = React.useCallback(() => { onEditStop?.(false, field); }, [onEditStop, field]);
+    const handleCancel = React.useCallback(() => { onEditStop?.(true, field); }, [onEditStop, field]);
+
+    // A failed renderCell is retried when the row, the renderer or the value changes.
+    const errorResetKey = React.useMemo(() => [row, colDef.renderCell, value], [row, colDef.renderCell, value]);
+
+    // A cell that unmounts while editing (scrolled out of the render window, filtered or paged away)
+    // gets no blur, so its edit would be left open with no editor. Commit it instead, as blur would.
+    // Deferred to a microtask so React StrictMode's simulated unmount + remount does not commit.
+    const editorMountedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (!isEditing || !onEditStop) return;
+        editorMountedRef.current = true;
+        return () => {
+            editorMountedRef.current = false;
+            queueMicrotask(() => {
+                if (!editorMountedRef.current) onEditStop(false, field);
+            });
+        };
+    }, [isEditing, onEditStop, field]);
 
     if (colSpanInfo?.spannedByColSpan) {
         return null;
     }
 
+    const colSpan = colSpanInfo?.cellProps.colSpan ?? 1;
+    const isColSpanOrigin = colSpan > 1;
+    // A merged cell takes the summed widths of the columns it covers (computed by Row from the
+    // resolved layout widths); the origin column's own min/max width does not apply to it.
+    const cellWidth = (isColSpanOrigin ? colSpanInfo?.cellProps.width : undefined) ?? width ?? colDef.width ?? 100;
+    const sizeStyle: React.CSSProperties = {
+        width: 'var(--width)',
+        '--width': typeof cellWidth === 'number' ? `${cellWidth}px` : cellWidth,
+        flexGrow: (isColSpanOrigin ? colSpanInfo?.cellProps.flexGrow : undefined) ?? colDef.flex ?? 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        boxSizing: 'border-box',
+        minWidth: isColSpanOrigin ? undefined : colDef.minWidth,
+        maxWidth: isColSpanOrigin ? undefined : colDef.maxWidth,
+    } as React.CSSProperties;
+
     if (isHiddenByRowSpan) {
+        // Keeps the covered column's slot so the rest of the row stays under its headers.
         return (
             <div
                 className="ogx__cell ogx__cell--hidden"
-                style={{ width: width ?? colDef.width ?? 100 }}
+                style={sizeStyle}
                 role="presentation"
                 data-field={colDef.field}
                 data-colindex={colIndex}
@@ -123,6 +181,9 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
     }
 
     const handleClick = (e: React.MouseEvent) => {
+        // Clicks inside an open editor (placing the caret, opening a select) belong to the editor:
+        // treating them as cell clicks would move focus to the grid and commit the edit.
+        if (isEditing) return;
         if (onCellClick) {
             onCellClick({
                 row,
@@ -136,17 +197,19 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         onClick?.(e);
     };
 
-    const handleDoubleClick = (e: React.MouseEvent) => {
-        if (isEditable && (onEditStart || onCellEditStart)) {
-            e.stopPropagation();
-            if (onCellEditStart) {
-                onCellEditStart(colDef.field, value);
-            } else {
-                onEditStart?.();
-            }
+    // The double-click is left to bubble so the row's onRowDoubleClick still fires.
+    const handleDoubleClick = () => {
+        // Double-clicking inside an open editor (to select a word) must not restart the edit.
+        if (isEditing || !isEditable) return;
+        if (onCellEditStart) {
+            onCellEditStart(colDef.field, value);
+        } else {
+            onEditStart?.();
         }
     };
 
+    const renderEditCell = colDef.renderEditCell;
+
     const isPinned = pinnedPosition !== null && pinnedPosition !== undefined;
 
     const classNames = [
@@ -158,24 +221,16 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         colDef.type && `ogx__cell--type-${colDef.type}`,
         isPinned && 'ogx__cell--pinned',
         isPinned && `ogx__cell--pinned-${pinnedPosition}`,
+        isPinned && isPinnedEdge && `ogx__cell--pinned-${pinnedPosition}-${pinnedPosition === 'left' ? 'last' : 'first'}`,
         isEditing && 'ogx__cell--editing',
         (rowSpanProp && rowSpanProp > 1) && 'ogx__cell--spanned',
         resolvedCellClassName
     ].filter(Boolean).join(' ');
 
-    const colSpan = colSpanInfo?.cellProps?.colSpan || 1;
     const rowSpan = rowSpanProp || 1;
-    const cellWidth = colSpanInfo?.cellProps?.width ?? width ?? colDef.width ?? 100;
 
     const style: React.CSSProperties = {
-        width: 'var(--width)',
-        '--width': typeof cellWidth === 'number' ? `${cellWidth}px` : cellWidth,
-        flexGrow: colDef.flex ?? 0,
-        flexShrink: 0,
-        flexBasis: colDef.flex ? 'auto' : 'auto',
-        boxSizing: 'border-box',
-        minWidth: colDef.minWidth,
-        maxWidth: colDef.maxWidth,
+        ...sizeStyle,
         position: isPinned ? 'sticky' : undefined,
         zIndex: colDef.zIndex ?? (isPinned ? 3 : undefined),
         padding: isEditing ? 0 : undefined
@@ -199,13 +254,12 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
 
     return (
         <div
-            ref={cellRef}
             className={classNames}
             style={style}
             onClick={handleClick}
             onDoubleClick={handleDoubleClick}
             role="gridcell"
-            aria-colindex={colIndex + 1}
+            aria-colindex={ariaColIndex ?? colIndex + 1}
             aria-readonly={!isEditable || undefined}
             tabIndex={-1}
             data-field={colDef.field}
@@ -215,35 +269,52 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         >
             <div className="ogx__cell-content">
                 {isEditing && (onCellValueChange || onValueChange) && onEditStop ? (
-                    colDef.renderEditCell ? (
-                        colDef.renderEditCell({
-                            value,
-                            row,
-                            field: colDef.field,
-                            colDef,
-                            rowIndex,
-                            colIndex,
-                            rowMeta,
-                        })
+                    renderEditCell ? (
+                        <CellErrorBoundary
+                            field={colDef.field}
+                            resetKey={row}
+                            renderFn={() => renderEditCell({
+                                value,
+                                formattedValue,
+                                row,
+                                field: colDef.field,
+                                colDef,
+                                rowIndex,
+                                colIndex,
+                                rowMeta,
+                                onValueChange: handleValueChange,
+                                onCommit: handleCommit,
+                                onCancel: handleCancel,
+                            })}
+                        />
                     ) : (
                         <GridEditInputCell
                             value={value}
+                            formattedValue={formattedValue}
                             row={row}
                             field={colDef.field}
                             colDef={colDef as unknown as GridColDef}
                             rowIndex={rowIndex}
                             colIndex={colIndex}
+                            rowMeta={rowMeta}
                             onValueChange={handleValueChange}
-                            onCommit={() => onEditStop()}
-                            onCancel={() => onEditStop(true)}
+                            onCommit={handleCommit}
+                            onCancel={handleCancel}
                         />
                     )
-                ) : colDef.renderCell ? (
+                ) : cellError !== undefined ? (
                     <CellErrorBoundary
                         field={colDef.field}
                         resetKey={row}
+                        renderFn={() => { throw cellError; }}
+                    />
+                ) : colDef.renderCell ? (
+                    <CellErrorBoundary
+                        field={colDef.field}
+                        resetKey={errorResetKey}
                         renderFn={() => colDef.renderCell!({
                             value,
+                            formattedValue,
                             row,
                             field: colDef.field,
                             colDef,
@@ -252,6 +323,8 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
                             rowMeta,
                         })}
                     />
+                ) : colDef.type === 'image' && typeof value === 'string' && value !== '' ? (
+                    <img className="ogx__cell-image" src={value} alt={colDef.headerName ?? colDef.field} loading="lazy" />
                 ) : (
                     formattedValue
                 )}

package/lib/components/Cell/CellErrorBoundary.tsx

@@ -10,9 +10,17 @@ function CellRenderTarget({ renderFn }: { renderFn: () => React.ReactNode }) {
 interface CellErrorBoundaryProps {
     renderFn: () => React.ReactNode;
     field: string;
+    /** The error is cleared when this changes. An array is compared element by element. */
     resetKey?: unknown;
 }
 
+function sameResetKey(a: unknown, b: unknown): boolean {
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((item, i) => Object.is(item, b[i]));
+    }
+    return Object.is(a, b);
+}
+
 interface CellErrorBoundaryState {
     hasError: boolean;
     error: Error | null;
@@ -29,13 +37,11 @@ export class CellErrorBoundary extends React.Component<CellErrorBoundaryProps, C
         props: CellErrorBoundaryProps,
         state: CellErrorBoundaryState
     ): Partial<CellErrorBoundaryState> | null {
-        if (state.hasError && props.resetKey !== state.resetKey) {
+        if (sameResetKey(props.resetKey, state.resetKey)) return null;
+        if (state.hasError) {
             return { hasError: false, error: null, resetKey: props.resetKey };
         }
-        if (props.resetKey !== state.resetKey) {
-            return { resetKey: props.resetKey };
-        }
-        return null;
+        return { resetKey: props.resetKey };
     }
 
     static getDerivedStateFromError(error: Error): Partial<CellErrorBoundaryState> {
@@ -53,7 +59,7 @@ export class CellErrorBoundary extends React.Component<CellErrorBoundaryProps, C
             return (
                 <div
                     className="ogx__cell-error"
-                    role="status"
+                    role="img"
                     aria-label={`Error in cell: ${this.props.field}`}
                     title={this.state.error?.message ?? 'Render error'}
                 >