@opencorestack/opengridx 0.1.9 → 1.0.1

package/lib/hooks/core/useGridVirtualization.ts

@@ -0,0 +1,186 @@
+import { useMemo } from 'react';
+import type { GridRowModel, GridColDef } from '../../types';
+import type { LayoutResult } from './useLayout';
+
+export interface UseGridVirtualizationParams<R extends GridRowModel> {
+    layout: LayoutResult<R>;
+    scrollTop: number;
+    scrollLeft: number;
+    viewportWidth: number;
+    viewportHeight: number;
+    autoHeight: boolean;
+    rowReordering: boolean;
+    hasDetailPanel: boolean;
+    checkboxSelection: boolean;
+    pinCheckboxColumn: boolean;
+    pinExpandColumn: boolean;
+}
+
+export interface GridVirtualizationResult<R extends GridRowModel = GridRowModel> {
+    renderContext: {
+        firstRowIndex: number;
+        lastRowIndex: number;
+        firstColumnIndex: number;
+        lastColumnIndex: number;
+    };
+    offsetTop: number;
+    offsetLeft: number;
+    totalHeight: number;
+    pinnedTopHeight: number;
+    pinnedBottomHeight: number;
+    totalWidth: number;
+    rowHeights: number[];
+    cumulativeHeights: number[];
+    virtualColumns: (GridColDef<R> & { width: number })[];
+    columnMetrics: {
+        leftPinnedWidth: number;
+        rightPinnedWidth: number;
+        unpinnedAccWidths: number[];
+        unpinnedCols: { field: string; width: number }[];
+        totalSpecialsWidth: number;
+        pinnedSpecialsWidth: number;
+    };
+}
+
+export function useGridVirtualization<R extends GridRowModel>(
+    params: UseGridVirtualizationParams<R>
+): GridVirtualizationResult<R> {
+    const {
+        layout,
+        scrollTop,
+        scrollLeft,
+        viewportWidth: rawViewportWidth,
+        viewportHeight: rawViewportHeight,
+        autoHeight,
+        rowReordering,
+        hasDetailPanel,
+        checkboxSelection,
+        pinCheckboxColumn,
+        pinExpandColumn,
+    } = params;
+
+    return useMemo<GridVirtualizationResult<R>>(() => {
+        const {
+            unpinnedAccWidths,
+            unpinnedColsWithWidth,
+            leftPinnedCols,
+            rightPinnedCols,
+            totalWidth,
+            leftWidth,
+            rightWidth,
+            unpinnedTotalWidth,
+            systemColumnsWidth,
+            cumulativeHeights,
+            pinnedTopHeight,
+            pinnedBottomHeight,
+            unpinnedRowsHeight,
+            rowHeights,
+            unpinnedRowsLength,
+        } = layout;
+
+        const viewportWidth  = rawViewportWidth  || 1000;
+        const viewportHeight = autoHeight
+            ? pinnedTopHeight + unpinnedRowsHeight + pinnedBottomHeight + 50
+            : rawViewportHeight || 600;
+
+        const overscanCols = 6;
+        const visibleLocalStart = Math.max(0, scrollLeft - leftWidth);
+        const visibleLocalEnd   = scrollLeft + viewportWidth - leftWidth;
+
+        let firstUnpinnedIndex = 0;
+        let lastUnpinnedIndex  = unpinnedColsWithWidth.length - 1;
+
+        let low = 0, high = unpinnedAccWidths.length - 1;
+        while (low <= high) {
+            const mid = (low + high) >>> 1;
+            if (unpinnedAccWidths[mid] < visibleLocalStart) { low = mid + 1; } else { high = mid - 1; }
+        }
+        firstUnpinnedIndex = Math.max(0, low - overscanCols);
+
+        for (let i = firstUnpinnedIndex; i < unpinnedAccWidths.length; i++) {
+            if ((i === 0 ? 0 : unpinnedAccWidths[i - 1]) > visibleLocalEnd) {
+                lastUnpinnedIndex = Math.min(unpinnedColsWithWidth.length - 1, i + overscanCols);
+                break;
+            }
+            lastUnpinnedIndex = Math.min(unpinnedColsWithWidth.length - 1, i + overscanCols);
+        }
+
+        const leftSpacerWidth  = firstUnpinnedIndex > 0 ? unpinnedAccWidths[firstUnpinnedIndex - 1] : 0;
+        const rightSpacerWidth = unpinnedTotalWidth - unpinnedAccWidths[lastUnpinnedIndex];
+
+        const virtualColumns: (GridColDef<R> & { width: number })[] = [
+            ...leftPinnedCols,
+            ...(leftSpacerWidth  > 0 ? [{ field: '__spacer_left__',  width: leftSpacerWidth,  isSpacer: true }] : []),
+            ...unpinnedColsWithWidth.slice(firstUnpinnedIndex, lastUnpinnedIndex + 1),
+            ...(rightSpacerWidth > 0 ? [{ field: '__spacer_right__', width: rightSpacerWidth, isSpacer: true }] : []),
+            ...rightPinnedCols,
+        ];
+
+        const hasHorizontalScroll = viewportWidth > 0 && totalWidth > viewportWidth;
+        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;
+
+        let rLow = 0, rHigh = cumulativeHeights.length - 1;
+        while (rLow <= rHigh) {
+            const mid = (rLow + rHigh) >>> 1;
+            if (cumulativeHeights[mid] < scrollTop) { rLow = mid + 1; } else { rHigh = mid - 1; }
+        }
+        firstRowIndex = Math.max(0, rLow - overscanRows);
+        offsetTop = firstRowIndex > 0 ? cumulativeHeights[firstRowIndex - 1] : 0;
+
+        for (let i = firstRowIndex; i < cumulativeHeights.length; i++) {
+            if (cumulativeHeights[i] >= scrollTop + viewportHeight) {
+                lastRowIndex = Math.min(unpinnedRowsLength - 1, i + overscanRows);
+                break;
+            }
+        }
+
+        const pinnedSpecialsWidth =
+            (rowReordering ? 48 : 0) +
+            (hasDetailPanel && pinExpandColumn ? 48 : 0) +
+            (checkboxSelection && pinCheckboxColumn ? 48 : 0);
+
+        return {
+            renderContext: {
+                firstRowIndex,
+                lastRowIndex,
+                firstColumnIndex: firstUnpinnedIndex,
+                lastColumnIndex:  lastUnpinnedIndex,
+            },
+            offsetTop,
+            offsetLeft: 0,
+            totalHeight,
+            pinnedTopHeight,
+            pinnedBottomHeight,
+            totalWidth,
+            rowHeights,
+            cumulativeHeights,
+            virtualColumns,
+            columnMetrics: {
+                leftPinnedWidth:   leftWidth,
+                rightPinnedWidth:  rightWidth,
+                unpinnedAccWidths,
+                unpinnedCols:      unpinnedColsWithWidth,
+                totalSpecialsWidth: systemColumnsWidth,
+                pinnedSpecialsWidth,
+            },
+        };
+    }, [
+        layout,
+        scrollTop,
+        scrollLeft,
+        rawViewportWidth,
+        rawViewportHeight,
+        autoHeight,
+        rowReordering,
+        hasDetailPanel,
+        checkboxSelection,
+        pinCheckboxColumn,
+        pinExpandColumn,
+    ]);
+}

package/lib/hooks/core/useGridVisibleRows.ts

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import type { GridRowModel, GridRowId } from '../../types';
+
+interface RenderContext {
+    firstRowIndex: number;
+    lastRowIndex: number;
+}
+
+export interface UseGridVisibleRowsParams<R extends GridRowModel> {
+    renderContext: RenderContext;
+    pinnedTopRows: R[];
+    pinnedBottomRows: R[];
+    paginatedUnpinnedRows: R[];
+    sortedUnpinnedRows: R[];
+    pagination: boolean;
+}
+
+export interface GridVisibleRow<R extends GridRowModel> {
+    row: R;
+    rowIndex: number;
+}
+
+export function useGridVisibleRows<R extends GridRowModel>(
+    params: UseGridVisibleRowsParams<R>
+): GridVisibleRow<R>[] {
+    const {
+        renderContext,
+        pinnedTopRows,
+        pinnedBottomRows,
+        paginatedUnpinnedRows,
+        sortedUnpinnedRows,
+        pagination,
+    } = params;
+
+    return useMemo<GridVisibleRow<R>[]>(() => {
+        const { firstRowIndex, lastRowIndex } = renderContext;
+        const centerRows = pagination ? paginatedUnpinnedRows : sortedUnpinnedRows;
+        const topPinnedCount = pinnedTopRows.length;
+
+        const topPinned = pinnedTopRows.map((row, index) => ({ row, rowIndex: index }));
+        const bottomPinned = pinnedBottomRows.map((row, index) => ({
+            row,
+            rowIndex: topPinnedCount + centerRows.length + index,
+        }));
+
+        const centerStartIndex = Math.max(0, firstRowIndex - topPinnedCount);
+        const centerEndIndex = Math.min(centerRows.length, lastRowIndex - topPinnedCount + 1);
+
+        const centerVisible = centerRows
+            .slice(centerStartIndex, centerEndIndex)
+            .map((row, index) => ({
+                row,
+                rowIndex: topPinnedCount + centerStartIndex + index,
+            }));
+
+        const combined = [...topPinned, ...centerVisible, ...bottomPinned];
+
+        // Deduplication guard: a row ID in both pinnedRows and rows would cause React key collisions
+        const seenIds = new Set<GridRowId>();
+        return combined.filter(item => {
+            if (seenIds.has(item.row.id)) return false;
+            seenIds.add(item.row.id);
+            return true;
+        });
+    }, [renderContext, pinnedTopRows, pinnedBottomRows, paginatedUnpinnedRows, sortedUnpinnedRows, pagination]);
+}

package/lib/hooks/core/useLayout.ts

@@ -79,9 +79,6 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         checkboxSelection,
         hasDetailPanel,
         rowReordering,
-        pinCheckboxColumn,
-        pinExpandColumn,
-        autoHeight,
         paginationMode,
         isLoading,
         pageSize,
@@ -344,9 +341,6 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         checkboxSelection,
         hasDetailPanel,
         rowReordering,
-        pinCheckboxColumn,
-        pinExpandColumn,
-        autoHeight,
         paginationMode,
         isLoading,
         pageSize,

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/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;
 }
 

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,
         });