@opencorestack/opengridx 0.1.9 → 1.0.1

package/lib/components/DataGrid/GridAggregationFooter.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { formatAggregationValue } from '../../hooks/features/useAggregation';
+import type { GridColDef, GridAggregationModel, GridAggregationResult } from '../../types';
+
+interface GridAggregationFooterProps {
+    columns: GridColDef[];
+    aggregationModel: GridAggregationModel;
+    aggregationResult: GridAggregationResult;
+    columnWidths: Record<string, number>;
+    rowHeight: number;
+    checkboxSelection: boolean;
+    hasDetailPanel: boolean;
+    rowReordering: boolean;
+}
+
+export function GridAggregationFooter({
+    columns,
+    aggregationModel,
+    aggregationResult,
+    columnWidths,
+    rowHeight,
+    checkboxSelection,
+    hasDetailPanel,
+    rowReordering,
+}: GridAggregationFooterProps) {
+    return (
+        <div
+            className="ogx__aggregation-footer"
+            role="row"
+            aria-label="Aggregation totals"
+            aria-live="polite"
+            style={{ minHeight: `${rowHeight}px` }}
+        >
+            {checkboxSelection && <div style={{ width: 48, flexShrink: 0 }} />}
+            {hasDetailPanel  && <div style={{ width: 48, flexShrink: 0 }} />}
+            {rowReordering   && <div style={{ width: 48, flexShrink: 0 }} />}
+
+            {columns.map((col) => {
+                const fnName = (aggregationModel as Record<string, string>)[col.field];
+                const rawValue = aggregationResult[col.field];
+                const colWidth = columnWidths[col.field] ?? (typeof col.width === 'number' ? col.width : 120);
+
+                return (
+                    <div
+                        key={col.field}
+                        className="ogx__aggregation-cell"
+                        role="gridcell"
+                        style={{
+                            width: colWidth,
+                            minWidth: colWidth,
+                            maxWidth: colWidth,
+                            textAlign: (col.align as React.CSSProperties['textAlign']) || 'left',
+                        }}
+                    >
+                        {fnName ? (
+                            <>
+                                <span className="ogx__aggregation-label">{fnName}</span>
+                                <span className="ogx__aggregation-value">
+                                    {formatAggregationValue(rawValue, fnName)}
+                                </span>
+                            </>
+                        ) : null}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/lib/components/DataGrid/GridEmptyState.tsx

@@ -0,0 +1,16 @@
+interface GridEmptyStateProps {
+    noRowsLabel: string;
+    width: number;
+}
+
+export function GridEmptyState({ noRowsLabel, width }: GridEmptyStateProps) {
+    return (
+        <div className="ogx__empty" style={{ width }}>
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                <rect x="3" y="3" width="18" height="18" rx="2" />
+                <path d="M3 9h18M9 21V9" />
+            </svg>
+            <span>{noRowsLabel}</span>
+        </div>
+    );
+}

package/lib/components/DataGrid/GridErrorOverlay.tsx

@@ -0,0 +1,33 @@
+interface GridErrorOverlayProps {
+    error: unknown;
+}
+
+export function GridErrorOverlay({ error }: GridErrorOverlayProps) {
+    if (!error) return null;
+    const message = error instanceof Error
+        ? error.message
+        : typeof error === 'string'
+            ? error
+            : 'An unexpected error occurred while loading the data.';
+    return (
+        <div className="ogx-error-overlay" aria-live="assertive" role="alert">
+            <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--ogx-color-error)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" y1="8" x2="12" y2="12" />
+                <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            <div className="ogx-error-overlay__title">
+                Oops! Something went wrong
+            </div>
+            <div className="ogx-error-overlay__message">
+                {message}
+            </div>
+            <button
+                onClick={() => window.location.reload()}
+                className="ogx-button ogx-button--primary"
+            >
+                Retry
+            </button>
+        </div>
+    );
+}

package/lib/components/DataGrid/GridListView.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { Pagination } from '../Pagination/Pagination';
+import { ListViewRow } from '../ListView/ListViewRow';
+import type {
+    GridRowModel,
+    GridRowId,
+    GridRowParams,
+    GridListViewColDef,
+    GridPaginationModel,
+    GridDataSource,
+} from '../../types';
+
+export interface GridListViewProps<R extends GridRowModel> {
+    ariaLabel?: string;
+    allRenderableRows: R[];
+    filteredRows: R[];
+    pagination: boolean;
+    effectivePaginationModel: GridPaginationModel;
+    pageSizeOptions: number[];
+    selectedRowIds: Set<GridRowId>;
+    listViewColumn: GridListViewColDef<R>;
+    noRowsLabel: string;
+    rowHeight: number;
+    checkboxSelection: boolean;
+    paginationMode: 'client' | 'server' | 'infinite';
+    dataSource?: GridDataSource<R>;
+    serverRowCount: number;
+    paginationSlot?: React.ComponentType<Record<string, unknown>>;
+    paginationSlotProps?: Record<string, unknown>;
+    onRowClick: (params: GridRowParams<R>) => void;
+    onSelectionChange: (rowId: GridRowId, isSelected: boolean) => void;
+    onPaginationModelChange: (model: GridPaginationModel) => void;
+}
+
+export function GridListView<R extends GridRowModel>({
+    ariaLabel,
+    allRenderableRows,
+    filteredRows,
+    pagination,
+    effectivePaginationModel,
+    pageSizeOptions,
+    selectedRowIds,
+    listViewColumn,
+    noRowsLabel,
+    rowHeight,
+    checkboxSelection,
+    paginationMode,
+    dataSource,
+    serverRowCount,
+    paginationSlot,
+    paginationSlotProps,
+    onRowClick,
+    onSelectionChange,
+    onPaginationModelChange,
+}: GridListViewProps<R>) {
+    const PaginationComponent = paginationSlot || Pagination;
+
+    const totalRowCount = (paginationMode === 'server' && dataSource)
+        ? (serverRowCount || 0)
+        : filteredRows.length;
+
+    return (
+        <div
+            className="ogx-list-view"
+            role="grid"
+            aria-label={ariaLabel || 'Data grid list view'}
+            aria-rowcount={allRenderableRows.length + 1}
+        >
+            <div className="ogx-list-view__toolbar">
+                <span>
+                    {filteredRows.length} {filteredRows.length === 1 ? 'item' : 'items'}
+                    {pagination ? ` · page ${effectivePaginationModel.page + 1} of ${Math.ceil(filteredRows.length / effectivePaginationModel.pageSize) || 1}` : ''}
+                    {selectedRowIds.size > 0 ? ` · ${selectedRowIds.size} selected` : ''}
+                </span>
+            </div>
+
+            <div className="ogx-list-view__rows">
+                {allRenderableRows.length === 0 ? (
+                    <div className="ogx-list-view__empty" aria-live="polite" role="status">
+                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                            <rect x="3" y="3" width="18" height="18" rx="2" />
+                            <path d="M3 9h18M9 21V9" />
+                        </svg>
+                        {noRowsLabel}
+                    </div>
+                ) : (
+                    allRenderableRows.map((row, idx) => (
+                        <ListViewRow<R>
+                            key={row.id}
+                            row={row}
+                            rowIndex={idx}
+                            listViewColumn={listViewColumn}
+                            isSelected={selectedRowIds.has(row.id)}
+                            checkboxSelection={checkboxSelection}
+                            rowHeight={rowHeight}
+                            onRowClick={(r) => onRowClick({ row: r, id: r.id, rowIndex: idx })}
+                            onSelectionChange={onSelectionChange}
+                        />
+                    ))
+                )}
+            </div>
+
+            {pagination && (
+                <PaginationComponent
+                    page={effectivePaginationModel.page}
+                    pageSize={effectivePaginationModel.pageSize}
+                    rowCount={totalRowCount}
+                    pageSizeOptions={pageSizeOptions}
+                    onPageChange={(newPage: number) => onPaginationModelChange({ ...effectivePaginationModel, page: newPage })}
+                    onPageSizeChange={(newPageSize: number) => onPaginationModelChange({ ...effectivePaginationModel, pageSize: newPageSize, page: 0 })}
+                    {...paginationSlotProps}
+                />
+            )}
+        </div>
+    );
+}

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Row } from '../Row/Row';
+import type {
+    GridRowModel,
+    GridRowId,
+    GridColDef,
+    GridRowParams,
+    GridCellParams,
+    GridColumnPinning,
+    GridRowPinning,
+    GridDetailPanelParams,
+    GridDetailPanelHeight,
+} from '../../types';
+import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
+
+export interface GridPinnedRowsProps<R extends GridRowModel> {
+    rows: R[];
+    position: 'top' | 'bottom';
+    columns: GridColDef<R>[];
+    selectedRowIds: Set<GridRowId>;
+    checkboxSelection: boolean;
+    onRowClick: (params: GridRowParams<R>) => void;
+    onCellClick: (params: GridCellParams<R>) => void;
+    onSelectionChange: (rowId: GridRowId, isSelected: boolean) => void;
+    columnWidths: Record<string, number>;
+    pinnedColumns: GridColumnPinning;
+    pinnedRows?: GridRowPinning;
+    hasDetailPanel: boolean;
+    expandedRowIds: Set<GridRowId>;
+    getDetailPanelContent?: (params: GridDetailPanelParams<R>) => React.ReactNode;
+    getDetailPanelHeight?: (params: GridDetailPanelParams<R>) => GridDetailPanelHeight;
+    onDetailPanelToggle: (rowId: GridRowId) => void;
+    pinCheckboxColumn?: boolean;
+    pinExpandColumn?: boolean;
+    focusedCell: { id: GridRowId; field: string } | null;
+    colspanMap?: Map<GridRowId, Record<string, CellColSpanInfo>>;
+    rowSpanningCaches?: RowSpanningCaches;
+    rowHeight: number;
+}
+
+export function GridPinnedRows<R extends GridRowModel>({
+    rows,
+    position,
+    columns,
+    selectedRowIds,
+    checkboxSelection,
+    onRowClick,
+    onCellClick,
+    onSelectionChange,
+    columnWidths,
+    pinnedColumns,
+    pinnedRows,
+    hasDetailPanel,
+    expandedRowIds,
+    getDetailPanelContent,
+    getDetailPanelHeight,
+    onDetailPanelToggle,
+    pinCheckboxColumn,
+    pinExpandColumn,
+    focusedCell,
+    colspanMap,
+    rowSpanningCaches,
+    rowHeight,
+}: GridPinnedRowsProps<R>) {
+    if (rows.length === 0) return null;
+
+    return (
+        <div className={`ogx__pinned-rows ogx__pinned-rows--${position}`} role="rowgroup">
+            {rows.map((row, index) => (
+                <Row<R>
+                    key={row.id}
+                    row={row}
+                    columns={columns}
+                    rowIndex={index}
+                    isSelected={selectedRowIds.has(row.id)}
+                    checkboxSelection={checkboxSelection}
+                    onRowClick={onRowClick}
+                    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}
+                    onDetailPanelToggle={onDetailPanelToggle}
+                    pinCheckboxColumn={pinCheckboxColumn}
+                    pinExpandColumn={pinExpandColumn}
+                    focusedCellField={focusedCell?.id === row.id ? focusedCell.field : null}
+                    colspanMap={colspanMap}
+                    rowSpanningCaches={rowSpanningCaches}
+                    rowHeight={rowHeight}
+                />
+            ))}
+        </div>
+    );
+}

package/lib/components/DataGrid/GridStandaloneColumnPanel.tsx

@@ -0,0 +1,124 @@
+import React, { useState, useLayoutEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibilityPanel';
+import type { GridColDef, GridRowModel, GridColumnOrderChangeParams } from '../../types';
+
+export interface GridStandaloneColumnPanelProps<R extends GridRowModel> {
+    isOpen: boolean;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    effectiveColumns: 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[]>>;
+}
+
+export function GridStandaloneColumnPanel<R extends GridRowModel>({
+    isOpen,
+    containerRef,
+    effectiveColumns,
+    columnVisibilityModel,
+    effectiveColumnOrder,
+    columnOrder,
+    disableColumnReorder,
+    onClose,
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+    setInternalColumnOrder,
+}: GridStandaloneColumnPanelProps<R>) {
+    const [panelTop, setPanelTop] = useState<number>(16);
+    const [panelRight, setPanelRight] = useState<number>(16);
+    const [portalTarget, setPortalTarget] = useState<Element>(() => document.body);
+
+    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);
+    }, [isOpen, containerRef]);
+
+    if (!isOpen) 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,
+            });
+        };
+
+    return ReactDOM.createPortal(
+        <div
+            id="ogx-standalone-col-panel"
+            style={{
+                position: 'fixed',
+                top: panelTop,
+                right: panelRight,
+                zIndex: 9999,
+                display: 'inline-block',
+            }}
+        >
+            <button
+                onClick={onClose}
+                style={{
+                    position: 'absolute',
+                    top: -12,
+                    right: -12,
+                    width: 24,
+                    height: 24,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#334155',
+                    color: '#fff',
+                    border: 'none',
+                    borderRadius: '50%',
+                    cursor: 'pointer',
+                    fontSize: 14,
+                    lineHeight: 1,
+                    zIndex: 1,
+                    boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
+                }}
+                aria-label="Close"
+            >×</button>
+            <ColumnVisibilityPanel<R>
+                columns={effectiveColumns}
+                visibleColumns={new Set(
+                    effectiveColumns
+                        .filter(col => columnVisibilityModel[col.field] !== false)
+                        .map(col => col.field)
+                )}
+                onVisibilityChange={(field, isVisible) => {
+                    onColumnVisibilityChange({ ...columnVisibilityModel, [field]: isVisible });
+                }}
+                onShowAll={() => {
+                    const next = { ...columnVisibilityModel };
+                    effectiveColumns.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; });
+                    onColumnVisibilityChange(next);
+                }}
+                onColumnReorder={handleReorder}
+            />
+        </div>,
+        portalTarget
+    );
+}

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import { Row } from '../Row/Row';
+import { SkeletonRow } from '../SkeletonRow';
+import { isRowPinned } from '../../utils/pinning';
+import type {
+    GridRowModel,
+    GridRowId,
+    GridColDef,
+    GridRowParams,
+    GridCellParams,
+    GridColumnPinning,
+    GridRowPinning,
+    GridDetailPanelParams,
+    GridDetailPanelHeight,
+} from '../../types';
+import type { GridVisibleRow } from '../../hooks/core/useGridVisibleRows';
+import type { UseRowReorderReturn } from '../../hooks/useRowReorder';
+import type { GridEditingState } from '../../hooks/features/useGridEditing';
+import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
+
+interface RowEditingHandlers {
+    editingCell: GridEditingState['editingCell'];
+    startCellEdit: (params: { id: GridRowId; field: string; value: unknown }) => void;
+    stopCellEdit: (params?: { cancel?: boolean }) => void;
+    setEditCellValue: (params: { id: GridRowId; field: string; value: unknown }) => void;
+}
+
+export interface GridVirtualRowsProps<R extends GridRowModel> {
+    virtualContainerHeight: number;
+    offsetTop: number;
+    effectiveLoading: boolean;
+    visibleRows: GridVisibleRow<R>[];
+    baseColumns: GridColDef<R>[];
+    virtualColumns: GridColDef<R>[];
+    viewportWidth: number;
+    checkboxSelection: boolean;
+    hasDetailPanel: boolean;
+    rowReordering: boolean;
+    rowHeight: number;
+    pinnedRows?: GridRowPinning;
+    selectedRowIds: Set<GridRowId>;
+    onRowClick: (params: GridRowParams<R>) => void;
+    onCellClick: (params: GridCellParams<R>) => void;
+    onSelectionChange: (rowId: GridRowId, isSelected: boolean) => void;
+    columnWidths: Record<string, number>;
+    pinnedColumns: GridColumnPinning;
+    expandedRowIds: Set<GridRowId>;
+    getDetailPanelContent?: (params: GridDetailPanelParams<R>) => React.ReactNode;
+    getDetailPanelHeight?: (params: GridDetailPanelParams<R>) => GridDetailPanelHeight;
+    onDetailPanelToggle: (rowId: GridRowId) => void;
+    pinCheckboxColumn?: boolean;
+    pinExpandColumn?: boolean;
+    rowReorderHandlers: UseRowReorderReturn;
+    editingHandlers: RowEditingHandlers;
+    focusedCell: { id: GridRowId; field: string } | null;
+    colspanMap?: Map<GridRowId, Record<string, CellColSpanInfo>>;
+    rowSpanningCaches?: RowSpanningCaches;
+    paginationMode: 'client' | 'server' | 'infinite';
+    dataSourceLoading: boolean;
+    sortedUnpinnedRowCount: number;
+    infiniteScrollSkeletonCount: number;
+    unpinnedRowsLength: number;
+}
+
+export function GridVirtualRows<R extends GridRowModel>({
+    virtualContainerHeight,
+    offsetTop,
+    effectiveLoading,
+    visibleRows,
+    baseColumns,
+    virtualColumns,
+    viewportWidth,
+    checkboxSelection,
+    hasDetailPanel,
+    rowReordering,
+    rowHeight,
+    pinnedRows,
+    selectedRowIds,
+    onRowClick,
+    onCellClick,
+    onSelectionChange,
+    columnWidths,
+    pinnedColumns,
+    expandedRowIds,
+    getDetailPanelContent,
+    getDetailPanelHeight,
+    onDetailPanelToggle,
+    pinCheckboxColumn,
+    pinExpandColumn,
+    rowReorderHandlers,
+    editingHandlers,
+    focusedCell,
+    colspanMap,
+    rowSpanningCaches,
+    paginationMode,
+    dataSourceLoading,
+    sortedUnpinnedRowCount,
+    infiniteScrollSkeletonCount,
+    unpinnedRowsLength,
+}: GridVirtualRowsProps<R>) {
+    const skeletonColumns: GridColDef<R>[] = baseColumns.length > 0
+        ? baseColumns
+        : (() => {
+            const availableWidth = (viewportWidth || 1000) -
+                (checkboxSelection ? 48 : 0) -
+                (hasDetailPanel ? 48 : 0) -
+                (rowReordering ? 48 : 0);
+            const columnWidth = 150;
+            const columnCount = Math.max(1, Math.ceil(availableWidth / columnWidth));
+            return Array.from({ length: columnCount }, (_, i) => ({
+                field: `placeholder_${i}`,
+                headerName: '',
+                width: columnWidth,
+            })) 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)
+        );
+
+    return (
+        <div
+            className="ogx__virtual-container"
+            style={{ height: `${virtualContainerHeight}px` }}
+            role="presentation"
+        >
+            <div
+                className="ogx__rows"
+                style={{ transform: `translateY(${offsetTop}px)` }}
+                role="rowgroup"
+            >
+                {effectiveLoading && visibleRows.length === 0 ? (
+                    Array.from({ length: 10 }).map((_, index) => (
+                        <SkeletonRow
+                            key={`skeleton-${index}`}
+                            columns={skeletonColumns as unknown as GridColDef[]}
+                            rowHeight={rowHeight}
+                            checkboxSelection={checkboxSelection}
+                            hasDetailPanel={hasDetailPanel}
+                            rowReordering={rowReordering}
+                        />
+                    ))
+                ) : (
+                    centerRows.map(({ row, rowIndex: actualIndex }) => (
+                        <Row<R>
+                            key={row.id}
+                            row={row}
+                            columns={virtualColumns}
+                            rowIndex={actualIndex}
+                            isSelected={selectedRowIds.has(row.id)}
+                            checkboxSelection={checkboxSelection}
+                            onRowClick={onRowClick}
+                            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}
+                            onDetailPanelToggle={onDetailPanelToggle}
+                            pinCheckboxColumn={pinCheckboxColumn}
+                            pinExpandColumn={pinExpandColumn}
+                            rowReordering={rowReordering}
+                            onDragStart={rowReorderHandlers.onDragStart}
+                            onDragOver={rowReorderHandlers.onDragOver}
+                            onDragEnd={rowReorderHandlers.onDragEnd}
+                            onDrop={rowReorderHandlers.onDrop}
+                            isDragging={rowReorderHandlers.draggedRowId === row.id}
+                            isDragOver={rowReorderHandlers.dragOverRowId === row.id}
+                            editingCell={editingHandlers.editingCell}
+                            onEditStart={editingHandlers.startCellEdit}
+                            onEditStop={editingHandlers.stopCellEdit}
+                            onEditCellValueChange={editingHandlers.setEditCellValue}
+                            focusedCellField={focusedCell != null && focusedCell.id === row.id ? focusedCell.field : null}
+                            colspanMap={colspanMap}
+                            rowSpanningCaches={rowSpanningCaches}
+                            rowHeight={rowHeight}
+                        />
+                    ))
+                )}
+
+                {paginationMode === 'infinite' && dataSourceLoading && sortedUnpinnedRowCount > 0 && (
+                    <div className="ogx__skeleton-group">
+                        {Array.from({ length: infiniteScrollSkeletonCount }).map((_, i) => (
+                            <Row<R>
+                                key={`__skeleton_${i}__`}
+                                row={{ id: `__skeleton_${i}__`, _isSkeleton: true } as unknown as R}
+                                columns={virtualColumns}
+                                rowIndex={unpinnedRowsLength + i}
+                                rowHeight={rowHeight}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}