@opencorestack/opengridx 0.1.8 → 1.0.0

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type {
     GridFilterModel,
     GridFilterItem,
@@ -30,34 +30,42 @@ const FilterRow: React.FC<{
     const currentOperator = item?.operator ?? operators[0];
 
     // Local input state to prevent full filter-panel re-render on every keystroke
-    const [localValue, setLocalValue] = useState(item?.value ?? '');
+    const [localValue, setLocalValue] = useState<string>(item?.value != null ? String(item.value) : '');
     const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
+    const itemRef = useRef(item);
+    const colFieldRef = useRef(col.field);
+    const operatorRef = useRef(currentOperator);
+    useLayoutEffect(() => {
+        onChangeRef.current = onChange;
+        itemRef.current = item;
+        colFieldRef.current = col.field;
+        operatorRef.current = currentOperator;
+    });
 
     // Sync when the external item changes (e.g. operator change, clear)
     const prevItemValue = useRef(item?.value);
     useEffect(() => {
         if (item?.value !== prevItemValue.current) {
             prevItemValue.current = item?.value;
-            setLocalValue(item?.value ?? '');
+            setLocalValue(item?.value != null ? String(item.value) : '');
         }
     }, [item?.value]);
 
     // Debounce propagating the value upward (300ms)
     useEffect(() => {
         const handler = setTimeout(() => {
-            const currentValue = item?.value ?? '';
+            const currentItem = itemRef.current;
+            const currentValue = currentItem?.value ?? '';
             if (localValue !== currentValue) {
                 onChangeRef.current({
-                    id: item?.id ?? `${col.field}-${Date.now()}`,
-                    field: col.field,
-                    operator: currentOperator as GridFilterOperator,
+                    id: currentItem?.id ?? `${colFieldRef.current}-${Date.now()}`,
+                    field: colFieldRef.current,
+                    operator: operatorRef.current as GridFilterOperator,
                     value: localValue,
                 });
             }
         }, 300);
         return () => clearTimeout(handler);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [localValue]);
 
     const handleOperatorChange = (op: string) => {
@@ -158,7 +166,7 @@ const FilterRow: React.FC<{
 // ── Root panel ────────────────────────────────────────────────────────────────
 
 export const FilterPanel: React.FC<FilterPanelProps> = ({ filterModel, columns, onFilterModelChange }) => {
-    const items: GridFilterItem[] = (filterModel.items ?? []) as GridFilterItem[];
+    const items = useMemo<GridFilterItem[]>(() => (filterModel.items ?? []) as GridFilterItem[], [filterModel.items]);
     const logicOperator = filterModel.logicOperator ?? 'and';
 
     const handleItemChange = useCallback((field: string, newItem: GridFilterItem | null) => {

package/lib/components/Header/ColumnMenu.tsx

@@ -1,10 +1,10 @@
 import React, { useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import type { GridColDef, GridSortDirection, GridColumnPinning } from '../../types';
+import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning } from '../../types';
 
 
 interface ColumnMenuProps {
-    colDef: GridColDef<any>;
+    colDef: GridColDef<GridRowModel>;
     sortModel?: Array<{ field: string; sort: 'asc' | 'desc' }>;
     onSort?: (field: string, direction: GridSortDirection) => void;
     onHide?: (field: string) => void;

package/lib/components/Header/Header.tsx

@@ -236,7 +236,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
     // All non-spacer fields in order (for group-span math) with their effective physical width
     const allCols = allColumns ?? columns;
     const allLeafFields = allCols
-        .filter(c => !(c as any).isSpacer)
+        .filter(c => !c.isSpacer)
         .map(c => ({
             field: c.field,
             width: columnWidths[c.field] ?? c.width ?? 100
@@ -354,7 +354,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                 )}
 
                 {columns.map((colDef, index) => {
-                    if ((colDef as any).isSpacer) {
+                    if (colDef.isSpacer) {
                         return (
                             <div
                                 key={colDef.field}
@@ -409,7 +409,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     }
 
                     const headerContent = colDef.renderHeader
-                        ? colDef.renderHeader({ field: colDef.field, colDef: colDef as any, colIndex: index })
+                        ? colDef.renderHeader({ field: colDef.field, colDef: colDef as unknown as GridColDef, colIndex: index })
                         : colDef.headerName || colDef.field;
 
                     const handleHeaderClick = (e: React.MouseEvent) => {
@@ -499,7 +499,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
 
                 {menuOpenParams && (
                     <ColumnMenu
-                        colDef={menuOpenParams.colDef}
+                        colDef={menuOpenParams.colDef as unknown as GridColDef<GridRowModel>}
                         sortModel={sortModel}
                         onSort={onSort}
                         onHide={onHideColumn}

package/lib/components/ListView/ListViewRow.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { GridRowModel, GridRowId, GridListViewColDef, GridRenderCellParams } from '../../types';
+import type { GridColDef, GridRowModel, GridRowId, GridListViewColDef, GridRenderCellParams } from '../../types';
 
 export interface ListViewRowProps<R extends GridRowModel = GridRowModel> {
     row: R;
@@ -26,7 +26,7 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
         row,
         value: undefined,
         field: listViewColumn.field,
-        colDef: { field: listViewColumn.field } as any,
+        colDef: { field: listViewColumn.field } as unknown as GridColDef<R>,
         rowIndex,
         colIndex: 0,
     };

package/lib/components/Row/Row.tsx

@@ -40,10 +40,10 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     isDragging?: boolean;
     isDragOver?: boolean;
 
-    editingCell?: { id: GridRowId; field: string; value: any; } | null;
-    onEditStart?: (params: { id: GridRowId, field: string, value: any }) => void;
+    editingCell?: { id: GridRowId; field: string; value: unknown; } | null;
+    onEditStart?: (params: { id: GridRowId, field: string, value: unknown }) => void;
     onEditStop?: (params?: { cancel?: boolean }) => void;
-    onEditCellValueChange?: (params: { id: GridRowId, field: string, value: any }) => void;
+    onEditCellValueChange?: (params: { id: GridRowId, field: string, value: unknown }) => void;
 
     focusedCellField?: string | null;
     isFocusVisible?: boolean;
@@ -97,8 +97,47 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const expandCellRef = React.useRef<HTMLDivElement>(null);
     const checkboxCellRef = React.useRef<HTMLDivElement>(null);
 
+    // All hooks must come before any early returns (Rules of Hooks)
+    React.useLayoutEffect(() => {
+        if (focusedCellField === '__expand_col__' && expandCellRef.current) {
+            expandCellRef.current.focus({ preventScroll: true });
+        }
+        if (focusedCellField === '__checkbox_col__' && checkboxCellRef.current) {
+            checkboxCellRef.current.focus({ preventScroll: true });
+        }
+    }, [focusedCellField]);
+
+    const pinnedPositions = React.useMemo(() => {
+        return calculatePinnedPositions(
+            columns,
+            columnWidths,
+            pinnedColumns,
+            checkboxSelection,
+            pinCheckboxColumn,
+            hasDetailPanel,
+            pinExpandColumn,
+            rowReordering
+        );
+    }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
+
+    const isGroupRow = row._hasChildren === true;
+
+    const handleCellEditStart = React.useCallback((field: string, value: unknown) => {
+        if (!isGroupRow) {
+            onEditStart?.({ id: row.id, field, value });
+        }
+    }, [isGroupRow, row.id, onEditStart]);
+
+    const handleCellValueChange = React.useCallback((field: string, newValue: unknown) => {
+        onEditCellValueChange?.({ id: row.id, field, value: newValue });
+    }, [onEditCellValueChange, row.id]);
+
+    const handleEditStopWrapper = React.useCallback((cancel?: boolean) => {
+        onEditStop?.({ cancel });
+    }, [onEditStop]);
+
     // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
-    if ((row as any)._isSkeleton) {
+    if (row._isSkeleton) {
         // Render shimmer placeholders — one per visible column, matching row height
         const cellCount = Math.max(columns.length, 5);
         return (
@@ -117,15 +156,6 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         );
     }
 
-    React.useLayoutEffect(() => {
-        if (focusedCellField === '__expand_col__' && expandCellRef.current) {
-            expandCellRef.current.focus({ preventScroll: true });
-        }
-        if (focusedCellField === '__checkbox_col__' && checkboxCellRef.current) {
-            checkboxCellRef.current.focus({ preventScroll: true });
-        }
-    }, [focusedCellField]);
-
     const handleRowClick = (event: React.MouseEvent) => {
 
         if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell')) {
@@ -144,39 +174,10 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         onDetailPanelToggle?.(row.id);
     };
 
-    const pinnedPositions = React.useMemo(() => {
-        return calculatePinnedPositions(
-            columns,
-            columnWidths,
-            pinnedColumns,
-            checkboxSelection,
-            pinCheckboxColumn,
-            hasDetailPanel,
-            pinExpandColumn,
-            rowReordering
-        );
-    }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
-
     const rowPinnedPosition = isRowPinned(row.id, pinnedRows);
     const isRowPinnedTop = rowPinnedPosition === 'top';
     const isRowPinnedBottom = rowPinnedPosition === 'bottom';
 
-    const isGroupRow = (row as any)._hasChildren === true;
-
-    const handleCellEditStart = React.useCallback((field: string, value: any) => {
-        if (!isGroupRow) {
-            onEditStart?.({ id: row.id, field, value });
-        }
-    }, [isGroupRow, row.id, onEditStart]);
-
-    const handleCellValueChange = React.useCallback((field: string, newValue: any) => {
-        onEditCellValueChange?.({ id: row.id, field, value: newValue });
-    }, [onEditCellValueChange, row.id]);
-
-    const handleEditStopWrapper = React.useCallback((cancel?: boolean) => {
-        onEditStop?.({ cancel });
-    }, [onEditStop]);
-
     const classNames = [
         'ogx__row',
         isSelected && 'ogx__row--selected',
@@ -249,7 +250,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 row,
                                 field: '__expand_col__',
                                 value: isDetailPanelExpanded,
-                                colDef: { field: '__expand_col__', width: 48 } as any,
+                                colDef: { field: '__expand_col__', width: 48 } as unknown as GridColDef<R>,
                                 rowIndex,
                                 colIndex: -1
                             });
@@ -283,7 +284,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 row,
                                 field: '__checkbox_col__',
                                 value: isSelected,
-                                colDef: { field: '__checkbox_col__', width: 48 } as any,
+                                colDef: { field: '__checkbox_col__', width: 48 } as unknown as GridColDef<R>,
                                 rowIndex,
                                 colIndex: -1
                             });
@@ -304,7 +305,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
 
                 { }
                 {columns.map((colDef, colIndex) => {
-                    if ((colDef as any).isSpacer) {
+                    if (colDef.isSpacer) {
                         return (
                             <div
                                 key={colDef.field}

package/lib/components/SkeletonRow/SkeletonRow.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
+import type { GridColDef } from '../../types';
 
+interface SkeletonColumn extends GridColDef {
+    left?: number;
+    right?: number;
+    pinned?: 'left' | 'right';
+    zIndex?: number;
+}
 
 interface SkeletonRowProps {
-    columns: any[];
+    columns: SkeletonColumn[];
     rowHeight: number;
     checkboxSelection?: boolean;
     hasDetailPanel?: boolean;
@@ -54,7 +61,7 @@ export const SkeletonRow: React.FC<SkeletonRowProps> = ({
 
             { }
             {columns.map((col, index) => {
-                const width = col.width || 150;
+                const width = typeof col.width === 'number' ? col.width : 150;
                 const skeletonWidth = Math.min(width * 0.7, width - 20);
 
                 return (

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -34,7 +34,7 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
     const containerRef = useRef<HTMLDivElement>(null);
     // Keep onChange always current without adding it to effect deps
     const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
+    useLayoutEffect(() => { onChangeRef.current = onChange; }, [onChange]);
     // Track the last value we emitted upward
     const lastEmittedRef = useRef(value);
     // Track the last incoming prop value to detect external resets

package/lib/components/Toolbar/GridToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import type { GridColDef, GridAggregationModel, GridPivotModel, GridFilterModel } from '../../types';
 import { PivotPanel, PivotIcon } from './PivotPanel';
@@ -23,6 +23,7 @@ export interface GridToolbarProps {
     columnVisibilityModel?: Record<string, boolean>;
     onColumnVisibilityModelChange?: (model: Record<string, boolean>) => void;
     onColumnReorder?: (fromField: string, toField: string) => void;
+    onColumnOrderReset?: () => void;
     forceColumnsOpen?: boolean;
     onColumnsPanelClose?: () => void;
     children?: React.ReactNode;
@@ -87,6 +88,11 @@ function AggregationPanel({
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -185,7 +191,7 @@ function AggregationPanel({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }
 
 function ColumnsPanelWrapper({
@@ -196,6 +202,7 @@ function ColumnsPanelWrapper({
     onShowAll,
     onHideAll,
     onColumnReorder,
+    onColumnOrderReset,
     onClose
 }: {
     anchorRef: React.RefObject<HTMLButtonElement | null>;
@@ -205,10 +212,16 @@ function ColumnsPanelWrapper({
     onShowAll: () => void;
     onHideAll: () => void;
     onColumnReorder?: (fromField: string, toField: string) => void;
+    onColumnOrderReset?: () => void;
     onClose: () => void;
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -258,11 +271,12 @@ function ColumnsPanelWrapper({
                 onShowAll={onShowAll}
                 onHideAll={onHideAll}
                 onColumnReorder={onColumnReorder}
+                onColumnOrderReset={onColumnOrderReset}
             />
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }
 
 function FilterPanelWrapper({
@@ -284,7 +298,12 @@ function FilterPanelWrapper({
     // tearing down and re-registering on every filterModel update,
     // which could fire the close callback during the re-register window.
     const onCloseRef = useRef(onClose);
-    onCloseRef.current = onClose;
+    useLayoutEffect(() => { onCloseRef.current = onClose; }, [onClose]);
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -371,7 +390,7 @@ function FilterPanelWrapper({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }
 
 const EMPTY_PIVOT: GridPivotModel = { rowFields: [], columnFields: [], valueFields: [] };
@@ -388,6 +407,7 @@ export function GridToolbar({
     columnVisibilityModel = {},
     onColumnVisibilityModelChange,
     onColumnReorder,
+    onColumnOrderReset,
     forceColumnsOpen,
     onColumnsPanelClose,
     children,
@@ -538,6 +558,7 @@ export function GridToolbar({
                                 onShowAll={handleShowAllColumns}
                                 onHideAll={handleHideAllColumns}
                                 onColumnReorder={onColumnReorder}
+                                onColumnOrderReset={onColumnOrderReset}
                                 onClose={() => { setColsOpen(false); onColumnsPanelClose?.(); }}
                             />
                         )}

package/lib/components/Toolbar/PivotPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import type { GridColDef } from '../../types';
 import type { GridPivotModel, GridPivotAggFn, GridPivotValueField } from '../../types';
@@ -31,6 +31,11 @@ export interface PivotPanelProps {
 export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: PivotPanelProps) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState({ top: 0, right: 0 });
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback(() => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -235,5 +240,5 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }

package/lib/components/ui/DragHandleIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export interface DragHandleIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { }
+export type DragHandleIconProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const DragHandleIcon: React.FC<DragHandleIconProps> = ({ className = '', ...props }) => {
     return (

package/lib/hooks/core/useDataGrid.regression.test.ts

@@ -0,0 +1,66 @@
+/**
+ * Regression tests for bugs fixed in the useDataGrid reducer.
+ *
+ * Each describe block names the bug and the commit that fixed it, so a
+ * future failure tells you exactly what regressed and where to look.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useDataGrid } from './useDataGrid';
+import type { GridColDef } from '../../types';
+
+const COLS: GridColDef[] = [
+    { field: 'id',   headerName: 'ID',   width: 80 },
+    { field: 'name', headerName: 'Name', width: 150 },
+    { field: 'age',  headerName: 'Age',  width: 100 },
+];
+
+const ROWS = [
+    { id: 1, name: 'Alice', age: 30 },
+    { id: 2, name: 'Bob',   age: 25 },
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Bug: SET_COLUMNS reducer was hardcoding columnVisibilityModel: {} on every
+// column update, silently wiping any hidden columns.
+// ─────────────────────────────────────────────────────────────────────────────
+describe('SET_COLUMNS preserves columnVisibilityModel', () => {
+    it('keeps hidden columns hidden after setColumns is called', () => {
+        const { result } = renderHook(() =>
+            useDataGrid({
+                rows: ROWS,
+                columns: COLS,
+                columnVisibilityModel: { age: false },
+            })
+        );
+
+        // Confirm the initial visibility model was applied.
+        expect(result.current.state.columns.columnVisibilityModel).toEqual({ age: false });
+
+        // Simulate a column update (e.g. a width change coming from a resize handler).
+        const updatedCols: GridColDef[] = COLS.map(c =>
+            c.field === 'name' ? { ...c, width: 200 } : c
+        );
+
+        act(() => {
+            result.current.setColumns(updatedCols);
+        });
+
+        // The visibility model must survive the column update — not reset to {}.
+        expect(result.current.state.columns.columnVisibilityModel).toEqual({ age: false });
+    });
+
+    it('does not gain a visibility entry for columns that were already visible', () => {
+        const { result } = renderHook(() =>
+            useDataGrid({ rows: ROWS, columns: COLS })
+        );
+
+        act(() => {
+            result.current.setColumns(COLS);
+        });
+
+        // No spurious entries: an empty model means all columns are visible.
+        expect(result.current.state.columns.columnVisibilityModel).toEqual({});
+    });
+});

package/lib/hooks/core/useDataGrid.ts

@@ -1,7 +1,7 @@
 
-import { useReducer, useCallback, useMemo, useRef, useEffect } from 'react';
+import { useReducer, useCallback, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import type {
-  GridState,
+  GridInternalState as GridState,
   GridRowModel,
   GridColDef,
   GridRowId,
@@ -19,27 +19,25 @@ type GridAction =
   | { type: 'SET_FILTER_MODEL'; payload: GridFilterModel }
   | { type: 'SET_PAGINATION_MODEL'; payload: GridPaginationModel }
   | { type: 'SET_SELECTION'; payload: Set<GridRowId> }
-  | { type: 'SET_SCROLL'; payload: { scrollTop: number; scrollLeft: number } }
   | { type: 'SET_DIMENSIONS'; payload: { viewportWidth: number; viewportHeight: number } }
   | { type: 'SET_DATASOURCE_LOADING'; payload: boolean }
-  | { type: 'SET_DATASOURCE_ERROR'; payload: any }
+  | { type: 'SET_DATASOURCE_ERROR'; payload: unknown }
   | { type: 'SET_ROW_COUNT'; payload: number };
 
-function createInitialState(rows: GridRowModel[], columns: GridColDef[], columnVisibilityModel: GridColumnVisibilityModel = {}): GridState {
+function createInitialState<R extends GridRowModel>(rows: R[], columns: GridColDef<R>[], columnVisibilityModel: GridColumnVisibilityModel = {}): GridState {
   const idRowsLookup = new Map<GridRowId, GridRowModel>();
   const allRows: GridRowId[] = [];
 
   rows.forEach(row => {
-    const id = row.id;
-    idRowsLookup.set(id, row);
-    allRows.push(id);
+    idRowsLookup.set(row.id, row);
+    allRows.push(row.id);
   });
 
   const columnLookup = new Map<string, GridColDef>();
   const orderedFields: string[] = [];
 
   columns.forEach(col => {
-    columnLookup.set(col.field, col);
+    columnLookup.set(col.field, col as unknown as GridColDef);
     orderedFields.push(col.field);
   });
 
@@ -49,7 +47,7 @@ function createInitialState(rows: GridRowModel[], columns: GridColDef[], columnV
       allRows
     },
     columns: {
-      all: columns,
+      all: columns as unknown as GridColDef[],
       lookup: columnLookup,
       orderedFields,
       columnVisibilityModel
@@ -78,8 +76,6 @@ function createInitialState(rows: GridRowModel[], columns: GridColDef[], columnV
         firstColumnIndex: 0,
         lastColumnIndex: 0
       },
-      scrollTop: 0,
-      scrollLeft: 0
     },
     dimensions: {
       rowHeight: 52,
@@ -137,7 +133,7 @@ function gridReducer(state: GridState, action: GridAction): GridState {
           all: action.payload,
           lookup: columnLookup,
           orderedFields,
-          columnVisibilityModel: {}
+          columnVisibilityModel: state.columns.columnVisibilityModel
         }
       };
     }
@@ -169,16 +165,6 @@ function gridReducer(state: GridState, action: GridAction): GridState {
         selection: { selectedRows: action.payload }
       };
 
-    case 'SET_SCROLL':
-      return {
-        ...state,
-        virtualization: {
-          ...state.virtualization,
-          scrollTop: action.payload.scrollTop,
-          scrollLeft: action.payload.scrollLeft
-        }
-      };
-
     case 'SET_DIMENSIONS':
       return {
         ...state,
@@ -234,18 +220,17 @@ export interface UseDataGridParams<R extends GridRowModel = GridRowModel> {
 export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDataGridParams<R>) {
   const { rows, columns, rowHeight = 52, headerHeight = 56, columnVisibilityModel, initialState: propInitialState } = params;
 
-  const internalInitialState = useMemo(
-    () => createInitialState(rows, columns as any, columnVisibilityModel),
-    [] 
+  const [internalInitialState] = useState(() =>
+    createInitialState(rows, columns, columnVisibilityModel)
   );
 
   const [state, dispatch] = useReducer(gridReducer, {
     ...internalInitialState,
     sorting: propInitialState?.sorting || internalInitialState.sorting,
     filter: propInitialState?.filter || internalInitialState.filter,
-    dataSource: (propInitialState?.dataSource 
+    dataSource: propInitialState?.dataSource
       ? { ...internalInitialState.dataSource, ...propInitialState.dataSource }
-      : internalInitialState.dataSource) as any,
+      : internalInitialState.dataSource,
     pagination: {
       ...internalInitialState.pagination,
       ...(propInitialState?.pagination || {}),
@@ -259,7 +244,7 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
   });
 
   const stateRef = useRef(state);
-  stateRef.current = state;
+  useLayoutEffect(() => { stateRef.current = state; });
 
   // Sync internal state when the external `rows` prop changes
   const prevRowsRef = useRef(rows);
@@ -294,10 +279,6 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
     dispatch({ type: 'SET_SELECTION', payload: selectedRows });
   }, []);
 
-  const setScroll = useCallback((scrollTop: number, scrollLeft: number) => {
-    dispatch({ type: 'SET_SCROLL', payload: { scrollTop, scrollLeft } });
-  }, []);
-
   const setDimensions = useCallback((viewportWidth: number, viewportHeight: number) => {
     dispatch({ type: 'SET_DIMENSIONS', payload: { viewportWidth, viewportHeight } });
   }, []);
@@ -306,7 +287,7 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
     dispatch({ type: 'SET_DATASOURCE_LOADING', payload: loading });
   }, []);
 
-  const setDataSourceError = useCallback((error: any) => {
+  const setDataSourceError = useCallback((error: unknown) => {
     dispatch({ type: 'SET_DATASOURCE_ERROR', payload: error });
   }, []);
 
@@ -383,7 +364,6 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
     setFilterModel,
     setPaginationModel,
     setSelection,
-    setScroll,
     setDimensions,
     setDataSourceLoading,
     setDataSourceError,