@opencorestack/opengridx 1.0.7 → 1.1.0

package/docs/API_REFERENCE.md

@@ -143,6 +143,12 @@ The main component for displaying and interacting with data.
 | `className` | `string` | — | Additional CSS class applied to the outermost grid wrapper element. |
 | `style` | `React.CSSProperties` | — | Inline styles applied to the grid wrapper element. |
 
+#### Localization
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `localeText` | `GridLocaleText` | — | Override user-visible strings in the Pagination component. See `GridLocaleText` for the full interface. |
+
 #### Imperative Ref
 
 | Prop | Type | Default | Description |
@@ -564,6 +570,35 @@ interface GridPivotModel {
 }
 ```
 
+### `GridLocaleText`
+
+Override user-visible strings in the Pagination component. All fields are optional.
+
+```typescript
+interface GridLocaleText {
+  paginationRowsPerPage?: string;
+  paginationOf?: (from: number, to: number, count: number) => string;
+  paginationPage?: (page: number, pageCount: number) => string;
+  noRowsLabel?: string;
+}
+```
+
+### `GridRowMeta`
+
+Available via `params.rowMeta` in `renderCell`. Undefined for non-hierarchy rows.
+
+```typescript
+interface GridRowMeta {
+  hasChildren?: boolean;
+  treeDepth?: number;
+  groupingField?: string;
+  groupingValue?: unknown;
+  descendantCount?: number;
+  isExpanded?: boolean;
+  isGroupRow?: boolean;
+}
+```
+
 ---
 
 ## 📡 Event Callback Types

package/docs/components/cell.md

@@ -42,3 +42,17 @@ const columns: GridColDef[] = [
   }
 ];
 ```
+
+## 🛡️ Error containment
+
+Custom `renderCell` callbacks are wrapped in a `CellErrorBoundary`. If a renderCell throws during render, that single cell shows a `⚠` indicator (CSS class `ogx__cell-error`) with the error message as a tooltip. The rest of the grid continues rendering normally.
+
+Default cell display (no `renderCell`) does not go through the boundary — it cannot throw.
+
+To style the error indicator:
+
+```css
+.ogx__cell-error {
+  color: red; /* override the default */
+}
+```

package/docs/components/filter-panel.md

@@ -9,6 +9,19 @@ The Filter Panel allows users to define a list of `GridFilterItem` objects. Each
 - **Operator**: How to compare (e.g., `contains`, `equals`, `>`, `is empty`).
 - **Value**: The target value for comparison.
 
+### Hierarchy-aware custom cells
+
+When a column has a custom `renderCell` and the grid is in tree-data or row-grouping mode, use `params.rowMeta` to access hierarchy context:
+
+```tsx
+renderCell: (params) => {
+  if (params.rowMeta?.hasChildren) {
+    return <strong>{params.value}</strong>;
+  }
+  return params.value;
+}
+```
+
 ## 🔌 Integration
 
 The `<DataGrid />` manages the visibility of the Filter Panel via its internal state. It is usually triggered from the Column Menu or the Toolbar.

package/docs/components/pagination.md

@@ -32,3 +32,29 @@ You can replace the internal pagination UI using the `pagination` slot:
   }}
 />
 ```
+
+## 🌍 Internationalisation
+
+Pass `localeText` on `<DataGrid />` to override the text labels in the Pagination component (rows-per-page, range, and page-counter labels). Note: ARIA labels (`aria-label="Pagination"`, `aria-label="Rows per page"`) and button titles (`title="Previous page"`, `title="Next page"`) are currently hardcoded and not overrideable via `localeText`.
+
+| Key | Type | Default |
+| :--- | :--- | :--- |
+| `paginationRowsPerPage` | `string` | `"Rows per page:"` |
+| `paginationOf` | `(from, to, count) => string` | `` `${from}–${to} of ${count}` `` |
+| `paginationPage` | `(page, pageCount) => string` | `` `Page ${page} of ${pageCount}` `` |
+| `noRowsLabel` | `string` | `"No Data"` |
+
+**Example — French locale:**
+
+```tsx
+<DataGrid
+  localeText={{
+    paginationRowsPerPage: 'Lignes par page :',
+    paginationOf: (from, to, count) => `${from}–${to} sur ${count}`,
+    paginationPage: (page, pageCount) => `Page ${page} sur ${pageCount}`,
+    noRowsLabel: 'Aucune donnée',
+  }}
+  rows={rows}
+  columns={columns}
+/>
+```

package/docs/components/row.md

@@ -29,3 +29,29 @@ The grid supports "Zebra" striping via CSS:
 ## 📋 Detail Panel
 
 When `getDetailPanelContent` is provided, the `<Row />` renders an expandable container below itself to show supplemental data.
+
+## ⚠️ v1.1 — Hierarchy Field Deprecation
+
+The internal hierarchy fields (`_hasChildren`, `_treeDepth`, `_isExpanded`, `_groupingField`, `_groupingValue`, `_descendantCount`, `_isGroupRow`) are no longer typed on `GridRowModel`. They will be removed from the runtime row object in v2.0.
+
+**Before (still works at runtime in v1.1 — `params.row._hasChildren` is `unknown`, not `boolean`; assignment to typed variables and arithmetic will error, truthiness checks will not):**
+
+```tsx
+renderCell: (params) => {
+  // v1.1 accepts this at runtime; _hasChildren resolves to unknown via [key: string]: unknown
+  const hasChildren = (params.row as Record<string, unknown>)._hasChildren;
+  return hasChildren ? <GroupIcon /> : params.value;
+}
+```
+
+**After (v1.1+):**
+
+```tsx
+renderCell: (params) => {
+  const hasChildren = params.rowMeta?.hasChildren;
+  return hasChildren ? <GroupIcon /> : params.value;
+}
+```
+
+`params.rowMeta` is `undefined` for flat rows with no active tree-data or row-grouping.
+See [`GridRowMeta` architecture doc](../architecture/grid-row-meta.md) for the full data flow.

package/docs/roadmap.md

@@ -86,5 +86,13 @@ This document tracks the current status of features in `OpenGridX` and outlines
 *   **GitHub Pages deployment**: CI/CD via GitHub Actions (`base: '/OpenGridX/'` already configured in `vite.config.js`).
 
 ## ✅ Implemented Features (Recent)
+
+### 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.
+- **`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).
+- **`CLAUDE.md`**: Root-level AI context file auto-loaded by Claude Code and other AI coding assistants.
+
 *   **Demo app (partial)**: 32 interactive examples across 6 categories (Main features, Advanced features, Components, Customization, Tutorials, Resources) with categorized sidebar navigation and per-page Table of Contents. Source code viewer present on 6 of 32 examples. Syntax highlighting and public deployment are in the upcoming Demo Site section above.
 *   **Quickstart & Installation Guides**: Comprehensive onboarding documentation for developers.

package/lib/components/Cell/Cell.tsx

@@ -1,9 +1,10 @@
 
 import React from 'react';
-import type { GridColDef, GridRowModel, GridPinnedPosition, GridCellParams } from '../../types';
+import type { GridColDef, GridRowModel, GridPinnedPosition, GridCellParams, GridRowMeta } from '../../types';
 import type { CellColSpanInfo } from '../../hooks/features/useGridSpanning';
 
 import { GridEditInputCell } from './GridEditInputCell';
+import { CellErrorBoundary } from './CellErrorBoundary';
 
 export interface CellProps<R extends GridRowModel = GridRowModel> {
     onCellClick?: (params: GridCellParams<R>) => void;
@@ -32,6 +33,7 @@ export interface CellProps<R extends GridRowModel = GridRowModel> {
     colSpanInfo?: CellColSpanInfo;
     rowSpan?: number;
     isHiddenByRowSpan?: boolean;
+    rowMeta?: GridRowMeta;
 }
 
 function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
@@ -59,7 +61,8 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
 
         colSpanInfo,
         rowSpan: rowSpanProp,
-        isHiddenByRowSpan
+        isHiddenByRowSpan,
+        rowMeta
     } = props;
 
     // All hooks must come before any early returns (Rules of Hooks)
@@ -87,47 +90,6 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         return String(value);
     }, [value, row, colDef]);
 
-    const cellContent = React.useMemo(() => {
-        if (isEditing && (onCellValueChange || onValueChange) && onEditStop) {
-            if (colDef.renderEditCell) {
-                return colDef.renderEditCell({
-                    value,
-                    row,
-                    field: colDef.field,
-                    colDef,
-                    rowIndex,
-                    colIndex
-                });
-            }
-            return (
-                <GridEditInputCell
-                    value={value}
-                    row={row}
-                    field={colDef.field}
-                    colDef={colDef as unknown as GridColDef}
-                    rowIndex={rowIndex}
-                    colIndex={colIndex}
-                    onValueChange={handleValueChange}
-                    onCommit={() => onEditStop()}
-                    onCancel={() => onEditStop(true)}
-                />
-            );
-        }
-
-        if (colDef.renderCell) {
-            return colDef.renderCell({
-                value,
-                row,
-                field: colDef.field,
-                colDef,
-                rowIndex,
-                colIndex
-            });
-        }
-
-        return formattedValue;
-    }, [value, row, colDef, rowIndex, colIndex, formattedValue, isEditing, handleValueChange, onEditStop, onCellValueChange, onValueChange]);
-
     const resolvedCellClassName = React.useMemo(() => {
         if (!colDef.cellClassName) return '';
         if (typeof colDef.cellClassName === 'function') {
@@ -252,7 +214,45 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
             {...(rowSpan > 1 ? { 'aria-rowspan': rowSpan } : {})}
         >
             <div className="ogx__cell-content">
-                {cellContent}
+                {isEditing && (onCellValueChange || onValueChange) && onEditStop ? (
+                    colDef.renderEditCell ? (
+                        colDef.renderEditCell({
+                            value,
+                            row,
+                            field: colDef.field,
+                            colDef,
+                            rowIndex,
+                            colIndex,
+                            rowMeta,
+                        })
+                    ) : (
+                        <GridEditInputCell
+                            value={value}
+                            row={row}
+                            field={colDef.field}
+                            colDef={colDef as unknown as GridColDef}
+                            rowIndex={rowIndex}
+                            colIndex={colIndex}
+                            onValueChange={handleValueChange}
+                            onCommit={() => onEditStop()}
+                            onCancel={() => onEditStop(true)}
+                        />
+                    )
+                ) : colDef.renderCell ? (
+                    <CellErrorBoundary field={colDef.field} resetKey={value}>
+                        {colDef.renderCell({
+                            value,
+                            row,
+                            field: colDef.field,
+                            colDef,
+                            rowIndex,
+                            colIndex,
+                            rowMeta,
+                        })}
+                    </CellErrorBoundary>
+                ) : (
+                    formattedValue
+                )}
             </div>
         </div>
     );

package/lib/components/Cell/CellErrorBoundary.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+interface CellErrorBoundaryProps {
+    children: React.ReactNode;
+    field: string;
+    resetKey?: unknown;
+}
+
+interface CellErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    resetKey?: unknown;
+}
+
+export class CellErrorBoundary extends React.Component<CellErrorBoundaryProps, CellErrorBoundaryState> {
+    constructor(props: CellErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false, error: null, resetKey: props.resetKey };
+    }
+
+    static getDerivedStateFromProps(
+        props: CellErrorBoundaryProps,
+        state: CellErrorBoundaryState
+    ): Partial<CellErrorBoundaryState> | null {
+        if (state.hasError && props.resetKey !== state.resetKey) {
+            return { hasError: false, error: null, resetKey: props.resetKey };
+        }
+        if (props.resetKey !== state.resetKey) {
+            return { resetKey: props.resetKey };
+        }
+        return null;
+    }
+
+    static getDerivedStateFromError(error: Error): Partial<CellErrorBoundaryState> {
+        return { hasError: true, error };
+    }
+
+    override render() {
+        if (this.state.hasError) {
+            return (
+                <div
+                    className="ogx__cell-error"
+                    role="status"
+                    aria-label={`Error in cell: ${this.props.field}`}
+                    title={this.state.error?.message ?? 'Render error'}
+                >
+                    ⚠
+                </div>
+            );
+        }
+        return this.props.children;
+    }
+}

package/lib/components/DataGrid/DataGrid.css

@@ -258,3 +258,14 @@
   white-space: nowrap;
   border: 0;
 }
+
+.ogx__cell-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--ogx-color-error, #d32f2f);
+  font-size: 1rem;
+  cursor: help;
+}

package/lib/components/DataGrid/DataGrid.tsx

@@ -27,7 +27,9 @@ import { GridListView } from './GridListView';
 import { GridPinnedRows } from './GridPinnedRows';
 import { GridVirtualRows } from './GridVirtualRows';
 import { GridStandaloneColumnPanel } from './GridStandaloneColumnPanel';
-import type { DataGridProps, GridRowModel, GridRowId, GridSortDirection, GridColDef, GridRowParams, GridCellParams, GridDataSource, GridAggregationResult, GridFilterModel, GridTreeNode, GridSortItem } from '../../types';
+import type { DataGridProps, GridRowModel, GridRowId, GridSortDirection, GridColDef, GridRowParams, GridCellParams, GridDataSource, GridAggregationResult, GridFilterModel, GridTreeNode, GridSortItem, GridRowMeta } from '../../types';
+
+const EMPTY_ROW_META_MAP: Map<GridRowId, GridRowMeta> = new Map();
 
 export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridProps<R>) {
     const {
@@ -109,9 +111,12 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         listViewColumn,
         columnGroupingModel,
         noRowsLabel = 'No Data',
+        localeText,
         apiRef: propApiRef,
     } = props;
 
+    const effectiveNoRowsLabel = localeText?.noRowsLabel ?? noRowsLabel;
+
     // Stable defaults
     const defaultFilterModel: GridFilterModel = useMemo(() => ({ items: [] }), []);
     const filterModel = (propFilterModel || defaultFilterModel) as GridFilterModel;
@@ -333,18 +338,24 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     const isHierarchyEnabled = isTreeData || isRowGrouping;
     const activeHierarchyHandlers = isTreeData ? treeDataHandlers : (isRowGrouping ? rowGroupingHandlers : null);
 
+    const rowMetaMap = useMemo<Map<GridRowId, GridRowMeta>>(() => {
+        if (isTreeData) return treeDataHandlers.rowMetaMap;
+        if (isRowGrouping) return rowGroupingHandlers.rowMetaMap;
+        return EMPTY_ROW_META_MAP;
+    }, [isTreeData, treeDataHandlers.rowMetaMap, isRowGrouping, rowGroupingHandlers.rowMetaMap]);
+
     const pagination = propPagination && !isRowGrouping;
 
     const handleRowClick = useCallback((params: GridRowParams<R>) => {
         const { row, id } = params;
 
-        if (isHierarchyEnabled && row._hasChildren) {
+        if (isHierarchyEnabled && rowMetaMap.get(row.id)?.hasChildren) {
             activeHierarchyHandlers?.toggleExpansion(id);
             return;
         }
 
         onRowClick?.(params);
-    }, [isHierarchyEnabled, activeHierarchyHandlers, onRowClick]);
+    }, [isHierarchyEnabled, activeHierarchyHandlers, onRowClick, rowMetaMap]);
 
     const dataSourceHandlers = useGridDataSource({
         dataSource,
@@ -785,7 +796,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                     pageSizeOptions={pageSizeOptions}
                     selectedRowIds={selectedRowIds}
                     listViewColumn={listViewColumn}
-                    noRowsLabel={noRowsLabel}
+                    noRowsLabel={effectiveNoRowsLabel}
                     rowHeight={rowHeight}
                     checkboxSelection={checkboxSelection}
                     paginationMode={paginationMode}
@@ -793,6 +804,11 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                     serverRowCount={state.pagination.rowCount || 0}
                     paginationSlot={slots?.pagination}
                     paginationSlotProps={slotProps?.pagination}
+                    localeText={localeText ? {
+                        paginationRowsPerPage: localeText.paginationRowsPerPage,
+                        paginationOf: localeText.paginationOf,
+                        paginationPage: localeText.paginationPage,
+                    } : undefined}
                     onRowClick={handleRowClick}
                     onSelectionChange={handleSelectionChange}
                     onPaginationModelChange={handlePaginationModelChange}
@@ -893,7 +909,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
                         {/* Empty State Overlay (Standard View) — showing after header */}
                         {!effectiveLoading && !state.dataSource.error && filteredRows.length === 0 && (
-                            <GridEmptyState noRowsLabel={noRowsLabel} width={virtualization.totalWidth} />
+                            <GridEmptyState noRowsLabel={effectiveNoRowsLabel} width={virtualization.totalWidth} />
                         )}
 
                         <GridPinnedRows<R>
@@ -919,6 +935,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             colspanMap={spanning.colspanMap}
                             rowSpanningCaches={spanning.rowSpanningState.caches}
                             rowHeight={rowHeight}
+                            rowMetaMap={rowMetaMap}
                         />
 
                         <GridVirtualRows<R>
@@ -956,6 +973,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             sortedUnpinnedRowCount={sortedUnpinnedRows.length}
                             infiniteScrollSkeletonCount={Math.min(effectivePaginationModel.pageSize, 20)}
                             unpinnedRowsLength={layout.unpinnedRowsLength}
+                            rowMetaMap={rowMetaMap}
                         />
 
                         <GridPinnedRows<R>
@@ -981,6 +999,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             colspanMap={spanning.colspanMap}
                             rowSpanningCaches={spanning.rowSpanningState.caches}
                             rowHeight={rowHeight}
+                            rowMetaMap={rowMetaMap}
                         />
 
                         {/* Aggregation Footer Row — suppressed in pivot mode because pivot rows
@@ -1014,6 +1033,11 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                         pageSizeOptions={pageSizeOptions}
                         onPageChange={(newPage: number) => handlePaginationModelChange({ ...effectivePaginationModel, page: newPage })}
                         onPageSizeChange={(newPageSize: number) => handlePaginationModelChange({ ...effectivePaginationModel, pageSize: newPageSize, page: 0 })}
+                        localeText={localeText ? {
+                            paginationRowsPerPage: localeText.paginationRowsPerPage,
+                            paginationOf: localeText.paginationOf,
+                            paginationPage: localeText.paginationPage,
+                        } : undefined}
                         {...slotProps?.pagination}
                     />
                 );
@@ -1025,7 +1049,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 {state.dataSource.error ? `Error: ${state.dataSource.error instanceof Error ? state.dataSource.error.message : 'Unknown error'}` : ''}
                 {!loading && !state.dataSource.error && (
                     filteredRows.length === 0
-                        ? noRowsLabel
+                        ? effectiveNoRowsLabel
                         : (filterModel && ((filterModel.quickFilterValues?.length || 0) > 0 || (filterModel.items?.length || 0) > 0))
                             ? `${filteredRows.length} ${filteredRows.length === 1 ? 'row' : 'rows'} found`
                             : ''

package/lib/components/DataGrid/GridListView.tsx

@@ -8,6 +8,7 @@ import type {
     GridListViewColDef,
     GridPaginationModel,
     GridDataSource,
+    GridLocaleText,
 } from '../../types';
 
 export interface GridListViewProps<R extends GridRowModel> {
@@ -27,6 +28,7 @@ export interface GridListViewProps<R extends GridRowModel> {
     serverRowCount: number;
     paginationSlot?: React.ComponentType<Record<string, unknown>>;
     paginationSlotProps?: Record<string, unknown>;
+    localeText?: Pick<GridLocaleText, 'paginationRowsPerPage' | 'paginationOf' | 'paginationPage'>;
     onRowClick: (params: GridRowParams<R>) => void;
     onSelectionChange: (rowId: GridRowId, isSelected: boolean) => void;
     onPaginationModelChange: (model: GridPaginationModel) => void;
@@ -49,6 +51,7 @@ export function GridListView<R extends GridRowModel>({
     serverRowCount,
     paginationSlot,
     paginationSlotProps,
+    localeText,
     onRowClick,
     onSelectionChange,
     onPaginationModelChange,
@@ -108,6 +111,7 @@ export function GridListView<R extends GridRowModel>({
                     pageSizeOptions={pageSizeOptions}
                     onPageChange={(newPage: number) => onPaginationModelChange({ ...effectivePaginationModel, page: newPage })}
                     onPageSizeChange={(newPageSize: number) => onPaginationModelChange({ ...effectivePaginationModel, pageSize: newPageSize, page: 0 })}
+                    localeText={localeText}
                     {...paginationSlotProps}
                 />
             )}

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -10,6 +10,7 @@ import type {
     GridRowPinning,
     GridDetailPanelParams,
     GridDetailPanelHeight,
+    GridRowMeta,
 } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
 
@@ -36,6 +37,7 @@ export interface GridPinnedRowsProps<R extends GridRowModel> {
     colspanMap?: Map<GridRowId, Record<string, CellColSpanInfo>>;
     rowSpanningCaches?: RowSpanningCaches;
     rowHeight: number;
+    rowMetaMap: Map<GridRowId, GridRowMeta>;
 }
 
 export function GridPinnedRows<R extends GridRowModel>({
@@ -61,6 +63,7 @@ export function GridPinnedRows<R extends GridRowModel>({
     colspanMap,
     rowSpanningCaches,
     rowHeight,
+    rowMetaMap,
 }: GridPinnedRowsProps<R>) {
     if (rows.length === 0) return null;
 
@@ -91,6 +94,7 @@ export function GridPinnedRows<R extends GridRowModel>({
                     colspanMap={colspanMap}
                     rowSpanningCaches={rowSpanningCaches}
                     rowHeight={rowHeight}
+                    rowMeta={rowMetaMap.get(row.id)}
                 />
             ))}
         </div>

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -12,6 +12,7 @@ import type {
     GridRowPinning,
     GridDetailPanelParams,
     GridDetailPanelHeight,
+    GridRowMeta,
 } from '../../types';
 import type { GridVisibleRow } from '../../hooks/core/useGridVisibleRows';
 import type { UseRowReorderReturn } from '../../hooks/useRowReorder';
@@ -60,6 +61,7 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     sortedUnpinnedRowCount: number;
     infiniteScrollSkeletonCount: number;
     unpinnedRowsLength: number;
+    rowMetaMap: Map<GridRowId, GridRowMeta>;
 }
 
 export function GridVirtualRows<R extends GridRowModel>({
@@ -97,6 +99,7 @@ export function GridVirtualRows<R extends GridRowModel>({
     sortedUnpinnedRowCount,
     infiniteScrollSkeletonCount,
     unpinnedRowsLength,
+    rowMetaMap,
 }: GridVirtualRowsProps<R>) {
     const skeletonColumns: GridColDef<R>[] = baseColumns.length > 0
         ? baseColumns
@@ -179,6 +182,7 @@ export function GridVirtualRows<R extends GridRowModel>({
                             colspanMap={colspanMap}
                             rowSpanningCaches={rowSpanningCaches}
                             rowHeight={rowHeight}
+                            rowMeta={rowMetaMap.get(row.id)}
                         />
                     ))
                 )}

package/lib/components/Pagination/Pagination.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Pagination } from './Pagination';
+
+const NOOP = () => {};
+
+describe('Pagination', () => {
+    it('renders "0 of 0" when rowCount is 0', () => {
+        render(
+            <Pagination
+                page={0}
+                pageSize={10}
+                rowCount={0}
+                onPageChange={NOOP}
+                onPageSizeChange={NOOP}
+            />
+        );
+        expect(screen.getByText('0 of 0')).toBeTruthy();
+    });
+
+    it('calls localeText.paginationOf with (0, 0, 0) when rowCount is 0', () => {
+        const paginationOf = vi.fn().mockReturnValue('custom empty');
+        render(
+            <Pagination
+                page={0}
+                pageSize={10}
+                rowCount={0}
+                onPageChange={NOOP}
+                onPageSizeChange={NOOP}
+                localeText={{ paginationOf }}
+            />
+        );
+        expect(paginationOf).toHaveBeenCalledWith(0, 0, 0);
+        expect(screen.getByText('custom empty')).toBeTruthy();
+    });
+
+    it('renders correct row range label for non-empty data', () => {
+        render(
+            <Pagination
+                page={0}
+                pageSize={10}
+                rowCount={25}
+                onPageChange={NOOP}
+                onPageSizeChange={NOOP}
+            />
+        );
+        expect(screen.getByText('1–10 of 25')).toBeTruthy();
+    });
+
+    it('calls localeText.paginationOf with correct args for non-empty data', () => {
+        const paginationOf = vi.fn().mockReturnValue('custom range');
+        render(
+            <Pagination
+                page={1}
+                pageSize={10}
+                rowCount={25}
+                onPageChange={NOOP}
+                onPageSizeChange={NOOP}
+                localeText={{ paginationOf }}
+            />
+        );
+        expect(paginationOf).toHaveBeenCalledWith(11, 20, 25);
+    });
+});