@opencorestack/opengridx 1.0.6 → 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/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -109,8 +109,6 @@ export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
                 <div className="ogx-column-visibility-panel__search-container">
                     <SearchIcon />
                     <input
-                        id="ogx-column-search"
-                        name="ogx-column-search"
                         autoComplete="off"
                         className="ogx-column-visibility-panel__search-input"
                         placeholder="Search"

package/lib/components/DataGrid/DataGrid.css

@@ -177,6 +177,42 @@
   overflow: hidden;
   box-sizing: border-box;
   border-right: 1px solid var(--ogx-grid-border-color);
+  position: relative;
+}
+.ogx__aggregation-cell--pinned-left,
+.ogx__aggregation-cell--pinned-right {
+  position: sticky;
+  z-index: 3;
+  background: var(--ogx-grid-header-background);
+}
+.ogx__aggregation-cell--pinned-right {
+  border-left: 1px solid var(--ogx-grid-border-color);
+}
+.ogx__aggregation-cell--pinned-left-last {
+  overflow: visible;
+}
+.ogx__aggregation-cell--pinned-left-last::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -10px;
+  bottom: 0;
+  width: 10px;
+  pointer-events: none;
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
+.ogx__aggregation-cell--pinned-right-first {
+  overflow: visible;
+}
+.ogx__aggregation-cell--pinned-right-first::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -10px;
+  bottom: 0;
+  width: 10px;
+  pointer-events: none;
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.1);
 }
 .ogx__aggregation-label {
   font-size: 0.7em;
@@ -222,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,
@@ -685,6 +696,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     const hasRowSpanning = React.useMemo(() => effectiveColumns.some(c => !!c.rowSpan), [effectiveColumns]);
     const [columnsPanelOpen, setColumnsPanelOpen] = React.useState(false);
     const containerRef = React.useRef<HTMLDivElement>(null);
+    const standalonePanelRef = React.useRef<HTMLDivElement>(null);
 
     const toolbarProps = React.useMemo(() => {
         if (!slots?.toolbar) return null;
@@ -735,8 +747,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     useEffect(() => {
         if (!columnsPanelOpen || slots?.toolbar) return;
         function handleClickOutside(e: MouseEvent) {
-            const panel = document.getElementById('ogx-standalone-col-panel');
-            if (panel && !panel.contains(e.target as Node)) {
+            if (standalonePanelRef.current && !standalonePanelRef.current.contains(e.target as Node)) {
                 setColumnsPanelOpen(false);
             }
         }
@@ -762,6 +773,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 <GridStandaloneColumnPanel<R>
                     isOpen={columnsPanelOpen}
                     containerRef={containerRef}
+                    panelRef={standalonePanelRef}
                     effectiveColumns={effectiveColumns}
                     columnVisibilityModel={columnVisibilityModel}
                     effectiveColumnOrder={effectiveColumnOrder}
@@ -784,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}
@@ -792,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}
@@ -892,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>
@@ -918,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>
@@ -955,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>
@@ -980,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
@@ -995,6 +1015,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                                 checkboxSelection={checkboxSelection}
                                 hasDetailPanel={hasDetailPanel}
                                 rowReordering={rowReordering}
+                                pinnedColumns={pinnedColumns}
                             />
                         )}
 
@@ -1012,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}
                     />
                 );
@@ -1023,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/GridAggregationFooter.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { formatAggregationValue } from '../../hooks/features/useAggregation';
-import type { GridColDef, GridAggregationModel, GridAggregationResult } from '../../types';
+import type { GridColDef, GridAggregationModel, GridAggregationResult, GridColumnPinning } from '../../types';
+import { calculatePinnedPositions, isColumnPinned } from '../../utils/pinning';
 
 interface GridAggregationFooterProps {
     columns: GridColDef[];
@@ -11,6 +12,7 @@ interface GridAggregationFooterProps {
     checkboxSelection: boolean;
     hasDetailPanel: boolean;
     rowReordering: boolean;
+    pinnedColumns?: GridColumnPinning;
 }
 
 export function GridAggregationFooter({
@@ -22,7 +24,28 @@ export function GridAggregationFooter({
     checkboxSelection,
     hasDetailPanel,
     rowReordering,
+    pinnedColumns,
 }: GridAggregationFooterProps) {
+    // Compute sticky left/right pixel offsets for each pinned column.
+    // The footer always renders checkbox/detail/reorder spacers unconditionally,
+    // so treat pinCheckboxColumn and pinExpandColumn as always true.
+    const pinnedOffsets = useMemo(
+        () => calculatePinnedPositions(
+            columns,
+            columnWidths,
+            pinnedColumns,
+            checkboxSelection,
+            true,
+            hasDetailPanel,
+            true,
+            rowReordering,
+        ),
+        [columns, columnWidths, pinnedColumns, checkboxSelection, hasDetailPanel, rowReordering]
+    );
+
+    const lastLeftField  = pinnedColumns?.left?.[pinnedColumns.left.length - 1];
+    const firstRightField = pinnedColumns?.right?.[0];
+
     return (
         <div
             className="ogx__aggregation-footer"
@@ -40,17 +63,32 @@ export function GridAggregationFooter({
                 const rawValue = aggregationResult[col.field];
                 const colWidth = columnWidths[col.field] ?? (typeof col.width === 'number' ? col.width : 120);
 
+                const pinnedPosition = isColumnPinned(col.field, pinnedColumns);
+                const pinnedOffset   = pinnedPosition ? pinnedOffsets[col.field] : undefined;
+
+                const className = [
+                    'ogx__aggregation-cell',
+                    pinnedPosition === 'left'  && 'ogx__aggregation-cell--pinned-left',
+                    pinnedPosition === 'right' && 'ogx__aggregation-cell--pinned-right',
+                    pinnedPosition === 'left'  && col.field === lastLeftField   && 'ogx__aggregation-cell--pinned-left-last',
+                    pinnedPosition === 'right' && col.field === firstRightField && 'ogx__aggregation-cell--pinned-right-first',
+                ].filter(Boolean).join(' ');
+
+                const style: React.CSSProperties = {
+                    width: colWidth,
+                    minWidth: colWidth,
+                    maxWidth: colWidth,
+                    textAlign: (col.align as React.CSSProperties['textAlign']) || 'left',
+                };
+                if (pinnedPosition === 'left'  && pinnedOffset !== undefined) style.left  = pinnedOffset;
+                if (pinnedPosition === 'right' && pinnedOffset !== undefined) style.right = pinnedOffset;
+
                 return (
                     <div
                         key={col.field}
-                        className="ogx__aggregation-cell"
+                        className={className}
                         role="gridcell"
-                        style={{
-                            width: colWidth,
-                            minWidth: colWidth,
-                            maxWidth: colWidth,
-                            textAlign: (col.align as React.CSSProperties['textAlign']) || 'left',
-                        }}
+                        style={style}
                     >
                         {fnName ? (
                             <>