@opencorestack/opengridx 2.1.0 → 3.0.1

package/lib/components/ListView/ListViewRow.tsx

@@ -1,41 +1,78 @@
 import React from 'react';
-import type { GridColDef, GridRowModel, GridRowId, GridListViewColDef, GridRenderCellParams } from '../../types';
+import { formatValueByType, getCellValue, getFormattedValue } from '../../utils/values';
+import { ExpandIcon } from '../ui/ExpandIcon';
+import { CellErrorBoundary } from '../Cell/CellErrorBoundary';
+import { isSyntheticRowId } from '../../utils/syntheticRows';
+import type { GridColDef, GridRowModel, GridRowId, GridRowMeta, GridListViewColDef, GridRenderCellParams } from '../../types';
 
 export interface ListViewRowProps<R extends GridRowModel = GridRowModel> {
     row: R;
+    /** The row's id (from getRowId). Defaults to `row.id`. */
+    rowId?: GridRowId;
+    /** Index of the row among the rendered rows; passed to renderCell and the row callbacks. */
     rowIndex: number;
+    /** 1-based position of the row in the whole data set. Defaults to rowIndex + 1. */
+    ariaRowIndex?: number;
     listViewColumn: GridListViewColDef<R>;
+    /** The grid column with the list field, if any: its valueGetter / valueFormatter produce value and formattedValue. */
+    gridColumn?: GridColDef<R>;
+    /** Tree-data / row-grouping metadata for the row. */
+    rowMeta?: GridRowMeta;
     isSelected?: boolean;
     checkboxSelection?: boolean;
     rowHeight?: number;
     onRowClick?: (row: R) => void;
     onRowDoubleClick?: (row: R) => void;
     onSelectionChange?: (rowId: GridRowId, isSelected: boolean) => void;
+    /** Roving tab stop: 0 for the one row the list's Tab stop lands on, -1 for the others. */
+    tabIndex?: number;
+    /** Called when the row element itself receives focus. */
+    onFocus?: (rowIndex: number) => void;
+    /** Expands / collapses a row with children. When set, hierarchy rows get an expand chevron. */
+    onToggleExpansion?: (rowId: GridRowId) => void;
 }
 
 export function ListViewRow<R extends GridRowModel = GridRowModel>({
     row,
+    rowId,
     rowIndex,
+    ariaRowIndex,
     listViewColumn,
+    gridColumn,
+    rowMeta,
     isSelected = false,
     checkboxSelection = false,
     rowHeight,
     onRowClick,
     onRowDoubleClick,
     onSelectionChange,
+    tabIndex = -1,
+    onFocus,
+    onToggleExpansion,
 }: ListViewRowProps<R>) {
+    const id = rowId ?? row.id;
+    const field = listViewColumn.field;
+    // Same value and formatting as a grid cell for this field (Cell.tsx). A valueGetter or
+    // valueFormatter that throws reads as undefined / the unformatted value instead of crashing.
+    const value = getCellValue(row, field, gridColumn);
+    const formattedValue = getFormattedValue(row, field, value, gridColumn) ?? formatValueByType(value, gridColumn);
+    // Row-grouping headers, subtotals and auto-created tree parents are not data rows.
+    const isSyntheticRow = rowMeta?.isGroupRow === true || isSyntheticRowId(id);
+
     const params: GridRenderCellParams<R> = {
         row,
-        value: undefined,
-        field: listViewColumn.field,
-        colDef: { field: listViewColumn.field } as unknown as GridColDef<R>,
+        value,
+        formattedValue,
+        field,
+        colDef: gridColumn ?? listViewColumn,
         rowIndex,
         colIndex: 0,
+        rowMeta,
     };
 
     const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         e.stopPropagation();
-        onSelectionChange?.(row.id, e.target.checked);
+        onSelectionChange?.(id, e.target.checked);
     };
 
     return (
@@ -45,21 +82,50 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
             onClick={() => onRowClick?.(row)}
             onDoubleClick={onRowDoubleClick ? () => onRowDoubleClick(row) : undefined}
             role="row"
-            aria-rowindex={rowIndex + 2}
+            aria-rowindex={ariaRowIndex ?? rowIndex + 1}
             aria-selected={isSelected}
+            aria-level={rowMeta?.treeDepth !== undefined ? rowMeta.treeDepth + 1 : undefined}
+            aria-expanded={rowMeta?.hasChildren ? rowMeta.isExpanded === true : undefined}
+            data-rowindex={rowIndex}
+            tabIndex={tabIndex}
+            onFocus={onFocus ? (e) => { if (e.target === e.currentTarget) onFocus(rowIndex); } : undefined}
         >
             {checkboxSelection && (
                 <div className="ogx-list-view__checkbox" onClick={(e) => e.stopPropagation()}>
-                    <input
+                    {!isSyntheticRow && <input
                         type="checkbox"
                         checked={isSelected}
                         onChange={handleCheckboxChange}
-                        aria-label={`Select row ${row.id}`}
-                    />
+                        aria-label={`Select row ${id}`}
+                        // Not a Tab stop of its own: the list is one Tab stop, Shift+Space selects the focused row.
+                        tabIndex={-1}
+                    />}
+                </div>
+            )}
+            {rowMeta && onToggleExpansion && (
+                // Tree data / row grouping: indentation by depth, and a chevron on rows with children
+                // (not a Tab stop: Enter or Alt+Arrow toggle the focused row).
+                <div
+                    className="ogx-list-view__expand"
+                    style={{ paddingLeft: (rowMeta.treeDepth ?? 0) * 16 }}
+                    onClick={(e) => e.stopPropagation()}
+                    onDoubleClick={(e) => e.stopPropagation()}
+                >
+                    {rowMeta.hasChildren && (
+                        <ExpandIcon isExpanded={rowMeta.isExpanded === true} onClick={() => onToggleExpansion(id)} tabIndex={-1} />
+                    )}
                 </div>
             )}
             <div className="ogx-list-view__cell" role="gridcell">
-                {listViewColumn.renderCell(params)}
+                <CellErrorBoundary
+                    field={field}
+                    resetKey={row}
+                    renderFn={() => {
+                        const content = listViewColumn.renderCell(params);
+                        // A group row whose renderCell has nothing for it still shows its label.
+                        return content === undefined && isSyntheticRow ? rowMeta?.groupLabel : content;
+                    }}
+                />
             </div>
         </div>
     );

package/lib/components/Pagination/Pagination.tsx

@@ -1,6 +1,7 @@
 
 import React, { useId } from 'react';
 import { Button } from '../ui/Button';
+import { normalizePageSize, getPageCount, clampPage } from '../../utils/pagination';
 import type { GridLocaleText } from '../../types';
 
 export interface PaginationProps {
@@ -29,11 +30,19 @@ export function Pagination(props: PaginationProps) {
         localeText,
     } = props;
 
-    const pageCount = Math.max(1, Math.ceil(rowCount / pageSize));
-    const currentPage = Math.min(page, pageCount - 1);
+    const safePageSize = normalizePageSize(pageSize);
+    const pageCount = getPageCount(rowCount, safePageSize);
+    const currentPage = clampPage(page, pageCount);
 
-    const firstRowIndex = currentPage * pageSize;
-    const lastRowIndex = Math.min(firstRowIndex + pageSize, rowCount);
+    // The select must be able to show the size in use, even when it is not one of the options
+    // (e.g. the default 100 with pageSizeOptions={[10, 25, 50]}); otherwise it displays the first
+    // option and choosing that option fires no change event.
+    const selectOptions = pageSizeOptions.includes(safePageSize)
+        ? pageSizeOptions
+        : [...pageSizeOptions, safePageSize].sort((a, b) => a - b);
+
+    const firstRowIndex = currentPage * safePageSize;
+    const lastRowIndex = Math.min(firstRowIndex + safePageSize, rowCount);
     const displayedRows = rowCount === 0 ? 0 : `${firstRowIndex + 1}–${lastRowIndex}`;
 
     const rowsPerPageLabel = localeText?.paginationRowsPerPage ?? 'Rows per page:';
@@ -79,11 +88,10 @@ export function Pagination(props: PaginationProps) {
                 <select
                     id={pageSizeId}
                     className="ogx-pagination__select"
-                    value={pageSize}
+                    value={safePageSize}
                     onChange={handlePageSizeChange}
-                    aria-label="Rows per page"
                 >
-                    {pageSizeOptions.map(option => (
+                    {selectOptions.map(option => (
                         <option key={option} value={option}>
                             {option}
                         </option>

package/lib/components/Row/Row.tsx

@@ -7,11 +7,45 @@ import { DragHandleIcon } from '../ui/DragHandleIcon';
 import { DetailPanel } from '../DetailPanel/DetailPanel';
 import type { GridRowModel, GridColDef, GridRowId, GridColumnPinning, GridRowPinning, GridRowParams, GridCellParams, GridDetailPanelHeight, GridRowMeta } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
-import { isColumnPinned, calculatePinnedPositions, isRowPinned } from '../../utils/pinning';
-
+import { isColumnPinned, calculatePinnedPositions, getPinnedEdgeFields, isRowPinned } from '../../utils/pinning';
+import { resolveCellEditable } from '../../utils/editing';
+import { tryGetCellValue } from '../../utils/values';
+import { isSyntheticRowId } from '../../utils/syntheticRows';
+import { getRenderedColumnWidth } from '../../utils/columnWidth';
+import { DEFAULT_DETAIL_PANEL_HEIGHT } from '../../utils/detailPanel';
+
+/** Sticky system cells (drag handle, detail toggle, checkbox) sit above scrolled, spanned and focused cells. */
+const SYSTEM_CELL_Z_INDEX = 12;
+
+
+/**
+ * Builds the Cell span info for a colSpan origin: the merged width and flex-grow are the sums over
+ * the columns it covers, taken from the rendered (layout-resolved) columns. The span never crosses a
+ * spacer, so a span cut by the column window only covers what is rendered.
+ */
+function mergeColSpan<R extends GridRowModel>(
+    columns: GridColDef<R>[],
+    originIndex: number,
+    colSpan: number,
+    columnWidths: Record<string, number>,
+): CellColSpanInfo {
+    let width = 0;
+    let flexGrow = 0;
+    let covered = 0;
+    for (let i = originIndex; i < columns.length && covered < colSpan; i++) {
+        const col = columns[i];
+        if (col.isSpacer) break;
+        width += getRenderedColumnWidth(col, columnWidths);
+        flexGrow += col.flex ?? 0;
+        covered++;
+    }
+    return { spannedByColSpan: false, cellProps: { colSpan: covered, width, flexGrow } };
+}
 
 export interface RowProps<R extends GridRowModel = GridRowModel> {
     row: R;
+    /** The row's id (from getRowId). Defaults to `row.id`; the grid always passes it. */
+    rowId?: GridRowId;
     columns: GridColDef<R>[];
     rowIndex: number;
     isSelected?: boolean;
@@ -29,6 +63,8 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     onDetailPanelToggle?: (rowId: GridRowId) => void;
     detailPanelContent?: React.ReactNode;
     detailPanelHeight?: GridDetailPanelHeight;
+    /** Called with the rendered height of an `'auto'` detail panel whenever it changes. */
+    onDetailPanelHeightChange?: (rowId: GridRowId, height: number) => void;
 
     pinCheckboxColumn?: boolean;
     pinExpandColumn?: boolean;
@@ -43,8 +79,11 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
 
     editingCell?: { id: GridRowId; field: string; value: unknown; } | null;
     onEditStart?: (params: { id: GridRowId, field: string, value: unknown }) => void;
-    onEditStop?: (params?: { cancel?: boolean }) => void;
+    /** `id` / `field` name the cell whose editor asked to stop. */
+    onEditStop?: (params?: { cancel?: boolean; id?: GridRowId; field?: string }) => void;
     onEditCellValueChange?: (params: { id: GridRowId, field: string, value: unknown }) => void;
+    /** Per-cell editability predicate (`DataGrid.isCellEditable`). */
+    isCellEditable?: (params: GridCellParams<R>) => boolean;
 
     focusedCellField?: string | null;
     isFocusVisible?: boolean;
@@ -53,11 +92,16 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     rowSpanningCaches?: RowSpanningCaches;
     rowHeight?: number;
     rowMeta?: GridRowMeta;
+    /** Position of each visible data column in render order, for `colIndex` and `aria-colindex`. */
+    columnIndexMap?: Map<string, number>;
+    /** 1-based `aria-rowindex` of this row in the whole grid (header rows included). Defaults to `rowIndex + 2`. */
+    ariaRowIndex?: number;
 }
 
 export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const {
         row,
+        rowId: rowIdProp,
         columns,
         rowIndex,
         isSelected = false,
@@ -73,7 +117,8 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         isDetailPanelExpanded = false,
         onDetailPanelToggle,
         detailPanelContent,
-        detailPanelHeight = 200,
+        detailPanelHeight = DEFAULT_DETAIL_PANEL_HEIGHT,
+        onDetailPanelHeightChange,
         pinCheckboxColumn = true,
         pinExpandColumn = true,
         rowReordering = false,
@@ -88,6 +133,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         onEditStart,
         onEditStop,
         onEditCellValueChange,
+        isCellEditable,
 
         focusedCellField,
         isFocusVisible,
@@ -95,22 +141,16 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         colspanMap,
         rowSpanningCaches,
         rowHeight = 52,
-        rowMeta
+        rowMeta,
+        columnIndexMap,
+        ariaRowIndex,
     } = props;
 
+    const id = rowIdProp ?? row.id;
+    // All hooks must come before any early returns (Rules of Hooks).
+    // DOM focus is moved onto the focused cell by useGridKeyboardNavigation, not by the row.
     const checkboxId = useId();
-    const expandCellRef = React.useRef<HTMLDivElement>(null);
-    const checkboxCellRef = React.useRef<HTMLDivElement>(null);
-
-    // All hooks must come before any early returns (Rules of Hooks)
-    React.useLayoutEffect(() => {
-        if (focusedCellField === '__expand_col__' && expandCellRef.current) {
-            expandCellRef.current.focus({ preventScroll: true });
-        }
-        if (focusedCellField === '__checkbox_col__' && checkboxCellRef.current) {
-            checkboxCellRef.current.focus({ preventScroll: true });
-        }
-    }, [focusedCellField]);
+    const detailPanelId = useId();
 
     const pinnedPositions = React.useMemo(() => {
         return calculatePinnedPositions(
@@ -125,21 +165,28 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         );
     }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
 
-    const isGroupRow = rowMeta?.hasChildren === true;
+    const pinnedEdges = React.useMemo(() => getPinnedEdgeFields(columns, pinnedColumns), [columns, pinnedColumns]);
 
+    const isGroupRow = rowMeta?.hasChildren === true;
+    // Group rows, subtotal rows and auto-created tree parents: not data, so no selection or detail panel.
+    const isSyntheticRow = rowMeta?.isGroupRow === true;
+    const showDetailPanel = hasDetailPanel && !isSyntheticRow;
+    // The pivot Grand Total is synthetic too, but its cells show values like any row.
+    const isSelectableRow = !isSyntheticRow && !isSyntheticRowId(id);
+
+    // Which cells may be edited is decided per cell below (resolveCellEditable), not per row:
+    // tree-data parents are real rows and stay editable; synthetic group rows never are.
     const handleCellEditStart = React.useCallback((field: string, value: unknown) => {
-        if (!isGroupRow) {
-            onEditStart?.({ id: row.id, field, value });
-        }
-    }, [isGroupRow, row.id, onEditStart]);
+        onEditStart?.({ id, field, value });
+    }, [id, onEditStart]);
 
     const handleCellValueChange = React.useCallback((field: string, newValue: unknown) => {
-        onEditCellValueChange?.({ id: row.id, field, value: newValue });
-    }, [onEditCellValueChange, row.id]);
+        onEditCellValueChange?.({ id, field, value: newValue });
+    }, [onEditCellValueChange, id]);
 
-    const handleEditStopWrapper = React.useCallback((cancel?: boolean) => {
-        onEditStop?.({ cancel });
-    }, [onEditStop]);
+    const handleEditStopWrapper = React.useCallback((cancel?: boolean, field?: string) => {
+        onEditStop?.({ cancel, id, field });
+    }, [onEditStop, id]);
 
     // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
     if (row._isSkeleton) {
@@ -161,32 +208,42 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         );
     }
 
+    // `.ogx__cell--editing` covers custom renderEditCell editors, which have no .ogx__edit-cell wrapper.
     const handleRowClick = (event: React.MouseEvent) => {
 
-        if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell')) {
+        if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell, .ogx__cell--editing')) {
             return;
         }
-        onRowClick?.({ row, id: row.id, rowIndex });
+        onRowClick?.({ row, id, rowIndex });
     };
 
     const handleRowDoubleClick = (event: React.MouseEvent) => {
-        if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell')) {
+        if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell, .ogx__cell--editing')) {
             return;
         }
-        onRowDoubleClick?.({ row, id: row.id, rowIndex });
+        onRowDoubleClick?.({ row, id, rowIndex });
     };
 
     const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         event.stopPropagation();
-        onSelectionChange?.(row.id, event.target.checked);
+        onSelectionChange?.(id, event.target.checked);
     };
 
     const handleDetailPanelToggle = (event: React.MouseEvent) => {
         event.stopPropagation();
-        onDetailPanelToggle?.(row.id);
+        onDetailPanelToggle?.(id);
     };
 
-    const rowPinnedPosition = isRowPinned(row.id, pinnedRows);
+    // aria-colindex: system columns first (reorder, expand, checkbox), then the data columns.
+    const reorderColIndex = rowReordering ? 1 : 0;
+    const expandColIndex = hasDetailPanel ? reorderColIndex + 1 : reorderColIndex;
+    const checkboxColIndex = checkboxSelection ? expandColIndex + 1 : expandColIndex;
+    const systemColumnCount = checkboxColIndex;
+    const dataColumnCount = columnIndexMap?.size ?? columns.filter(c => !c.isSpacer).length;
+    const isHierarchyRow = rowMeta !== undefined;
+    const hasChildren = rowMeta?.hasChildren === true;
+
+    const rowPinnedPosition = isRowPinned(id, pinnedRows);
     const isRowPinnedTop = rowPinnedPosition === 'top';
     const isRowPinnedBottom = rowPinnedPosition === 'bottom';
 
@@ -199,7 +256,8 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         isRowPinnedBottom && 'ogx__row--pinned-bottom',
         isDragging && 'ogx__row--dragging',
         isDragOver && 'ogx__row--drag-over',
-        isGroupRow && 'ogx__row--group'
+        isGroupRow && 'ogx__row--group',
+        rowMeta?.isGroupFooter && 'ogx__row--group-footer'
     ].filter(Boolean).join(' ');
 
     return (
@@ -209,11 +267,13 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                 onClick={handleRowClick}
                 onDoubleClick={onRowDoubleClick ? handleRowDoubleClick : undefined}
                 role="row"
-                aria-rowindex={rowIndex + 1}
+                aria-rowindex={ariaRowIndex ?? rowIndex + 2}
                 aria-selected={isSelected}
+                aria-level={isHierarchyRow ? (rowMeta?.treeDepth ?? 0) + 1 : undefined}
+                aria-expanded={hasChildren ? rowMeta?.isExpanded === true : undefined}
                 data-rowindex={rowIndex}
-                onDragOver={onDragOver ? onDragOver(row.id) : undefined}
-                onDrop={onDrop ? onDrop(row.id) : undefined}
+                onDragOver={onDragOver ? onDragOver(id) : undefined}
+                onDrop={onDrop ? onDrop(id) : undefined}
                 style={{
                     maxHeight: `${rowHeight}px`,
                     minHeight: `${rowHeight}px`,
@@ -224,20 +284,23 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                 { }
                 {rowReordering && (
                     <div
-                        className="ogx__cell ogx__cell--drag-handle"
+                        className={`ogx__cell ogx__cell--drag-handle ${focusedCellField === '__reorder_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__reorder_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''}`}
                         role="gridcell"
-                        aria-label="Drag to reorder row"
+                        aria-label={onDragStart ? 'Drag to reorder row' : undefined}
+                        aria-colindex={reorderColIndex}
+                        data-field="__reorder_col__"
+                        tabIndex={-1}
                         style={{
                             position: 'sticky',
                             left: 0,
-                            zIndex: 4
+                            zIndex: SYSTEM_CELL_Z_INDEX
                         }}
-                        draggable={true}
-                        onDragStart={onDragStart ? onDragStart(row.id) : undefined}
+                        draggable={!!onDragStart}
+                        onDragStart={onDragStart ? onDragStart(id) : undefined}
                         onDragEnd={onDragEnd}
                         onClick={(e) => e.stopPropagation()}
                     >
-                        <DragHandleIcon />
+                        {onDragStart && <DragHandleIcon />}
                     </div>
                 )}
 
@@ -248,14 +311,16 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             } ${focusedCellField === '__expand_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__expand_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''
                             }`}
                         role="gridcell"
-                        aria-label={isDetailPanelExpanded ? 'Collapse row details' : 'Expand row details'}
-                        aria-expanded={isDetailPanelExpanded}
+                        aria-label={showDetailPanel ? (isDetailPanelExpanded ? 'Collapse row details' : 'Expand row details') : undefined}
+                        aria-expanded={showDetailPanel ? isDetailPanelExpanded : undefined}
+                        aria-controls={showDetailPanel && isDetailPanelExpanded ? detailPanelId : undefined}
+                        aria-colindex={expandColIndex}
+                        data-field="__expand_col__"
                         style={{
                             position: pinExpandColumn ? 'sticky' : undefined,
                             left: pinExpandColumn ? (rowReordering ? 48 : 0) : undefined,
-                            zIndex: pinExpandColumn ? 5 : undefined
+                            zIndex: pinExpandColumn ? SYSTEM_CELL_Z_INDEX : undefined
                         }}
-                        ref={expandCellRef}
                         tabIndex={-1}
                         onClick={(e) => {
                             e.stopPropagation();
@@ -269,11 +334,14 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             });
                         }}
                     >
-                        <ExpandIcon
-                            isExpanded={isDetailPanelExpanded}
-                            onClick={handleDetailPanelToggle}
-                            variant="plus-minus"
-                        />
+                        {showDetailPanel && (
+                            <ExpandIcon
+                                isExpanded={isDetailPanelExpanded}
+                                onClick={handleDetailPanelToggle}
+                                variant="plus-minus"
+                                tabIndex={-1}
+                            />
+                        )}
                     </div>
                 )}
 
@@ -284,12 +352,13 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             } ${focusedCellField === '__checkbox_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__checkbox_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''
                             }`}
                         role="gridcell"
+                        aria-colindex={checkboxColIndex}
+                        data-field="__checkbox_col__"
                         style={{
                             position: pinCheckboxColumn ? 'sticky' : undefined,
                             left: pinCheckboxColumn ? ((rowReordering ? 48 : 0) + (hasDetailPanel && pinExpandColumn ? 48 : 0)) : undefined,
-                            zIndex: pinCheckboxColumn ? 11 : undefined
+                            zIndex: pinCheckboxColumn ? SYSTEM_CELL_Z_INDEX : undefined
                         }}
-                        ref={checkboxCellRef}
                         tabIndex={-1}
                         onClick={(e) => {
                             e.stopPropagation();
@@ -303,21 +372,23 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             });
                         }}
                     >
-                        <Checkbox
-                            id={checkboxId}
-                            name={`ogx-select-row-${row.id}`}
-                            checked={isSelected}
-                            onChange={handleCheckboxChange}
-                            onClick={(e) => e.stopPropagation()}
-                            aria-label={isSelected ? `Deselect row ${row.id}` : `Select row ${row.id}`}
-                            tabIndex={-1}
-                            onMouseDown={(e) => e.preventDefault()}
-                        />
+                        {isSelectableRow && (
+                            <Checkbox
+                                id={checkboxId}
+                                name={`ogx-select-row-${id}`}
+                                checked={isSelected}
+                                onChange={handleCheckboxChange}
+                                onClick={(e) => e.stopPropagation()}
+                                aria-label={isSelected ? `Deselect row ${id}` : `Select row ${id}`}
+                                tabIndex={-1}
+                                onMouseDown={(e) => e.preventDefault()}
+                            />
+                        )}
                     </div>
                 )}
 
                 { }
-                {columns.map((colDef, colIndex) => {
+                {columns.map((colDef, localIndex) => {
                     if (colDef.isSpacer) {
                         return (
                             <div
@@ -327,22 +398,45 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             />
                         );
                     }
-                    const value = colDef.valueGetter
-                        ? colDef.valueGetter({ row, field: colDef.field, value: row[colDef.field] })
-                        : row[colDef.field];
+                    // A synthetic row holds its grouping value and aggregates under the column fields; a
+                    // valueGetter written for data rows would recompute (or crash) from fields it lacks.
+                    // A valueGetter that throws is contained to its cell.
+                    let value: unknown;
+                    let valueError: unknown;
+                    if (isSyntheticRow) {
+                        value = row[colDef.field];
+                    } else {
+                        ({ value, error: valueError } = tryGetCellValue(row, colDef.field, colDef));
+                    }
+                    const colIndex = columnIndexMap?.get(colDef.field) ?? localIndex;
 
                     const effectiveWidth = columnWidths[colDef.field] ?? colDef.width;
 
                     const pinnedPosition = isColumnPinned(colDef.field, pinnedColumns);
-                    const pinnedOffset = pinnedPosition ? pinnedPositions[colDef.field] : undefined;
 
-                    const isEditing = editingCell?.id === row.id && editingCell?.field === colDef.field;
+                    const isEditable = Boolean(onEditStart) && resolveCellEditable(
+                        { row, field: colDef.field, value, colDef, rowIndex, colIndex, rowMeta },
+                        isCellEditable
+                    );
+                    const isEditing = editingCell?.id === id && editingCell?.field === colDef.field;
 
                     const cellValue = isEditing ? editingCell?.value : value;
 
-                    const colSpanInfo = colspanMap?.get(row.id)?.[colDef.field];
-                    const rowSpan = rowSpanningCaches?.spannedCells[row.id]?.[colDef.field];
-                    const isHiddenByRowSpan = rowSpanningCaches?.hiddenCells[row.id]?.[colDef.field] || false;
+                    const storedColSpanInfo = colspanMap?.get(id)?.[colDef.field];
+                    const colSpanInfo = storedColSpanInfo && !storedColSpanInfo.spannedByColSpan && storedColSpanInfo.cellProps.colSpan > 1
+                        ? mergeColSpan(columns, colIndex, storedColSpanInfo.cellProps.colSpan, columnWidths)
+                        : storedColSpanInfo;
+                    // A merged cell ends at the last column it covers: a right-pinned one is anchored by
+                    // that column's right edge, and it is the left-pinned edge cell if that column is.
+                    const lastCoveredField = colSpanInfo && !colSpanInfo.spannedByColSpan
+                        ? columns[colIndex + colSpanInfo.cellProps.colSpan - 1]?.field ?? colDef.field
+                        : colDef.field;
+                    const offsetField = pinnedPosition === 'right' ? lastCoveredField : colDef.field;
+                    const pinnedOffset = pinnedPosition ? pinnedPositions[offsetField] : undefined;
+                    const isPinnedEdge = (pinnedPosition === 'left' && lastCoveredField === pinnedEdges.lastLeft)
+                        || (pinnedPosition === 'right' && colDef.field === pinnedEdges.firstRight);
+                    const rowSpan = rowSpanningCaches?.spannedCells[id]?.[colDef.field];
+                    const isHiddenByRowSpan = rowSpanningCaches?.hiddenCells[id]?.[colDef.field] || false;
 
                     return (
                         <Cell
@@ -352,16 +446,18 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             colDef={colDef}
                             rowIndex={rowIndex}
                             colIndex={colIndex}
+                            ariaColIndex={systemColumnCount + colIndex + 1}
                             isSelected={isSelected}
                             onCellClick={onCellClick}
                             width={effectiveWidth}
                             pinnedPosition={pinnedPosition}
                             pinnedOffset={pinnedOffset}
+                            isPinnedEdge={isPinnedEdge}
 
                             isFocused={focusedCellField === colDef.field}
                             isFocusVisible={isFocusVisible}
 
-                            isEditable={colDef.editable}
+                            isEditable={isEditable}
                             isEditing={isEditing}
                             onCellEditStart={handleCellEditStart}
                             onEditStop={handleEditStopWrapper}
@@ -371,20 +467,24 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             rowSpan={rowSpan}
                             isHiddenByRowSpan={isHiddenByRowSpan}
                             rowMeta={rowMeta}
+                            valueError={valueError}
                         />
                     );
                 })}
             </div>
 
             { }
-            {hasDetailPanel && (
+            {showDetailPanel && (
                 <DetailPanel
+                    id={detailPanelId}
+                    colSpan={systemColumnCount + dataColumnCount}
                     row={row}
-                    rowId={row.id}
+                    rowId={id}
                     rowIndex={rowIndex}
                     content={detailPanelContent}
                     height={detailPanelHeight}
                     isExpanded={isDetailPanelExpanded}
+                    onHeightChange={onDetailPanelHeightChange}
                 />
             )}
         </>