@opencorestack/opengridx 0.1.8 → 1.0.0

package/lib/hooks/features/useAggregation.test.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useAggregation, formatAggregationValue } from './useAggregation';
+
+const ROWS = [
+    { id: 1, salary: 50000, dept: 'Eng', active: true },
+    { id: 2, salary: 60000, dept: 'Eng', active: false },
+    { id: 3, salary: 70000, dept: 'HR', active: true },
+    { id: 4, salary: null, dept: 'HR', active: true },
+    { id: 5, salary: 80000, dept: 'Eng', active: null },
+];
+
+describe('formatAggregationValue', () => {
+    it('returns em-dash for null', () => {
+        expect(formatAggregationValue(null, 'sum')).toBe('—');
+    });
+    it('formats avg with up to 2 decimal places', () => {
+        expect(formatAggregationValue(1234.5678, 'avg')).toBe('1,234.57');
+    });
+    it('formats non-avg numbers without decimals', () => {
+        expect(formatAggregationValue(1234567, 'sum')).toBe('1,234,567');
+    });
+    it('converts non-numeric to string', () => {
+        expect(formatAggregationValue('Engineering', 'unique')).toBe('Engineering');
+    });
+});
+
+describe('useAggregation — client-side', () => {
+    it('returns empty result when no aggregation model', () => {
+        const { result } = renderHook(() =>
+            useAggregation({ rows: ROWS, aggregationModel: {}, isServerSide: false })
+        );
+        expect(result.current.aggregationResult).toEqual({});
+    });
+
+    it('computes sum correctly, skipping nulls', () => {
+        const { result } = renderHook(() =>
+            useAggregation({
+                rows: ROWS,
+                aggregationModel: { salary: 'sum' },
+                isServerSide: false,
+            })
+        );
+        expect(result.current.aggregationResult.salary).toBe(260000);
+    });
+
+    it('computes avg correctly', () => {
+        const { result } = renderHook(() =>
+            useAggregation({
+                rows: ROWS,
+                aggregationModel: { salary: 'avg' },
+                isServerSide: false,
+            })
+        );
+        expect(result.current.aggregationResult.salary).toBeCloseTo(65000);
+    });
+
+    it('computes count of non-null values', () => {
+        const { result } = renderHook(() =>
+            useAggregation({
+                rows: ROWS,
+                aggregationModel: { salary: 'count' },
+                isServerSide: false,
+            })
+        );
+        expect(result.current.aggregationResult.salary).toBe(4);
+    });
+
+    it('computes min and max', () => {
+        const { result } = renderHook(() =>
+            useAggregation({
+                rows: ROWS,
+                aggregationModel: { salary: 'min' },
+                isServerSide: false,
+            })
+        );
+        expect(result.current.aggregationResult.salary).toBe(50000);
+
+        const { result: r2 } = renderHook(() =>
+            useAggregation({
+                rows: ROWS,
+                aggregationModel: { salary: 'max' },
+                isServerSide: false,
+            })
+        );
+        expect(r2.current.aggregationResult.salary).toBe(80000);
+    });
+
+    it('computes unique count', () => {
+        const { result } = renderHook(() =>
+            useAggregation({
+                rows: ROWS,
+                aggregationModel: { dept: 'unique' },
+                isServerSide: false,
+            })
+        );
+        expect(result.current.aggregationResult.dept).toBe(2);
+    });
+
+    it('handles unknown function gracefully — skips the field', () => {
+        const { result } = renderHook(() =>
+            useAggregation({
+                rows: ROWS,
+                aggregationModel: { salary: 'median' as 'sum' },
+                isServerSide: false,
+            })
+        );
+        expect(result.current.aggregationResult.salary).toBeUndefined();
+    });
+
+    it('returns {} and does not mutate state when isServerSide=true', () => {
+        const { result } = renderHook(() =>
+            useAggregation({
+                rows: ROWS,
+                aggregationModel: { salary: 'sum' },
+                isServerSide: true,
+            })
+        );
+        // No dataSource → serverResult stays {}
+        expect(result.current.aggregationResult).toEqual({});
+    });
+
+    it('returns serverAggregationResults when provided', () => {
+        const serverResults = { salary: 999999 };
+        const { result } = renderHook(() =>
+            useAggregation({
+                rows: ROWS,
+                aggregationModel: { salary: 'sum' },
+                isServerSide: true,
+                serverAggregationResults: serverResults,
+            })
+        );
+        expect(result.current.aggregationResult).toEqual(serverResults);
+    });
+});

package/lib/hooks/features/useAggregation.ts

@@ -11,15 +11,15 @@ import type {
 
 export type BuiltInAggFn = 'sum' | 'avg' | 'count' | 'min' | 'max' | 'unique';
 
-const AGGREGATION_FUNCTIONS: Record<BuiltInAggFn, (values: any[]) => any> = {
+const AGGREGATION_FUNCTIONS: Record<BuiltInAggFn, (values: unknown[]) => unknown> = {
     sum: (values) => {
         const nums = values.filter((v) => v != null && !isNaN(Number(v)));
-        return nums.reduce((acc, v) => acc + Number(v), 0);
+        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, v) => acc + Number(v), 0) / nums.length;
+        return nums.reduce((acc: number, v) => acc + Number(v), 0) / nums.length;
     },
     count: (values) => values.filter((v) => v != null).length,
     min: (values) => {
@@ -33,7 +33,7 @@ const AGGREGATION_FUNCTIONS: Record<BuiltInAggFn, (values: any[]) => any> = {
     unique: (values) => new Set(values.filter((v) => v != null)).size,
 };
 
-export function formatAggregationValue(value: any, fnName: string): string {
+export function formatAggregationValue(value: unknown, fnName: string): string {
     if (value == null) return '—';
     if (typeof value === 'number') {
         if (fnName === 'avg') {
@@ -57,7 +57,7 @@ export interface UseAggregationParams<R extends GridRowModel> {
 export interface UseAggregationReturn {
         aggregationResult: GridAggregationResult;
         isLoading: boolean;
-        error: any;
+        error: unknown;
 }
 
 export function useAggregation<R extends GridRowModel>(
@@ -83,7 +83,7 @@ export function useAggregation<R extends GridRowModel>(
                 console.warn(`[useAggregation] Unknown aggregation function: "${fnName}"`);
                 continue;
             }
-            const values = rows.map((row) => (row as any)[field]);
+            const values = rows.map((row) => (row as GridRowModel)[field]);
             result[field] = fn(values);
         }
         return result;
@@ -91,7 +91,7 @@ export function useAggregation<R extends GridRowModel>(
 
     const [serverResult, setServerResult] = useState<GridAggregationResult>({});
     const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState<any>(null);
+    const [error, setError] = useState<unknown>(null);
     const requestIdRef = useRef(0);
 
     const fetchServerAggregations = useCallback(async () => {

package/lib/hooks/features/useGridClipboard.ts

@@ -34,7 +34,7 @@ async function writeToClipboard(text: string): Promise<void> {
   let fallbackSuccess = false;
   try {
     fallbackSuccess = copyTextSynchronous(text);
-  } catch (e) {
+  } catch {
     // Ignore fallback errors
   }
 

package/lib/hooks/features/useGridDataSource.ts

@@ -22,7 +22,7 @@ interface UseGridDataSourceParams<R extends GridRowModel> {
   setRows: (rows: R[] | ((prev: R[]) => R[]), preserveRowCount?: boolean) => void;
   setRowCount: (count: number) => void;
   setDataSourceLoading: (loading: boolean) => void;
-  setDataSourceError: (error: any) => void;
+  setDataSourceError: (error: unknown) => void;
     onAggregationResults?: (results: GridAggregationResult) => void;
 }
 
@@ -108,7 +108,7 @@ export function useGridDataSource<R extends GridRowModel>(params: UseGridDataSou
       if (response.rowCount !== undefined) {
         setRowCount(response.rowCount);
       } else if (paginationMode === 'infinite') {
-
+        // rowCount is not required for infinite scroll — the grid uses appendRows
       }
 
       prevParamsRef.current = {

package/lib/hooks/features/useGridEditing.ts

@@ -1,13 +1,12 @@
-import { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import type { GridRowId, GridRowModel } from '../../types';
 
 export interface GridEditingState {
-
     editingCell: {
         id: GridRowId;
         field: string;
-        value: any;
-        originalValue: any;
+        value: unknown;
+        originalValue: unknown;
     } | null;
 }
 
@@ -15,41 +14,43 @@ export interface UseGridEditingParams<R extends GridRowModel> {
     rows: R[];
     getRowId: (row: R) => GridRowId;
     processRowUpdate?: (newRow: R, oldRow: R) => R | Promise<R>;
-    onProcessRowUpdateError?: (error: any) => void;
-    onRowChange?: (newRow: R) => void; 
+    onProcessRowUpdateError?: (error: unknown) => void;
+    onRowChange?: (newRow: R) => void;
 }
 
+type EditingCellState = GridEditingState['editingCell'];
+
 export function useGridEditing<R extends GridRowModel>(params: UseGridEditingParams<R>) {
-    const { 
-        rows, 
-        getRowId, 
-        processRowUpdate, 
+    const {
+        rows,
+        getRowId,
+        processRowUpdate,
         onProcessRowUpdateError,
-        onRowChange 
+        onRowChange
     } = params;
 
-    const [editingCell, setEditingCellState] = useState<GridEditingState['editingCell']>(null);
-    const editingCellRef = useRef<GridEditingState['editingCell']>(null);
+    const [editingCell, setEditingCellState] = useState<EditingCellState>(null);
+    const editingCellRef = useRef<EditingCellState>(null);
 
-    const setEditingCell = useCallback((val: any) => {
+    const setEditingCell = useCallback((val: React.SetStateAction<EditingCellState>) => {
         setEditingCellState(val);
         editingCellRef.current = typeof val === 'function' ? val(editingCellRef.current) : val;
     }, []);
 
-    const startCellEdit = useCallback((params: { id: GridRowId, field: string, value: any }) => {
+    const startCellEdit = useCallback((editParams: { id: GridRowId; field: string; value: unknown }) => {
         setEditingCell({
-            id: params.id,
-            field: params.field,
-            value: params.value,
-            originalValue: params.value
+            id: editParams.id,
+            field: editParams.field,
+            value: editParams.value,
+            originalValue: editParams.value
         });
-    }, []);
+    }, [setEditingCell]);
 
-    const stopCellEdit = useCallback(async (params?: { cancel?: boolean }) => {
+    const stopCellEdit = useCallback(async (stopParams?: { cancel?: boolean }) => {
         const currentCell = editingCellRef.current;
         if (!currentCell) return;
 
-        if (params?.cancel) {
+        if (stopParams?.cancel) {
             setEditingCell(null);
             return;
         }
@@ -63,8 +64,8 @@ export function useGridEditing<R extends GridRowModel>(params: UseGridEditingPar
 
         const existingRow = rows.find(r => getRowId(r) === id);
         if (!existingRow) {
-             setEditingCell(null);
-             return;
+            setEditingCell(null);
+            return;
         }
 
         const newRow = { ...existingRow, [field]: value };
@@ -78,18 +79,16 @@ export function useGridEditing<R extends GridRowModel>(params: UseGridEditingPar
             }
             setEditingCell(null);
         } catch (error) {
-            if (onProcessRowUpdateError) {
-                onProcessRowUpdateError(error);
-            }
+            onProcessRowUpdateError?.(error);
         }
 
-    }, [editingCell, rows, getRowId, processRowUpdate, onRowChange, onProcessRowUpdateError]);
+    }, [setEditingCell, rows, getRowId, processRowUpdate, onRowChange, onProcessRowUpdateError]);
 
-    const setEditCellValue = useCallback((params: { id: GridRowId, field: string, value: any }) => {
-        if (editingCell && editingCell.id === params.id && editingCell.field === params.field) {
-            setEditingCell((prev: any) => prev ? { ...prev, value: params.value } : null);
+    const setEditCellValue = useCallback((editParams: { id: GridRowId; field: string; value: unknown }) => {
+        if (editingCell && editingCell.id === editParams.id && editingCell.field === editParams.field) {
+            setEditingCell(prev => prev ? { ...prev, value: editParams.value } : null);
         }
-    }, [editingCell]);
+    }, [editingCell, setEditingCell]);
 
     return {
         editingCell,

package/lib/hooks/features/usePivot.test.ts

@@ -0,0 +1,202 @@
+/**
+ * Tests for usePivot — including regression tests for grand total correctness.
+ *
+ * Bug (fixed): avg/min/max grand total was computed by re-aggregating
+ * per-row pivot values instead of re-computing from the raw source rows.
+ * This produced wrong results whenever groups had unequal sizes.
+ *
+ * Example of the failure:
+ *   Group A: avg salary = (30k + 50k) / 2 = 40k
+ *   Group B: avg salary = (90k) / 1 = 90k
+ *   Summing those per-row averages → 130k / 2 = 65k  ← WRONG
+ *   Correct grand avg → (30k + 50k + 90k) / 3 = 56.67k
+ */
+
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { usePivot } from './usePivot';
+import type { GridColDef } from '../../types';
+import type { GridPivotModel } from '../../types';
+
+const COLS: GridColDef[] = [
+    { field: 'dept',   headerName: 'Department', width: 120 },
+    { field: 'region', headerName: 'Region',     width: 120 },
+    { field: 'salary', headerName: 'Salary',     width: 120, type: 'number' },
+];
+
+// Intentionally uneven groups so naive "average of averages" gives wrong results.
+//
+// dept=Eng  → salaries [30000, 50000]  → avg=40000, min=30000, max=50000
+// dept=HR   → salaries [90000]         → avg=90000, min=90000, max=90000
+//
+// Grand total correct:
+//   avg = (30000+50000+90000)/3 ≈ 56666.67
+//   min = 30000
+//   max = 90000
+const ROWS = [
+    { id: 1, dept: 'Eng', region: 'US', salary: 30000 },
+    { id: 2, dept: 'Eng', region: 'US', salary: 50000 },
+    { id: 3, dept: 'HR',  region: 'US', salary: 90000 },
+];
+
+const MODEL_NO_COL_FIELDS: GridPivotModel = {
+    rowFields:    ['dept'],
+    columnFields: [],
+    valueFields:  [
+        { field: 'salary', aggFn: 'sum'   },
+        { field: 'salary', aggFn: 'avg'   },
+        { field: 'salary', aggFn: 'count' },
+        { field: 'salary', aggFn: 'min'   },
+        { field: 'salary', aggFn: 'max'   },
+    ],
+};
+
+function grandTotalRow(pivotRows: ReturnType<typeof usePivot>['pivotRows']) {
+    return pivotRows.find(r => r.id === '__pivot_grand_total__')!;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Basic functionality
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('usePivot — basic', () => {
+    it('returns isValid=false when disabled', () => {
+        const { result } = renderHook(() =>
+            usePivot(ROWS, COLS, MODEL_NO_COL_FIELDS, false)
+        );
+        expect(result.current.isValid).toBe(false);
+        expect(result.current.pivotRows).toHaveLength(0);
+    });
+
+    it('returns isValid=false when valueFields is empty', () => {
+        const { result } = renderHook(() =>
+            usePivot(ROWS, COLS, { ...MODEL_NO_COL_FIELDS, valueFields: [] }, true)
+        );
+        expect(result.current.isValid).toBe(false);
+    });
+
+    it('produces one pivot row per unique rowField value plus grand total', () => {
+        const { result } = renderHook(() =>
+            usePivot(ROWS, COLS, MODEL_NO_COL_FIELDS, true)
+        );
+        // 2 groups (Eng, HR) + 1 grand total
+        expect(result.current.pivotRows).toHaveLength(3);
+        expect(result.current.isValid).toBe(true);
+    });
+
+    it('computes per-group sum correctly', () => {
+        const model: GridPivotModel = {
+            ...MODEL_NO_COL_FIELDS,
+            valueFields: [{ field: 'salary', aggFn: 'sum' }],
+        };
+        const { result } = renderHook(() => usePivot(ROWS, COLS, model, true));
+        const rows = result.current.pivotRows;
+        const eng = rows.find(r => r.dept === 'Eng')!;
+        const hr  = rows.find(r => r.dept === 'HR')!;
+
+        expect(eng['salarysum']).toBe(80000);
+        expect(hr['salarysum']).toBe(90000);
+    });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Regression: grand total avg/min/max
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('usePivot — grand total regression', () => {
+    it('grand total sum = sum of all raw values', () => {
+        const model: GridPivotModel = {
+            ...MODEL_NO_COL_FIELDS,
+            valueFields: [{ field: 'salary', aggFn: 'sum' }],
+        };
+        const { result } = renderHook(() => usePivot(ROWS, COLS, model, true));
+        const gt = grandTotalRow(result.current.pivotRows);
+        expect(gt['salarysum']).toBe(170000);
+    });
+
+    it('grand total avg = raw mean, NOT average of per-group averages', () => {
+        // The naive bug: (40000 + 90000) / 2 = 65000
+        // The correct value: (30000 + 50000 + 90000) / 3 ≈ 56666.67
+        const model: GridPivotModel = {
+            ...MODEL_NO_COL_FIELDS,
+            valueFields: [{ field: 'salary', aggFn: 'avg' }],
+        };
+        const { result } = renderHook(() => usePivot(ROWS, COLS, model, true));
+        const gt = grandTotalRow(result.current.pivotRows);
+
+        const correct = (30000 + 50000 + 90000) / 3;
+        const bugged  = (40000 + 90000) / 2;
+
+        expect(gt['salaryavg']).toBeCloseTo(correct, 2);
+        expect(gt['salaryavg']).not.toBeCloseTo(bugged, 2);
+    });
+
+    it('grand total min = minimum across ALL raw rows, not minimum of per-group minimums', () => {
+        // With equal-size groups the two approaches coincidentally match.
+        // This dataset has unequal groups, so we must use raw data.
+        const model: GridPivotModel = {
+            ...MODEL_NO_COL_FIELDS,
+            valueFields: [{ field: 'salary', aggFn: 'min' }],
+        };
+        const { result } = renderHook(() => usePivot(ROWS, COLS, model, true));
+        const gt = grandTotalRow(result.current.pivotRows);
+        expect(gt['salarymin']).toBe(30000);
+    });
+
+    it('grand total max = maximum across ALL raw rows', () => {
+        const model: GridPivotModel = {
+            ...MODEL_NO_COL_FIELDS,
+            valueFields: [{ field: 'salary', aggFn: 'max' }],
+        };
+        const { result } = renderHook(() => usePivot(ROWS, COLS, model, true));
+        const gt = grandTotalRow(result.current.pivotRows);
+        expect(gt['salarymax']).toBe(90000);
+    });
+
+    it('grand total count = total number of non-null raw values', () => {
+        const model: GridPivotModel = {
+            ...MODEL_NO_COL_FIELDS,
+            valueFields: [{ field: 'salary', aggFn: 'count' }],
+        };
+        const { result } = renderHook(() => usePivot(ROWS, COLS, model, true));
+        const gt = grandTotalRow(result.current.pivotRows);
+        // sum of per-group counts = 2 + 1 = 3, which also equals total count here.
+        expect(gt['salarycount']).toBe(3);
+    });
+
+    it('grand total avg ignores null salary values', () => {
+        const rowsWithNull = [
+            ...ROWS,
+            { id: 4, dept: 'Eng', region: 'US', salary: null as unknown as number },
+        ];
+        const model: GridPivotModel = {
+            ...MODEL_NO_COL_FIELDS,
+            valueFields: [{ field: 'salary', aggFn: 'avg' }],
+        };
+        const { result } = renderHook(() => usePivot(rowsWithNull, COLS, model, true));
+        const gt = grandTotalRow(result.current.pivotRows);
+
+        // null must be excluded: (30000+50000+90000)/3 not /4
+        const correct = (30000 + 50000 + 90000) / 3;
+        expect(gt['salaryavg']).toBeCloseTo(correct, 2);
+    });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Pivot with column fields (colKeys drive dynamic column generation)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('usePivot — with columnFields', () => {
+    it('produces one pivot column per unique columnField value × valueField', () => {
+        const model: GridPivotModel = {
+            rowFields:    ['dept'],
+            columnFields: ['region'],
+            valueFields:  [{ field: 'salary', aggFn: 'sum' }],
+        };
+        const { result } = renderHook(() => usePivot(ROWS, COLS, model, true));
+        // colKeys = ['US'] → 1 col per valueField = 1 column (+ dept label column)
+        expect(result.current.colKeys).toEqual(['US']);
+        // Total pivot columns = 1 row-field col + 1 value col
+        expect(result.current.pivotColumns).toHaveLength(2);
+    });
+});

package/lib/hooks/useColumnReorder.ts

@@ -84,7 +84,7 @@ export function useColumnReorder<R extends GridRowModel = GridRowModel>(
 
       if (onColumnOrderChange) {
         onColumnOrderChange({
-          column: column as any,
+          column: column as unknown as GridColDef,
           oldIndex,
           targetIndex,
         });

package/lib/hooks/useRowGrouping.ts

@@ -50,7 +50,7 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
             return { treeNodes, rootIds, groupingRows };
         }
 
-        const getGroupId = (field: string, value: any, parentId: GridRowId | null) => {
+        const getGroupId = (field: string, value: unknown, parentId: GridRowId | null) => {
             return `auto-group-${field}-${value}-${parentId || 'root'}`;
         };
 
@@ -75,7 +75,7 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
             }
 
             const field = rowGroupingModel[depth];
-            const groups = new Map<any, R[]>();
+            const groups = new Map<string, R[]>();
 
             // Group current rows by value of the current field
             currentRows.forEach(row => {
@@ -99,18 +99,18 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
                 groupIds.push(groupId);
 
                 // Calculate Aggregations for this group
-                const aggregatedValues: Record<string, any> = {};
+                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, b) => (Number(a) || 0) + (Number(b) || 0), 0);
+                            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, b) => (Number(a) || 0) + (Number(b) || 0), 0);
+                            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;
@@ -118,11 +118,11 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
                     });
                 }
 
-                const groupRow: any = {
-                    [field]: rawValue, 
-                    ...aggregatedValues, 
-                    id: groupId 
-                };
+                const groupRow = {
+                    [field]: rawValue,
+                    ...aggregatedValues,
+                    id: groupId
+                } as unknown as R;
 
                 groupingRows.set(groupId, groupRow);
 
@@ -183,7 +183,7 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
             setExpandedGroupIds(new Set());
         }
 
-    }, [rowGroupingModel, defaultGroupingExpansionDepth]);
+    }, [rowGroupingModel, defaultGroupingExpansionDepth, treeNodes]);
 
     const toggleExpansion = useCallback((id: GridRowId) => {
         setExpandedGroupIds(prev => {
@@ -243,8 +243,8 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
                     if (!rowA || !rowB) return 0;
 
                     for (const sortItem of sortModel) {
-                        const valA = (rowA as any)[sortItem.field];
-                        const valB = (rowB as any)[sortItem.field];
+                        const valA = rowA[sortItem.field];
+                        const valB = rowB[sortItem.field];
                         const compareResult = compareValues(valA, valB, sortItem.sort);
                         if (compareResult !== 0) return compareResult;
                     }
@@ -287,7 +287,7 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
 
         return result;
 
-    }, [rows, getRowId, treeNodes, rootIds, groupingRows, filterModel, sortModel, expandedGroupIds]);
+    }, [rows, getRowId, treeNodes, rootIds, groupingRows, filterModel, sortModel, expandedGroupIds, rowGroupingModel]);
 
     const getNode = useCallback((id: GridRowId) => treeNodes.get(id), [treeNodes]);
 

package/lib/hooks/useTreeData.ts

@@ -277,7 +277,7 @@ export function useTreeData<R extends GridRowModel>(props: UseTreeDataProps<R>)
                         ...row,
                         _treeDepth: node.depth,
                         _isExpanded: expandedGroupIds.has(id),
-                        _hasChildren: (node.children && node.children.length > 0) || (node.serverChildrenCount && node.serverChildrenCount > 0),
+                        _hasChildren: Boolean((node.children && node.children.length > 0) || (node.serverChildrenCount && node.serverChildrenCount > 0)),
                         _descendantCount: node.children ? node.children.length : 0
                     };
                     result.push(enhancedRow);

package/lib/state/types.ts

@@ -22,7 +22,7 @@ export interface GridPaginationState {
 
 export interface GridDataSourceState {
   loading: boolean;
-  error?: any;
+  error?: unknown;
 }
 
 export interface GridColumnsState {

package/lib/state/useGridStateStorage.ts

@@ -47,7 +47,7 @@ function writeToStorage(
       : state;
     storage!.setItem(key, JSON.stringify(toWrite));
   } catch {
-
+    // swallow localStorage write errors (private browsing, quota exceeded)
   }
 }
 
@@ -70,7 +70,7 @@ export function useGridStateStorage(
     if (!storage) return undefined;
     return readFromStorage(key, storage);
 
-  }, [key]); 
+  }, [key, storage]);
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const latestStateRef = useRef<GridState | null>(null);