@opencorestack/opengridx 2.0.4 → 3.0.0

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Row } from '../Row/Row';
+import { DetailPanelContent } from '../DetailPanel/DetailPanelContent';
+import { callGetDetailPanelHeight, resolveDetailPanelHeight } from '../../utils/detailPanel';
 import type {
     GridRowModel,
     GridRowId,
@@ -13,6 +15,14 @@ import type {
     GridRowMeta,
 } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
+import type { GridEditingState } from '../../hooks/features/useGridEditing';
+
+interface PinnedRowEditingHandlers {
+    editingCell: GridEditingState['editingCell'];
+    startCellEdit: (params: { id: GridRowId; field: string; value: unknown }) => void;
+    stopCellEdit: (params?: { cancel?: boolean; id?: GridRowId; field?: string }) => void;
+    setEditCellValue: (params: { id: GridRowId; field: string; value: unknown }) => void;
+}
 
 export interface GridPinnedRowsProps<R extends GridRowModel> {
     rows: R[];
@@ -21,6 +31,7 @@ export interface GridPinnedRowsProps<R extends GridRowModel> {
     selectedRowIds: Set<GridRowId>;
     checkboxSelection: boolean;
     onRowClick: (params: GridRowParams<R>) => void;
+    onRowDoubleClick?: (params: GridRowParams<R>) => void;
     onCellClick: (params: GridCellParams<R>) => void;
     onSelectionChange: (rowId: GridRowId, isSelected: boolean) => void;
     columnWidths: Record<string, number>;
@@ -31,15 +42,34 @@ export interface GridPinnedRowsProps<R extends GridRowModel> {
     getDetailPanelContent?: (params: GridDetailPanelParams<R>) => React.ReactNode;
     getDetailPanelHeight?: (params: GridDetailPanelParams<R>) => GridDetailPanelHeight;
     onDetailPanelToggle: (rowId: GridRowId) => void;
+    /** Receives the rendered height of `'auto'` detail panels. */
+    onDetailPanelHeightChange?: (rowId: GridRowId, height: number) => void;
     pinCheckboxColumn?: boolean;
     pinExpandColumn?: boolean;
-    focusedCell: { id: GridRowId; field: string } | null;
+    focusedCell: { id: GridRowId | null; field: string } | null;
     colspanMap?: Map<GridRowId, Record<string, CellColSpanInfo>>;
     rowSpanningCaches?: RowSpanningCaches;
     rowHeight: number;
     rowMetaMap: Map<GridRowId, GridRowMeta>;
+    /** Resolves a row's id; defaults to `row.id`. */
+    getRowId?: (row: R) => GridRowId;
+    /** Index of the first of these rows in the grid's renderable rows (top-pinned + centre + bottom-pinned). */
+    rowIndexOffset?: number;
+    /** `aria-rowindex` of the first of these rows. */
+    ariaRowIndexBase?: number;
+    columnIndexMap?: Map<string, number>;
+    /** Pinned rows are edited like any other row. */
+    editingHandlers?: PinnedRowEditingHandlers;
+    isCellEditable?: (params: GridCellParams<R>) => boolean;
+    /**
+     * Renders the (empty, non-draggable) reorder cell so the row lines up with the header and the
+     * centre rows. Pinned rows cannot be dragged.
+     */
+    rowReordering?: boolean;
 }
 
+const defaultGetRowId = <R extends GridRowModel>(row: R): GridRowId => row.id;
+
 export function GridPinnedRows<R extends GridRowModel>({
     rows,
     position,
@@ -47,6 +77,7 @@ export function GridPinnedRows<R extends GridRowModel>({
     selectedRowIds,
     checkboxSelection,
     onRowClick,
+    onRowDoubleClick,
     onCellClick,
     onSelectionChange,
     columnWidths,
@@ -57,6 +88,7 @@ export function GridPinnedRows<R extends GridRowModel>({
     getDetailPanelContent,
     getDetailPanelHeight,
     onDetailPanelToggle,
+    onDetailPanelHeightChange,
     pinCheckboxColumn,
     pinExpandColumn,
     focusedCell,
@@ -64,39 +96,61 @@ export function GridPinnedRows<R extends GridRowModel>({
     rowSpanningCaches,
     rowHeight,
     rowMetaMap,
+    getRowId = defaultGetRowId,
+    rowIndexOffset = 0,
+    ariaRowIndexBase,
+    columnIndexMap,
+    editingHandlers,
+    isCellEditable,
+    rowReordering = false,
 }: GridPinnedRowsProps<R>) {
     if (rows.length === 0) return null;
 
     return (
         <div className={`ogx__pinned-rows ogx__pinned-rows--${position}`} role="rowgroup">
-            {rows.map((row, index) => (
+            {rows.map((row, index) => {
+                const id = getRowId(row);
+                const rowIndex = rowIndexOffset + index;
+                return (
                 <Row<R>
-                    key={row.id}
+                    key={id}
                     row={row}
+                    rowId={id}
                     columns={columns}
-                    rowIndex={index}
-                    isSelected={selectedRowIds.has(row.id)}
+                    rowIndex={rowIndex}
+                    ariaRowIndex={ariaRowIndexBase !== undefined ? ariaRowIndexBase + index : undefined}
+                    columnIndexMap={columnIndexMap}
+                    isSelected={selectedRowIds.has(id)}
                     checkboxSelection={checkboxSelection}
                     onRowClick={onRowClick}
+                    onRowDoubleClick={onRowDoubleClick}
                     onCellClick={onCellClick}
                     onSelectionChange={onSelectionChange}
                     columnWidths={columnWidths}
                     pinnedColumns={pinnedColumns}
                     pinnedRows={pinnedRows}
                     hasDetailPanel={hasDetailPanel}
-                    isDetailPanelExpanded={expandedRowIds.has(row.id)}
-                    detailPanelContent={getDetailPanelContent ? getDetailPanelContent({ row, id: row.id, rowIndex: index }) : null}
-                    detailPanelHeight={getDetailPanelHeight?.({ row, id: row.id, rowIndex: index }) || 200}
+                    isDetailPanelExpanded={expandedRowIds.has(id)}
+                    detailPanelContent={expandedRowIds.has(id) && getDetailPanelContent ? <DetailPanelContent<R> getContent={getDetailPanelContent} params={{ row, id, rowIndex }} /> : null}
+                    detailPanelHeight={expandedRowIds.has(id) ? resolveDetailPanelHeight(callGetDetailPanelHeight(getDetailPanelHeight, { row, id, rowIndex })) : undefined}
+                    onDetailPanelHeightChange={onDetailPanelHeightChange}
                     onDetailPanelToggle={onDetailPanelToggle}
                     pinCheckboxColumn={pinCheckboxColumn}
                     pinExpandColumn={pinExpandColumn}
-                    focusedCellField={focusedCell?.id === row.id ? focusedCell.field : null}
+                    focusedCellField={focusedCell?.id === id ? focusedCell.field : null}
                     colspanMap={colspanMap}
                     rowSpanningCaches={rowSpanningCaches}
                     rowHeight={rowHeight}
-                    rowMeta={rowMetaMap.get(row.id)}
+                    rowMeta={rowMetaMap.get(id)}
+                    editingCell={editingHandlers?.editingCell}
+                    onEditStart={editingHandlers?.startCellEdit}
+                    onEditStop={editingHandlers?.stopCellEdit}
+                    onEditCellValueChange={editingHandlers?.setEditCellValue}
+                    isCellEditable={isCellEditable}
+                    rowReordering={rowReordering}
                 />
-            ))}
+                );
+            })}
         </div>
     );
 }

package/lib/components/DataGrid/GridStandaloneColumnPanel.tsx

@@ -1,67 +1,67 @@
 import React, { useState, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibilityPanel';
-import type { GridColDef, GridRowModel, GridColumnOrderChangeParams } from '../../types';
+import type { GridColDef, GridRowModel, GridColumnGroupingModel } from '../../types';
+import { canReorderWithinColumnGroups } from '../../utils/columnGroups';
+import { getViewportWidth } from '../../utils/viewport';
 
 export interface GridStandaloneColumnPanelProps<R extends GridRowModel> {
     isOpen: boolean;
     containerRef: React.RefObject<HTMLDivElement | null>;
     panelRef?: React.RefObject<HTMLDivElement | null>;
-    effectiveColumns: GridColDef<R>[];
+    /** Every column, in the grid's current column order. */
+    columns: GridColDef<R>[];
     columnVisibilityModel: Record<string, boolean>;
-    effectiveColumnOrder: string[];
-    columnOrder?: string[];
     disableColumnReorder: boolean;
     onClose: () => void;
     onColumnVisibilityChange: (model: Record<string, boolean>) => void;
-    onColumnOrderChange?: (params: GridColumnOrderChangeParams) => void;
-    setInternalColumnOrder: React.Dispatch<React.SetStateAction<string[]>>;
+    /** Moves `fromField` to the position of `toField` in the column order. */
+    onColumnMove: (fromField: string, toField: string) => void;
+    /** Restores the columns' definition order (the panel's Reset). */
+    onColumnOrderReset: () => void;
+    /** When set, a column can only be moved within its own column group. */
+    columnGroupingModel?: GridColumnGroupingModel;
+}
+
+interface PanelPlacement {
+    top: number;
+    right: number;
+    target: Element;
 }
 
 export function GridStandaloneColumnPanel<R extends GridRowModel>({
     isOpen,
     containerRef,
     panelRef,
-    effectiveColumns,
+    columns,
     columnVisibilityModel,
-    effectiveColumnOrder,
-    columnOrder,
     disableColumnReorder,
     onClose,
     onColumnVisibilityChange,
-    onColumnOrderChange,
-    setInternalColumnOrder,
+    onColumnMove,
+    onColumnOrderReset,
+    columnGroupingModel,
 }: GridStandaloneColumnPanelProps<R>) {
-    const [panelTop, setPanelTop] = useState<number>(16);
-    const [panelRight, setPanelRight] = useState<number>(16);
-    const [portalTarget, setPortalTarget] = useState<Element>(() => document.body);
+    // Resolved from the DOM after mount, never during render, so the grid renders on the server.
+    const [placement, setPlacement] = useState<PanelPlacement | null>(null);
 
     useLayoutEffect(() => {
         if (!isOpen || !containerRef.current) return;
         const rect = containerRef.current.getBoundingClientRect();
-        setPanelTop(rect.top + 8);
-        setPanelRight(window.innerWidth - rect.right + 8);
-        setPortalTarget(containerRef.current.closest('.ogx-theme-provider') || document.body);
+        setPlacement({
+            top: rect.top + 8,
+            right: getViewportWidth() - rect.right + 8,
+            target: containerRef.current.closest('.ogx-theme-provider') || document.body,
+        });
     }, [isOpen, containerRef]);
 
-    if (!isOpen) return null;
+    if (!isOpen || !placement) return null;
 
     const handleReorder = disableColumnReorder
         ? undefined
         : (fromField: string, toField: string) => {
-            const currentOrder = [...effectiveColumnOrder];
-            const fromIdx = currentOrder.indexOf(fromField);
-            const toIdx = currentOrder.indexOf(toField);
-            if (fromIdx === -1 || toIdx === -1) return;
-            const newOrder = [...currentOrder];
-            newOrder.splice(fromIdx, 1);
-            newOrder.splice(toIdx, 0, fromField);
-            if (!columnOrder) setInternalColumnOrder(newOrder);
-            onColumnOrderChange?.({
-                oldIndex: fromIdx,
-                targetIndex: toIdx,
-                column: effectiveColumns.find(c => c.field === fromField) as unknown as GridColDef,
-            });
+            if (!canReorderWithinColumnGroups(columnGroupingModel, fromField, toField)) return;
+            onColumnMove(fromField, toField);
         };
 
     return ReactDOM.createPortal(
@@ -69,13 +69,14 @@ export function GridStandaloneColumnPanel<R extends GridRowModel>({
             ref={panelRef}
             style={{
                 position: 'fixed',
-                top: panelTop,
-                right: panelRight,
+                top: placement.top,
+                right: placement.right,
                 zIndex: 9999,
                 display: 'inline-block',
             }}
         >
             <button
+                type="button"
                 onClick={onClose}
                 style={{
                     position: 'absolute',
@@ -99,9 +100,9 @@ export function GridStandaloneColumnPanel<R extends GridRowModel>({
                 aria-label="Close"
             >×</button>
             <ColumnVisibilityPanel<R>
-                columns={effectiveColumns}
+                columns={columns}
                 visibleColumns={new Set(
-                    effectiveColumns
+                    columns
                         .filter(col => columnVisibilityModel[col.field] !== false)
                         .map(col => col.field)
                 )}
@@ -110,17 +111,18 @@ export function GridStandaloneColumnPanel<R extends GridRowModel>({
                 }}
                 onShowAll={() => {
                     const next = { ...columnVisibilityModel };
-                    effectiveColumns.forEach(col => { if (col.hideable !== false) next[col.field] = true; });
+                    columns.forEach(col => { if (col.hideable !== false) next[col.field] = true; });
                     onColumnVisibilityChange(next);
                 }}
                 onHideAll={() => {
                     const next = { ...columnVisibilityModel };
-                    effectiveColumns.forEach(col => { if (col.hideable !== false) next[col.field] = false; });
+                    columns.forEach(col => { if (col.hideable !== false) next[col.field] = false; });
                     onColumnVisibilityChange(next);
                 }}
                 onColumnReorder={handleReorder}
+                onColumnOrderReset={disableColumnReorder ? undefined : onColumnOrderReset}
             />
         </div>,
-        portalTarget
+        placement.target
     );
 }

package/lib/components/DataGrid/GridToolbarSlot.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { GridToolbarSlotProps as GridToolbarSlotComponentProps } from '../../types';
+
+type ToolbarProps = GridToolbarSlotComponentProps & Record<string, unknown>;
+type ToolbarRender = (props: ToolbarProps) => React.ReactNode;
+
+interface GridToolbarSlotProps {
+    component: React.ComponentType<ToolbarProps>;
+    toolbarProps: ToolbarProps;
+}
+
+interface InlineToolbarProps {
+    render: ToolbarRender;
+    toolbarProps: ToolbarProps;
+}
+
+/** A plain function component: not a class, and not a memo / forwardRef / lazy object. */
+function isPlainFunctionComponent(component: React.ComponentType<ToolbarProps>): component is ToolbarRender {
+    if (typeof component !== 'function') return false;
+    const proto: unknown = component.prototype;
+    return !(typeof proto === 'object' && proto !== null && 'isReactComponent' in proto);
+}
+
+/**
+ * Runs a plain function toolbar inside its own fiber. The caller keys this element on the
+ * function's source, so the fiber (and every hook in it) survives when the consumer redefines
+ * the same toolbar inline on each render, but remounts when a different toolbar is passed.
+ */
+function InlineToolbar({ render, toolbarProps }: InlineToolbarProps) {
+    return <>{render(toolbarProps)}</>;
+}
+
+/**
+ * Renders `slots.toolbar`.
+ *
+ * Consumers often write the toolbar as an inline function inside their own component, which
+ * gives it a new identity on every render. Rendering that as `<Toolbar />` would remount it on
+ * every keystroke and lose GridToolbar's state (open panels, typed search). A plain function is
+ * therefore called from a wrapper keyed on its source text: the same code keeps its state, and
+ * a switch to a toolbar with different code (and different hooks) remounts cleanly.
+ *
+ * Class, `React.memo`, `forwardRef` and `lazy` components cannot be called as functions, so they
+ * are rendered as ordinary elements.
+ */
+export function GridToolbarSlot({ component, toolbarProps }: GridToolbarSlotProps) {
+    if (isPlainFunctionComponent(component)) {
+        return <InlineToolbar key={`fn:${component.toString()}`} render={component} toolbarProps={toolbarProps} />;
+    }
+    const Toolbar = component;
+    return <Toolbar {...toolbarProps} />;
+}

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Row } from '../Row/Row';
+import { DetailPanelContent } from '../DetailPanel/DetailPanelContent';
 import { SkeletonRow } from '../SkeletonRow';
-import { isRowPinned } from '../../utils/pinning';
+import { callGetDetailPanelHeight, resolveDetailPanelHeight } from '../../utils/detailPanel';
 import type {
     GridRowModel,
     GridRowId,
@@ -9,7 +10,6 @@ import type {
     GridRowParams,
     GridCellParams,
     GridColumnPinning,
-    GridRowPinning,
     GridDetailPanelParams,
     GridDetailPanelHeight,
     GridRowMeta,
@@ -22,7 +22,7 @@ import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/us
 interface RowEditingHandlers {
     editingCell: GridEditingState['editingCell'];
     startCellEdit: (params: { id: GridRowId; field: string; value: unknown }) => void;
-    stopCellEdit: (params?: { cancel?: boolean }) => void;
+    stopCellEdit: (params?: { cancel?: boolean; id?: GridRowId; field?: string }) => void;
     setEditCellValue: (params: { id: GridRowId; field: string; value: unknown }) => void;
 }
 
@@ -38,9 +38,9 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     hasDetailPanel: boolean;
     rowReordering: boolean;
     rowHeight: number;
-    pinnedRows?: GridRowPinning;
     selectedRowIds: Set<GridRowId>;
     onRowClick: (params: GridRowParams<R>) => void;
+    onRowDoubleClick?: (params: GridRowParams<R>) => void;
     onCellClick: (params: GridCellParams<R>) => void;
     onSelectionChange: (rowId: GridRowId, isSelected: boolean) => void;
     columnWidths: Record<string, number>;
@@ -49,11 +49,14 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     getDetailPanelContent?: (params: GridDetailPanelParams<R>) => React.ReactNode;
     getDetailPanelHeight?: (params: GridDetailPanelParams<R>) => GridDetailPanelHeight;
     onDetailPanelToggle: (rowId: GridRowId) => void;
+    /** Receives the rendered height of `'auto'` detail panels. */
+    onDetailPanelHeightChange?: (rowId: GridRowId, height: number) => void;
     pinCheckboxColumn?: boolean;
     pinExpandColumn?: boolean;
     rowReorderHandlers: UseRowReorderReturn;
     editingHandlers: RowEditingHandlers;
-    focusedCell: { id: GridRowId; field: string } | null;
+    isCellEditable?: (params: GridCellParams<R>) => boolean;
+    focusedCell: { id: GridRowId | null; field: string } | null;
     colspanMap?: Map<GridRowId, Record<string, CellColSpanInfo>>;
     rowSpanningCaches?: RowSpanningCaches;
     paginationMode: 'client' | 'server' | 'infinite';
@@ -61,7 +64,13 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     sortedUnpinnedRowCount: number;
     infiniteScrollSkeletonCount: number;
     unpinnedRowsLength: number;
+    /** Last center row index in the render window: skeleton rows render only once it reaches the end of the data. */
+    lastRenderedRowIndex: number;
     rowMetaMap: Map<GridRowId, GridRowMeta>;
+    loadingOverlay?: React.ReactNode;
+    /** Added to a row's rowIndex to get its `aria-rowindex` (header rows and earlier pages included). */
+    ariaRowIndexOffset?: number;
+    columnIndexMap?: Map<string, number>;
 }
 
 export function GridVirtualRows<R extends GridRowModel>({
@@ -76,9 +85,9 @@ export function GridVirtualRows<R extends GridRowModel>({
     hasDetailPanel,
     rowReordering,
     rowHeight,
-    pinnedRows,
     selectedRowIds,
     onRowClick,
+    onRowDoubleClick,
     onCellClick,
     onSelectionChange,
     columnWidths,
@@ -87,10 +96,12 @@ export function GridVirtualRows<R extends GridRowModel>({
     getDetailPanelContent,
     getDetailPanelHeight,
     onDetailPanelToggle,
+    onDetailPanelHeightChange,
     pinCheckboxColumn,
     pinExpandColumn,
     rowReorderHandlers,
     editingHandlers,
+    isCellEditable,
     focusedCell,
     colspanMap,
     rowSpanningCaches,
@@ -99,7 +110,11 @@ export function GridVirtualRows<R extends GridRowModel>({
     sortedUnpinnedRowCount,
     infiniteScrollSkeletonCount,
     unpinnedRowsLength,
+    lastRenderedRowIndex,
     rowMetaMap,
+    loadingOverlay,
+    ariaRowIndexOffset,
+    columnIndexMap,
 }: GridVirtualRowsProps<R>) {
     const skeletonColumns: GridColDef<R>[] = baseColumns.length > 0
         ? baseColumns
@@ -117,11 +132,12 @@ export function GridVirtualRows<R extends GridRowModel>({
             })) as GridColDef<R>[];
         })();
 
-    const centerRows = visibleRows
-        .filter(({ row }) => !isRowPinned(row.id, pinnedRows))
-        .filter((item, index, self) =>
-            index === self.findIndex(t => t.row.id === item.row.id)
-        );
+    // Pinned rows render in GridPinnedRows; ids are already unique (useGridVisibleRows de-duplicates).
+    const centerRows = visibleRows.filter(item => !item.pinned);
+    // Placeholders stand in for the next page, after the last data row: only draw them once the
+    // render window reaches it, or they would follow the window into the middle of the data.
+    const showInfiniteSkeletons = paginationMode === 'infinite' && dataSourceLoading && sortedUnpinnedRowCount > 0
+        && lastRenderedRowIndex >= unpinnedRowsLength - 1;
 
     return (
         <div
@@ -134,7 +150,9 @@ export function GridVirtualRows<R extends GridRowModel>({
                 style={{ transform: `translateY(${offsetTop}px)` }}
                 role="rowgroup"
             >
-                {effectiveLoading && visibleRows.length === 0 ? (
+                {effectiveLoading && visibleRows.length === 0 && loadingOverlay ? (
+                    <div className="ogx__loading-overlay" style={{ width: viewportWidth || undefined }}>{loadingOverlay}</div>
+                ) : effectiveLoading && visibleRows.length === 0 ? (
                     Array.from({ length: 10 }).map((_, index) => (
                         <SkeletonRow
                             key={`skeleton-${index}`}
@@ -146,48 +164,53 @@ export function GridVirtualRows<R extends GridRowModel>({
                         />
                     ))
                 ) : (
-                    centerRows.map(({ row, rowIndex: actualIndex }) => (
+                    centerRows.map(({ row, id, rowIndex: actualIndex }) => (
                         <Row<R>
-                            key={row.id}
+                            key={id}
                             row={row}
+                            rowId={id}
                             columns={virtualColumns}
                             rowIndex={actualIndex}
-                            isSelected={selectedRowIds.has(row.id)}
+                            ariaRowIndex={ariaRowIndexOffset !== undefined ? actualIndex + ariaRowIndexOffset : undefined}
+                            columnIndexMap={columnIndexMap}
+                            isSelected={selectedRowIds.has(id)}
                             checkboxSelection={checkboxSelection}
                             onRowClick={onRowClick}
+                            onRowDoubleClick={onRowDoubleClick}
                             onCellClick={onCellClick}
                             onSelectionChange={onSelectionChange}
                             columnWidths={columnWidths}
                             pinnedColumns={pinnedColumns}
-                            pinnedRows={pinnedRows}
                             hasDetailPanel={hasDetailPanel}
-                            isDetailPanelExpanded={expandedRowIds.has(row.id)}
-                            detailPanelContent={getDetailPanelContent ? getDetailPanelContent({ row, id: row.id, rowIndex: actualIndex }) : null}
-                            detailPanelHeight={getDetailPanelHeight?.({ row, id: row.id, rowIndex: actualIndex }) || 200}
+                            isDetailPanelExpanded={expandedRowIds.has(id)}
+                            detailPanelContent={expandedRowIds.has(id) && getDetailPanelContent ? <DetailPanelContent<R> getContent={getDetailPanelContent} params={{ row, id, rowIndex: actualIndex }} /> : null}
+                            detailPanelHeight={expandedRowIds.has(id) ? resolveDetailPanelHeight(callGetDetailPanelHeight(getDetailPanelHeight, { row, id, rowIndex: actualIndex })) : undefined}
+                            onDetailPanelHeightChange={onDetailPanelHeightChange}
                             onDetailPanelToggle={onDetailPanelToggle}
                             pinCheckboxColumn={pinCheckboxColumn}
                             pinExpandColumn={pinExpandColumn}
                             rowReordering={rowReordering}
-                            onDragStart={rowReorderHandlers.onDragStart}
+                            onDragStart={rowReorderHandlers.canReorderRow(id) ? rowReorderHandlers.onDragStart : undefined}
                             onDragOver={rowReorderHandlers.onDragOver}
                             onDragEnd={rowReorderHandlers.onDragEnd}
                             onDrop={rowReorderHandlers.onDrop}
-                            isDragging={rowReorderHandlers.draggedRowId === row.id}
-                            isDragOver={rowReorderHandlers.dragOverRowId === row.id}
+                            isDragging={rowReorderHandlers.draggedRowId === id}
+                            isDragOver={rowReorderHandlers.dragOverRowId === id}
                             editingCell={editingHandlers.editingCell}
                             onEditStart={editingHandlers.startCellEdit}
                             onEditStop={editingHandlers.stopCellEdit}
                             onEditCellValueChange={editingHandlers.setEditCellValue}
-                            focusedCellField={focusedCell != null && focusedCell.id === row.id ? focusedCell.field : null}
+                            isCellEditable={isCellEditable}
+                            focusedCellField={focusedCell != null && focusedCell.id === id ? focusedCell.field : null}
                             colspanMap={colspanMap}
                             rowSpanningCaches={rowSpanningCaches}
                             rowHeight={rowHeight}
-                            rowMeta={rowMetaMap.get(row.id)}
+                            rowMeta={rowMetaMap.get(id)}
                         />
                     ))
                 )}
 
-                {paginationMode === 'infinite' && dataSourceLoading && sortedUnpinnedRowCount > 0 && (
+                {showInfiniteSkeletons && (
                     <div className="ogx__skeleton-group">
                         {Array.from({ length: infiniteScrollSkeletonCount }).map((_, i) => (
                             <Row<R>

package/lib/components/DetailPanel/DetailPanel.css

@@ -28,9 +28,3 @@
 .ogx__detail-panel {
   animation: detailPanelExpand 0.2s ease-out;
 }
-@media (prefers-color-scheme: dark) {
-  .ogx__detail-panel {
-    background: var(--ogx-color-gray-800);
-    border-color: var(--ogx-color-gray-700);
-  }
-}

package/lib/components/DetailPanel/DetailPanel.tsx

@@ -10,23 +10,52 @@ export interface DetailPanelProps<R extends GridRowModel = GridRowModel> {
     content: React.ReactNode;
     height: GridDetailPanelHeight;
     isExpanded: boolean;
+    /** Referenced by the expand cell's `aria-controls`. */
+    id?: string;
+    /** Number of grid columns the panel spans (`aria-colspan` of its cell). */
+    colSpan?: number;
+    /**
+     * Called with the panel's rendered height when `height` is `'auto'`: once when it mounts and
+     * again whenever its size changes, so the grid can lay the rows below it out correctly.
+     */
+    onHeightChange?: (rowId: GridRowId, height: number) => void;
 }
 
 export function DetailPanel<R extends GridRowModel = GridRowModel>(props: DetailPanelProps<R>) {
-    const { content, height, isExpanded } = props;
+    const { rowId, content, height, isExpanded, onHeightChange, id, colSpan } = props;
+    const panelRef = React.useRef<HTMLDivElement>(null);
+    const isAuto = height === 'auto';
+
+    // Measured before paint, so the grid re-lays out rows under the panel before they are shown.
+    React.useLayoutEffect(() => {
+        const el = panelRef.current;
+        if (!el || !isAuto || !isExpanded || !onHeightChange) return;
+        const report = () => {
+            // Not laid out (hidden ancestor, or no layout engine): keep the previous height.
+            if (el.getClientRects().length === 0) return;
+            onHeightChange(rowId, el.offsetHeight);
+        };
+        report();
+        if (typeof ResizeObserver === 'undefined') return;
+        const observer = new ResizeObserver(report);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [isAuto, isExpanded, onHeightChange, rowId]);
 
     if (!isExpanded) {
         return null;
     }
 
     const style: React.CSSProperties = {
-        height: height === 'auto' ? 'auto' : `${height}px`,
-        overflow: height === 'auto' ? 'visible' : 'auto'
+        height: isAuto ? 'auto' : `${height}px`,
+        overflow: isAuto ? 'visible' : 'auto'
     };
 
+    // A detail panel sits between rows of the grid, so it is exposed as a row with one cell
+    // spanning every column (a bare div is not allowed inside role="rowgroup").
     return (
-        <div className="ogx__detail-panel" style={style}>
-            <div className="ogx__detail-panel-content">
+        <div ref={panelRef} className="ogx__detail-panel" style={style} role="row" id={id}>
+            <div className="ogx__detail-panel-content" role="gridcell" aria-colspan={colSpan}>
                 {content}
             </div>
         </div>

package/lib/components/DetailPanel/DetailPanelContent.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CellErrorBoundary } from '../Cell/CellErrorBoundary';
+import type { GridDetailPanelParams, GridRowModel } from '../../types';
+
+interface DetailPanelContentProps<R extends GridRowModel> {
+    getContent: (params: GridDetailPanelParams<R>) => React.ReactNode;
+    params: GridDetailPanelParams<R>;
+}
+
+/**
+ * Calls `getDetailPanelContent` while rendering, below an error boundary, so a throwing callback
+ * shows an error marker in that one panel instead of unmounting the grid. The row lists render it
+ * only for an expanded row, so the callback never runs for collapsed rows.
+ */
+export function DetailPanelContent<R extends GridRowModel>({ getContent, params }: DetailPanelContentProps<R>) {
+    return <CellErrorBoundary field="detail panel" renderFn={() => getContent(params)} resetKey={params.row} />;
+}