@opencorestack/opengridx 2.0.3 → 2.1.0

package/lib/hooks/core/useGridKeyboardNavigation.ts

@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react';
+import { scrollRowIntoView } from '../../utils/scroll';
 import type { GridRowModel, GridRowId, GridColDef, GridCellParams, GridSortItem, GridSortDirection } from '../../types';
 import type { GridEditingState } from '../features/useGridEditing';
 
@@ -14,6 +15,7 @@ interface ColumnMetrics {
 interface VirtualizationSnapshot {
     cumulativeHeights: number[];
     pinnedTopHeight: number;
+    pinnedBottomHeight: number;
     columnMetrics: ColumnMetrics | null;
 }
 
@@ -37,6 +39,8 @@ export interface UseGridKeyboardNavigationParams<R extends GridRowModel> {
     pageSize: number;
     virtualization: VirtualizationSnapshot;
     viewportRef: React.RefObject<HTMLDivElement | null>;
+    /** Number of top-pinned rows at the start of allRenderableRows. */
+    pinnedTopRowCount?: number;
 }
 
 export interface FocusedCell {
@@ -71,6 +75,7 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
         pageSize,
         virtualization,
         viewportRef,
+        pinnedTopRowCount = 0,
     } = params;
 
     const [focusedCell, setFocusedCell] = useState<FocusedCell | null>(null);
@@ -311,21 +316,13 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
 
                 const el = viewportRef.current;
                 if (el) {
-                    const { cumulativeHeights, pinnedTopHeight, columnMetrics } = virtualization;
-                    const { clientHeight, clientWidth, scrollTop, scrollLeft } = el;
-
-                    const rowTop = nextRowIndex <= 0 ? 0 : cumulativeHeights[nextRowIndex - 1];
-                    const rowBottom = cumulativeHeights[nextRowIndex];
-                    const visibleTop = scrollTop + pinnedTopHeight;
-                    const visibleBottom = scrollTop + clientHeight;
-
-                    let newScrollTop = scrollTop;
-                    if (rowTop < visibleTop) {
-                        newScrollTop = Math.max(0, rowTop - pinnedTopHeight);
-                    } else if (rowBottom > visibleBottom) {
-                        newScrollTop = rowBottom - clientHeight;
+                    const { cumulativeHeights, pinnedBottomHeight, columnMetrics } = virtualization;
+                    const { clientWidth, scrollLeft } = el;
+
+                    // allRenderableRows = pinned top + center + pinned bottom; pinned rows are sticky and always visible.
+                    if (nextRowIndex >= 0) {
+                        scrollRowIntoView(el, nextRowIndex - pinnedTopRowCount, cumulativeHeights, pinnedBottomHeight);
                     }
-                    if (newScrollTop !== scrollTop) el.scrollTop = newScrollTop;
 
                     if (columnMetrics) {
                         const { leftPinnedWidth, rightPinnedWidth, unpinnedAccWidths, unpinnedCols, totalSpecialsWidth, pinnedSpecialsWidth } = columnMetrics;
@@ -365,6 +362,7 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
         pagination,
         pageSize,
         viewportRef,
+        pinnedTopRowCount,
     ]);
 
     return { focusedCell, setFocusedCell, handleFocus, handleBlur, handleKeyDown };

package/lib/hooks/core/useGridScrollSync.ts

@@ -3,42 +3,84 @@ import type { GridRowScrollEndParams } from '../../types';
 
 export interface UseGridScrollSyncParams {
     onRowsScrollEnd?: (params: GridRowScrollEndParams) => void;
+    /** Minimum overscan rows — the adaptive algorithm never goes below this. Defaults to 3. */
+    overscanRowCount?: number;
 }
 
 export interface UseGridScrollSyncResult {
     scrollTop: number;
     scrollLeft: number;
+    /** Dynamically computed overscan row count based on current scroll velocity. */
+    overscanRows: number;
     handleScroll: (event: React.UIEvent<HTMLDivElement>) => void;
 }
 
+/** Maps scroll velocity (px/ms) to an overscan row count. */
+function velocityToOverscan(velocity: number, minOverscan: number): number {
+    let base: number;
+    if (velocity < 0.5)      base = 3;
+    else if (velocity < 3)   base = 5;
+    else if (velocity < 15)  base = 12;
+    else if (velocity < 40)  base = 20;
+    else                     base = 30;
+    return Math.max(base, minOverscan);
+}
+
 export function useGridScrollSync(params: UseGridScrollSyncParams): UseGridScrollSyncResult {
-    const { onRowsScrollEnd } = params;
+    const { onRowsScrollEnd, overscanRowCount = 3 } = params;
 
-    const pendingScrollRef = useRef({ scrollTop: 0, scrollLeft: 0 });
-    const scrollRafRef = useRef<number | null>(null);
-    const [scrollPos, setScrollPos] = useState({ scrollTop: 0, scrollLeft: 0 });
+    const pendingRef = useRef({ scrollTop: 0, scrollLeft: 0, velocity: 0 });
+    const prevRef    = useRef({ scrollTop: 0, scrollLeft: 0, time: 0 });
+    const rafRef     = useRef<number | null>(null);
+    const decayRef   = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const [scrollState, setScrollState] = useState({
+        scrollTop: 0,
+        scrollLeft: 0,
+        overscanRows: overscanRowCount,
+    });
 
     useEffect(() => {
         return () => {
-            if (scrollRafRef.current !== null) cancelAnimationFrame(scrollRafRef.current);
+            if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+            if (decayRef.current !== null) clearTimeout(decayRef.current);
         };
     }, []);
 
     const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
         const target = event.currentTarget;
-        pendingScrollRef.current = { scrollTop: target.scrollTop, scrollLeft: target.scrollLeft };
+        const now = performance.now();
+
+        // Velocity: total positional delta / elapsed time (px/ms)
+        const deltaPos = Math.abs(target.scrollTop  - prevRef.current.scrollTop)
+                       + Math.abs(target.scrollLeft - prevRef.current.scrollLeft);
+        const deltaTime = now - prevRef.current.time;
+        const velocity = deltaTime > 0 ? deltaPos / deltaTime : 0;
 
-        if (scrollRafRef.current !== null) cancelAnimationFrame(scrollRafRef.current);
-        scrollRafRef.current = requestAnimationFrame(() => {
-            scrollRafRef.current = null;
-            setScrollPos(pendingScrollRef.current);
+        prevRef.current = { scrollTop: target.scrollTop, scrollLeft: target.scrollLeft, time: now };
+        pendingRef.current = { scrollTop: target.scrollTop, scrollLeft: target.scrollLeft, velocity };
+
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            const { scrollTop, scrollLeft, velocity: v } = pendingRef.current;
+            setScrollState({
+                scrollTop,
+                scrollLeft,
+                overscanRows: velocityToOverscan(v, overscanRowCount),
+            });
         });
 
+        // Decay back to the minimum overscan 200ms after scrolling stops
+        if (decayRef.current !== null) clearTimeout(decayRef.current);
+        decayRef.current = setTimeout(() => {
+            decayRef.current = null;
+            setScrollState(prev => ({ ...prev, overscanRows: overscanRowCount }));
+        }, 200);
+
         if (onRowsScrollEnd) {
             const { scrollTop, scrollHeight, clientHeight } = target;
-            const scrollThreshold = 100;
-
-            if (scrollHeight - scrollTop - clientHeight < scrollThreshold) {
+            if (scrollHeight - scrollTop - clientHeight < 100) {
                 onRowsScrollEnd({
                     visibleTop: scrollTop,
                     visibleBottom: scrollTop + clientHeight,
@@ -46,7 +88,12 @@ export function useGridScrollSync(params: UseGridScrollSyncParams): UseGridScrol
                 });
             }
         }
-    }, [onRowsScrollEnd]);
+    }, [onRowsScrollEnd, overscanRowCount]);
 
-    return { scrollTop: scrollPos.scrollTop, scrollLeft: scrollPos.scrollLeft, handleScroll };
+    return {
+        scrollTop:    scrollState.scrollTop,
+        scrollLeft:   scrollState.scrollLeft,
+        overscanRows: scrollState.overscanRows,
+        handleScroll,
+    };
 }

package/lib/hooks/core/useGridVirtualization.ts

@@ -14,6 +14,8 @@ export interface UseGridVirtualizationParams<R extends GridRowModel> {
     checkboxSelection: boolean;
     pinCheckboxColumn: boolean;
     pinExpandColumn: boolean;
+    /** Adaptive overscan row count from useGridScrollSync. Defaults to 5. */
+    overscanRows?: number;
 }
 
 export interface GridVirtualizationResult<R extends GridRowModel = GridRowModel> {
@@ -57,6 +59,7 @@ export function useGridVirtualization<R extends GridRowModel>(
         checkboxSelection,
         pinCheckboxColumn,
         pinExpandColumn,
+        overscanRows = 5,
     } = params;
 
     return useMemo<GridVirtualizationResult<R>>(() => {
@@ -120,7 +123,6 @@ export function useGridVirtualization<R extends GridRowModel>(
         const scrollbarBuffer = hasHorizontalScroll ? 16 : 0;
         const totalHeight = pinnedTopHeight + unpinnedRowsHeight + pinnedBottomHeight + scrollbarBuffer + 2;
 
-        const overscanRows = 5;
         let firstRowIndex = 0;
         let lastRowIndex  = unpinnedRowsLength - 1;
         let offsetTop     = 0;
@@ -182,5 +184,6 @@ export function useGridVirtualization<R extends GridRowModel>(
         checkboxSelection,
         pinCheckboxColumn,
         pinExpandColumn,
+        overscanRows,
     ]);
 }

package/lib/hooks/core/useGridVisibleRows.ts

@@ -43,8 +43,9 @@ export function useGridVisibleRows<R extends GridRowModel>(
             rowIndex: topPinnedCount + centerRows.length + index,
         }));
 
-        const centerStartIndex = Math.max(0, firstRowIndex - topPinnedCount);
-        const centerEndIndex = Math.min(centerRows.length, lastRowIndex - topPinnedCount + 1);
+        // renderContext indices come from the unpinned-row layout, so they index centerRows directly.
+        const centerStartIndex = Math.max(0, firstRowIndex);
+        const centerEndIndex = Math.min(centerRows.length, lastRowIndex + 1);
 
         const centerVisible = centerRows
             .slice(centerStartIndex, centerEndIndex)

package/lib/hooks/features/useAggregation.ts

@@ -9,30 +9,9 @@ import type {
     GridSortItem,
     GridDataSource,
 } from '../../types';
+import { computeAggregations } from '../../utils/aggregation';
 
-export type BuiltInAggFn = 'sum' | 'avg' | 'count' | 'min' | 'max' | 'unique';
-
-const AGGREGATION_FUNCTIONS: Record<BuiltInAggFn, (values: unknown[]) => unknown> = {
-    sum: (values) => {
-        const nums = values.filter((v) => v != null && !isNaN(Number(v)));
-        return nums.reduce((acc: number, v) => acc + Number(v), 0);
-    },
-    avg: (values) => {
-        const nums = values.filter((v) => v != null && !isNaN(Number(v)));
-        if (nums.length === 0) return null;
-        return nums.reduce((acc: number, v) => acc + Number(v), 0) / nums.length;
-    },
-    count: (values) => values.filter((v) => v != null).length,
-    min: (values) => {
-        const nums = values.filter((v) => v != null && !isNaN(Number(v))).map(Number);
-        return nums.length ? Math.min(...nums) : null;
-    },
-    max: (values) => {
-        const nums = values.filter((v) => v != null && !isNaN(Number(v))).map(Number);
-        return nums.length ? Math.max(...nums) : null;
-    },
-    unique: (values) => new Set(values.filter((v) => v != null)).size,
-};
+export type { BuiltInAggFn } from '../../utils/aggregation';
 
 export function formatAggregationValue(value: unknown, fnName: string): string {
     if (value == null) return '—';
@@ -85,21 +64,7 @@ export function useAggregation<R extends GridRowModel>(
     const clientResult = useMemo<GridAggregationResult>(() => {
         if (isServerSide || Object.keys(aggregationModel).length === 0) return {};
 
-        const result: GridAggregationResult = {};
-        for (const [field, fnName] of Object.entries(aggregationModel)) {
-            const colDef = columnsLookup.get(field);
-            if (colDef?.availableAggregationFunctions && !colDef.availableAggregationFunctions.includes(fnName)) {
-                continue;
-            }
-            const fn = AGGREGATION_FUNCTIONS[fnName as BuiltInAggFn];
-            if (!fn) {
-                console.warn(`[useAggregation] Unknown aggregation function: "${fnName}"`);
-                continue;
-            }
-            const values = rows.map((row) => (row as GridRowModel)[field]);
-            result[field] = fn(values);
-        }
-        return result;
+        return computeAggregations(rows, aggregationModel, columnsLookup, 'useAggregation');
     }, [rows, columnsLookup, aggregationModel, isServerSide]);
 
     const [serverResult, setServerResult] = useState<GridAggregationResult>({});

package/lib/hooks/useRowGrouping.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { renderHook } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react';
 import { useRowGrouping } from './useRowGrouping';
 
 const ROWS = [
@@ -111,6 +111,98 @@ describe('useRowGrouping — rowMetaMap', () => {
     });
 });
 
+describe('useRowGrouping — multi-field rowGroupingModel', () => {
+    const MULTI_ROWS = [
+        { id: 1, dept: 'Engineering', country: 'US', name: 'Alice' },
+        { id: 2, dept: 'Engineering', country: 'US', name: 'Bob' },
+        { id: 3, dept: 'Engineering', country: 'UK', name: 'Carol' },
+        { id: 4, dept: 'HR', country: 'US', name: 'Dave' },
+    ];
+    const MULTI_PARAMS = {
+        rows: MULTI_ROWS,
+        getRowId: GET_ROW_ID,
+        rowGroupingModel: ['dept', 'country'],
+        aggregationModel: AGGREGATION_MODEL,
+    };
+
+    it('nests one group level per field, in rowGroupingModel order', () => {
+        const { result } = renderHook(() => useRowGrouping(MULTI_PARAMS));
+        const map = result.current.rowMetaMap;
+
+        const depts = new Set<unknown>();
+        const countries = new Set<unknown>();
+        map.forEach((meta) => {
+            if (!meta.isGroupRow) return;
+            if (meta.treeDepth === 0) {
+                expect(meta.groupingField).toBe('dept');
+                depts.add(meta.groupingValue);
+            } else if (meta.treeDepth === 1) {
+                expect(meta.groupingField).toBe('country');
+                countries.add(meta.groupingValue);
+            }
+        });
+        // dept groups: Engineering, HR
+        expect(depts).toEqual(new Set(['Engineering', 'HR']));
+        // country groups: US (under Engineering), UK (under Engineering), US (under HR)
+        expect(countries).toEqual(new Set(['US', 'UK']));
+    });
+
+    it('places leaf rows at depth === rowGroupingModel.length', () => {
+        const { result } = renderHook(() => useRowGrouping(MULTI_PARAMS));
+        const map = result.current.rowMetaMap;
+
+        [1, 2, 3, 4].forEach((id) => {
+            const meta = map.get(id);
+            expect(meta?.isGroupRow).toBe(false);
+            expect(meta?.treeDepth).toBe(2);
+        });
+    });
+
+    it('produces one depth-0 group per dept, one depth-1 group per (dept, country) pair', () => {
+        const { result } = renderHook(() => useRowGrouping(MULTI_PARAMS));
+        const map = result.current.rowMetaMap;
+
+        let depth0Count = 0;
+        let depth1Count = 0;
+        map.forEach((meta) => {
+            if (!meta.isGroupRow) return;
+            if (meta.treeDepth === 0) depth0Count++;
+            if (meta.treeDepth === 1) depth1Count++;
+        });
+        // depth 0: Engineering, HR
+        expect(depth0Count).toBe(2);
+        // depth 1: Engineering/US, Engineering/UK, HR/US
+        expect(depth1Count).toBe(3);
+    });
+
+    it('reveals the next level down only after both ancestor groups are expanded', () => {
+        const { result } = renderHook(() => useRowGrouping(MULTI_PARAMS));
+
+        // Fully collapsed: only depth-0 groups are visible.
+        let visible = result.current.getVisibleRows();
+        expect(visible).not.toBeNull();
+        expect(visible!.length).toBe(2);
+
+        const deptGroupId = [...result.current.treeNodes.entries()]
+            .find(([, node]) => node.depth === 0 && node.groupingValue === 'Engineering')![0];
+
+        act(() => { result.current.toggleExpansion(deptGroupId); });
+        visible = result.current.getVisibleRows();
+        // Engineering expanded reveals its 2 country subgroups; HR still collapsed (1 group).
+        expect(visible!.length).toBe(2 + 2);
+
+        // 'US' also exists as a country subgroup under HR — select by parentId to
+        // disambiguate and target Engineering's own US subgroup.
+        const countryGroupId = [...result.current.treeNodes.entries()]
+            .find(([, node]) => node.depth === 1 && node.groupingValue === 'US' && node.parentId === deptGroupId)![0];
+
+        act(() => { result.current.toggleExpansion(countryGroupId); });
+        visible = result.current.getVisibleRows();
+        // Expanding Engineering/US additionally reveals its 2 leaf rows (Alice, Bob).
+        expect(visible!.length).toBe(2 + 2 + 2);
+    });
+});
+
 describe('useRowGrouping — groupable: false', () => {
     it('skips a column with groupable:false — no group rows created for that field', () => {
         const columns = [{ field: 'dept', groupable: false as const }];
@@ -135,3 +227,72 @@ describe('useRowGrouping — groupable: false', () => {
         expect(groupCount).toBe(2);
     });
 });
+
+describe('useRowGrouping — group aggregation matches useAggregation semantics', () => {
+    const NULL_ROWS = [
+        { id: 1, g: 'A', v: 10 as number | null },
+        { id: 2, g: 'A', v: null as number | null },
+        { id: 3, g: 'A', v: 20 as number | null },
+    ];
+    const MODEL = ['g'];
+    const aggFor = (fn: string, columns?: { field: string; availableAggregationFunctions?: string[] }[]) => {
+        const aggregationModel = { v: fn };
+        const { result } = renderHook(() => useRowGrouping({ rows: NULL_ROWS, getRowId: GET_ROW_ID, rowGroupingModel: MODEL, aggregationModel, columns }));
+        return [...result.current.treeNodes.values()].find(n => n.depth === 0)!.aggregatedValues!;
+    };
+
+    it('ignores nulls for min / avg / count instead of treating them as 0', () => {
+        expect(aggFor('min').v).toBe(10);
+        expect(aggFor('avg').v).toBe(15);
+        expect(aggFor('count').v).toBe(2);
+        expect(aggFor('sum').v).toBe(30);
+        expect(aggFor('max').v).toBe(20);
+    });
+
+    it('supports the unique aggregation', () => {
+        expect(aggFor('unique').v).toBe(2);
+    });
+
+    it('honors availableAggregationFunctions', () => {
+        expect(aggFor('avg', [{ field: 'v', availableAggregationFunctions: ['sum'] }])).not.toHaveProperty('v');
+    });
+});
+
+describe('useRowGrouping — expansion state', () => {
+    it('preserves user expansion when rows are replaced with edited copies', () => {
+        const { result, rerender } = renderHook(({ rows }) => useRowGrouping({ ...BASE_PARAMS, rows }), { initialProps: { rows: ROWS } });
+        const eng = [...result.current.treeNodes.values()].find(n => n.groupingValue === 'Engineering')!.id;
+        act(() => { result.current.toggleExpansion(eng); });
+        rerender({ rows: ROWS.map(r => (r.id === 1 ? { ...r, name: 'Alicia' } : r)) });
+        expect(result.current.isGroupExpanded(eng)).toBe(true);
+    });
+
+    it('preserves user expansion when an equal rowGroupingModel is passed as a new array', () => {
+        const { result, rerender } = renderHook(({ model }) => useRowGrouping({ ...BASE_PARAMS, rowGroupingModel: model }), { initialProps: { model: ['dept'] } });
+        const eng = [...result.current.treeNodes.values()].find(n => n.groupingValue === 'Engineering')!.id;
+        act(() => { result.current.toggleExpansion(eng); });
+        rerender({ model: ['dept'] });
+        expect(result.current.isGroupExpanded(eng)).toBe(true);
+    });
+
+    it('discards user overrides when defaultGroupingExpansionDepth changes', () => {
+        const { result, rerender } = renderHook(({ depth }) => useRowGrouping({ ...BASE_PARAMS, defaultGroupingExpansionDepth: depth }), { initialProps: { depth: -1 } });
+        const hr = [...result.current.treeNodes.values()].find(n => n.groupingValue === 'HR')!.id;
+        expect(result.current.isGroupExpanded(hr)).toBe(true);
+        act(() => { result.current.toggleExpansion(hr); });
+        expect(result.current.isGroupExpanded(hr)).toBe(false);
+        // depth 1 also expands depth-0 groups by default; the collapse override must not survive.
+        rerender({ depth: 1 });
+        expect(result.current.isGroupExpanded(hr)).toBe(true);
+    });
+
+    it('does not reorder the memoized tree when getVisibleRows sorts', () => {
+        const { result } = renderHook(() => useRowGrouping({ ...BASE_PARAMS, sortModel: SORT_DESC, defaultGroupingExpansionDepth: -1 }));
+        const eng = [...result.current.treeNodes.values()].find(n => n.groupingValue === 'Engineering')!;
+        const before = [...eng.children!];
+        result.current.getVisibleRows();
+        expect(eng.children).toEqual(before);
+    });
+});
+
+const SORT_DESC = [{ field: 'name', sort: 'desc' as const }];

package/lib/hooks/useRowGrouping.ts

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import type {
     GridRowModel,
     GridRowId,
@@ -12,6 +12,7 @@ import type {
 } from '../types';
 import { isRowMatchingFilter } from '../utils/filtering';
 import { compareValues } from '../utils/sorting';
+import { computeAggregations } from '../utils/aggregation';
 
 export interface UseRowGroupingParams<R extends GridRowModel> {
     rows: R[];
@@ -35,6 +36,12 @@ const defaultGetAggregationPosition = (groupNode: GridTreeNode | null): 'inline'
 // infinite re-render loops when callers omit optional params.
 const EMPTY_ROW_GROUPING_MODEL: GridRowGroupingModel = [];
 const EMPTY_AGGREGATION_MODEL: GridAggregationModel = {};
+const EMPTY_OVERRIDES: Map<GridRowId, boolean> = new Map();
+
+interface ExpansionOverrides {
+    configKey: string;
+    overrides: Map<GridRowId, boolean>;
+}
 
 export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingParams<R>) {
     const {
@@ -55,7 +62,16 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
         return map;
     }, [columns]);
 
-    const [expandedGroupIds, setExpandedGroupIds] = useState<Set<GridRowId>>(new Set());
+    // User expand/collapse choices are stored as overrides on top of the depth-based
+    // default, keyed by the grouping config. Rebuilding the tree (row edits, new rows
+    // arrays) keeps them because group ids are deterministic; changing the grouping
+    // config itself discards them.
+    const configKey = `${rowGroupingModel.join('\u001f')}|${defaultGroupingExpansionDepth}`;
+    const [expansionState, setExpansionState] = useState<ExpansionOverrides>(() => ({
+        configKey,
+        overrides: new Map(),
+    }));
+    const overrides = expansionState.configKey === configKey ? expansionState.overrides : EMPTY_OVERRIDES;
 
     const { treeNodes, rootIds, groupingRows } = useMemo(() => {
         const treeNodes = new Map<GridRowId, GridTreeNode>();
@@ -122,24 +138,8 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
                 groupIds.push(groupId);
 
                 // Calculate Aggregations for this group
-                const aggregatedValues: Record<string, unknown> = {};
-                if (aggregationModel) {
-                    Object.entries(aggregationModel).forEach(([aggField, aggType]) => {
-                        const values = groupRowsList.map(r => r[aggField]);
-                        if (aggType === 'sum') {
-                            aggregatedValues[aggField] = values.reduce((a: number, b) => a + (Number(b) || 0), 0);
-                        } else if (aggType === 'min') {
-                            aggregatedValues[aggField] = Math.min(...values.map(v => Number(v) || 0));
-                        } else if (aggType === 'max') {
-                            aggregatedValues[aggField] = Math.max(...values.map(v => Number(v) || 0));
-                        } else if (aggType === 'avg') {
-                            const sum = values.reduce((a: number, b) => a + (Number(b) || 0), 0);
-                            aggregatedValues[aggField] = values.length ? sum / values.length : 0;
-                        } else if (aggType === 'count') {
-                            aggregatedValues[aggField] = values.length;
-                        }
-                    });
-                }
+                const aggregatedValues: Record<string, unknown> =
+                    computeAggregations(groupRowsList, aggregationModel, columnsLookup, 'useRowGrouping');
 
                 const groupRow = {
                     [field]: rawValue,
@@ -185,42 +185,29 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
 
     }, [rows, rowGroupingModel, aggregationModel, getRowId, getAggregationPosition, columnsLookup]);
 
-    useEffect(() => {
-        if (defaultGroupingExpansionDepth === -1) {
-
-            const allGroupIds = new Set<GridRowId>();
-            treeNodes.forEach((node, id) => {
-                if (node.children && node.children.length > 0) {
-                    allGroupIds.add(id);
-                }
-            });
-            setExpandedGroupIds(allGroupIds);
-        } else if (defaultGroupingExpansionDepth > 0) {
-            const depthIds = new Set<GridRowId>();
-            treeNodes.forEach((node, id) => {
-                if (node.depth < defaultGroupingExpansionDepth && node.children && node.children.length > 0) {
-                    depthIds.add(id);
-                }
-            });
-            setExpandedGroupIds(depthIds);
-        } else {
-
-            setExpandedGroupIds(new Set());
-        }
+    const isDefaultExpanded = useCallback((node: GridTreeNode | undefined) => (
+        Boolean(node?.children && node.children.length > 0) &&
+        (defaultGroupingExpansionDepth === -1 || (node?.depth ?? 0) < defaultGroupingExpansionDepth)
+    ), [defaultGroupingExpansionDepth]);
 
-    }, [rowGroupingModel, defaultGroupingExpansionDepth, treeNodes]);
+    const expandedGroupIds = useMemo<Set<GridRowId>>(() => {
+        const ids = new Set<GridRowId>();
+        treeNodes.forEach((node, id) => {
+            if (!node.children || node.children.length === 0) return;
+            if (overrides.get(id) ?? isDefaultExpanded(node)) ids.add(id);
+        });
+        return ids;
+    }, [treeNodes, overrides, isDefaultExpanded]);
 
     const toggleExpansion = useCallback((id: GridRowId) => {
-        setExpandedGroupIds(prev => {
-            const next = new Set(prev);
-            if (next.has(id)) {
-                next.delete(id);
-            } else {
-                next.add(id);
-            }
-            return next;
+        setExpansionState(prev => {
+            const base = prev.configKey === configKey ? prev.overrides : EMPTY_OVERRIDES;
+            const current = base.get(id) ?? isDefaultExpanded(treeNodes.get(id));
+            const next = new Map(base);
+            next.set(id, !current);
+            return { configKey, overrides: next };
         });
-    }, []);
+    }, [configKey, treeNodes, isDefaultExpanded]);
 
     const isGroupExpanded = useCallback((id: GridRowId) => {
         return expandedGroupIds.has(id);
@@ -255,10 +242,8 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
 
         const traverse = (ids: GridRowId[]) => {
 
-            let visibleIds = ids;
-            if (filterModel) {
-                visibleIds = ids.filter(doesNodeMatchFilter);
-            }
+            // Copy before sorting: ids may be node.children / rootIds from the memoized tree.
+            const visibleIds = filterModel ? ids.filter(doesNodeMatchFilter) : [...ids];
 
             if (sortModel && sortModel.length > 0) {
                 visibleIds.sort((aId, bId) => {
@@ -299,15 +284,13 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
                     };
                     result.push(enhancedRow);
 
-                    if (isExpandedGroupIds.has(id) && isGroup) {
+                    if (expandedGroupIds.has(id) && isGroup) {
                         traverse(node.children!);
                     }
                 }
             });
         };
 
-        const isExpandedGroupIds = expandedGroupIds; 
-
         traverse(rootIds);
 
         return result;