@opencorestack/opengridx 0.1.9 → 1.0.1

package/docs/API_REFERENCE.md

@@ -22,11 +22,15 @@ The main component for displaying and interacting with data.
 | `checkboxSelection` | `boolean` | `false` | Enable row selection via checkboxes. |
 | `pagination` | `boolean` | `false` | Enable the bottom pagination bar. |
 | `paginationMode` | `'client' \| 'server' \| 'infinite'` | `'client'` | How to handle paging. |
-| `paginationModel` | `GridPaginationModel` | `{page:0, pageSize:25}` | Current page and page size. |
+| `paginationModel` | `GridPaginationModel` | — | Controlled pagination state (`{ page, pageSize }`). |
+| `onPaginationModelChange` | `(model: GridPaginationModel) => void` | — | Fired when page or page size changes. |
+| `pageSizeOptions` | `number[]` | `[10, 25, 50]` | Available page size options. |
 | `rowCount` | `number` | — | Total rows (required for server-side paging). |
+| `height` | `number \| string` | `undefined` | Total height of the grid container. |
+| `density` | `'compact' \| 'standard' \| 'comfortable'` | `'standard'` | Visual row density. |
 | `initialState` | `GridInitialState` | `undefined` | Starting state for sorting, filters, etc. |
 | `slots` | `GridSlots` | `{}` | Custom component overrides. |
-| `slotProps` | `Record<string, any>` | `{}` | Props passed to custom slots. |
+| `slotProps` | `Record<string, unknown>` | `{}` | Props passed to custom slots. |
 | `filterModel` | `GridFilterModel` | `undefined` | Active filters. |
 | `sortModel` | `GridSortItem[]` | `undefined` | Active sorting. |
 | `onRowClick` | `(params: GridRowParams) => void` | — | Fired when a row is clicked. |
@@ -54,8 +58,14 @@ Access these methods via the `apiRef` prop.
 | `sortColumn(field, dir)` | `void` | Programmatically sort a column. |
 | `getSortModel()` | `GridSortItem[]` | Get active sorting state. |
 | `setFilterModel(model)` | `void` | Programmatically set filters. |
+| `getFilterModel()` | `GridFilterModel` | Get the current filter model. |
 | `setPage(page)` | `void` | Change current page (0-indexed). |
+| `setPageSize(pageSize)` | `void` | Change the current page size. |
 | `scrollToIndexes(params)` | `void` | Scroll to specific row/column index. |
+| `getAllColumns()` | `GridColDef[]` | Get all defined columns. |
+| `getAggregationResult()` | `Record<string, unknown> \| null` | Get current aggregation results. |
+| `getAggregationModel()` | `GridAggregationModel \| null` | Get the active aggregation configuration. |
+| `copySelectedRows()` | `Promise<void>` | Copy selected rows to clipboard as TSV. |
 
 ---
 
@@ -71,7 +81,7 @@ Used in Tree Data and Row Grouping hierarchies.
 | `depth` | `number` | Nesting level (0 for root). |
 | `isExpanded` | `boolean` | Current expansion state. |
 | `children` | `GridRowId[]` | IDs of child nodes. |
-| `groupingValue` | `any` | The value this node is grouping by. |
+| `groupingValue` | `unknown` | The value this node is grouping by. |
 | `aggregatedValues` | `object` | Sums/Avgs computed for this group. |
 
 ---
@@ -85,13 +95,13 @@ Defines the behavior and appearance of a single column.
 | :--- | :--- | :--- | :--- |
 | `field` | `string` | — | Unique identifier (matches row property). |
 | `headerName` | `string` | — | Text displayed in the header. |
-| `width` | `number` | `100` | Width in pixels. |
-| `type` | `'string' \| 'number' \| 'date' \| 'dateTime' \| 'boolean'` | `'string'` | Data type for formatting and filtering. |
+| `width` | `number \| string` | `100` | Width in pixels or percentage string. |
+| `type` | `'string' \| 'number' \| 'date' \| 'boolean' \| 'singleSelect' \| 'image'` | `'string'` | Data type for formatting and filtering. |
 | `sortable` | `boolean` | `true` | Enable sorting for this column. |
 | `filterable` | `boolean` | `true` | Enable filtering for this column. |
 | `resizable` | `boolean` | `true` | Allow user to drag resize. |
 | `hideable` | `boolean` | `true` | Allow user to hide the column. |
-| `pinned` | `'left' \| 'right' \| null` | `null` | Sticky positioning. |
+| `pinnable` | `boolean` | `true` | Allow column to be pinned via the UI. |
 | `exportable` | `boolean` | `true` | If `false`, column is excluded from all exports. |
 | `valueFormatter` | `(params: GridValueFormatterParams) => string` | — | Format value for display. |
 | `valueGetter` | `(params: GridValueGetterParams) => any` | — | Compute value from row data. |
@@ -153,7 +163,7 @@ interface GridSortItem {
 ### `GridFilterModel`
 ```typescript
 interface GridFilterModel {
-  items: GridFilterItem[];
+  items?: (GridFilterItem | GridFilterGroup)[];
   logicOperator?: 'and' | 'or';
   quickFilterValues?: string[];
 }

package/docs/README.md

@@ -22,6 +22,9 @@ Detailed reference for the core structural components.
 - **[Column Visibility](components/column-visibility.md)** - Managing visible fields
 - **[Column Grouping](components/column-group-header.md)** - Multi-level nested headers
 - **[Column Resizing](components/column-resize.md)** - Dynamic width controls
+- **[Empty State](components/empty-state.md)** - No-rows overlay and `noRowsOverlay` slot
+- **[Error Overlay](components/error-overlay.md)** - Data source error display
+- **[Aggregation Footer](components/aggregation-footer.md)** - Sticky totals row
 ---
 
 ## 🚀 Features
@@ -55,6 +58,17 @@ Make the grid your own.
 
 ---
 
+## 🏛️ Architecture — Internal Hooks
+Reference for core hooks extracted from `DataGrid.tsx`. Intended for contributors.
+
+- **[useGridControlledState](architecture/use-grid-controlled-state.md)** - Controlled/uncontrolled state for all 7 state pairs
+- **[useGridRowPipeline](architecture/use-grid-row-pipeline.md)** - Filter → pin → sort → paginate row pipeline
+- **[useGridVirtualization](architecture/use-grid-virtualization.md)** - Render context and scroll-position math
+- **[useGridColumns](architecture/use-grid-columns.md)** - Column management: effective, ordered, visible, reorder handlers
+- **[useGridVisibleRows](architecture/use-grid-visible-rows.md)** - Render window: pinned + virtual center merge
+- **[useGridScrollSync](architecture/use-grid-scroll-sync.md)** - RAF-batched scroll tick, scrollPosRef, onRowsScrollEnd threshold
+- **[useGridStateSnapshot](architecture/use-grid-state-snapshot.md)** - onStateChange callback delivery on sort/filter/pagination/column changes
+
 ## 🛠️ Project Meta
 - **[Development Roadmap](roadmap.md)** - What's built and what's next
 - **[Research Notes](research/FEATURE_CATALOG.md)** - Comparative analysis and design decisions

package/docs/components/aggregation-footer.md

@@ -0,0 +1,48 @@
+# `<GridAggregationFooter />`
+
+Internal component that renders the sticky aggregation totals row pinned to the bottom of the grid. Displays function name labels (e.g. `sum`, `avg`) alongside their computed values for each configured column.
+
+## ⚙️ Props
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `columns` | `GridColDef[]` | Ordered list of visible column definitions used to lay out cells. |
+| `aggregationModel` | `GridAggregationModel` | Maps field names to function names (`'sum' \| 'avg' \| 'count' \| 'min' \| 'max'`). |
+| `aggregationResult` | `GridAggregationResult` | Computed values keyed by field name, produced by `useAggregation`. |
+| `columnWidths` | `Record<string, number>` | Runtime pixel widths for each field, kept in sync with user resize actions. |
+| `rowHeight` | `number` | Sets `min-height` on the footer row, matching the grid's configured row height. |
+| `checkboxSelection` | `boolean` | When `true`, inserts a 48px spacer at the start to align with the checkbox column. |
+| `hasDetailPanel` | `boolean` | When `true`, inserts a 48px spacer to align with the expand/collapse column. |
+| `rowReordering` | `boolean` | When `true`, inserts a 48px spacer to align with the drag handle column. |
+
+## 🔄 When it renders
+
+`GridAggregationFooter` renders when `aggregationModel` has at least one entry and `aggregationResult` contains the corresponding computed values. The footer is sticky — it remains visible when the user scrolls vertically.
+
+## 🔢 Value formatting
+
+Values are formatted by `formatAggregationValue` from `useAggregation`:
+- `count` → integer (e.g. `42`)
+- `sum` / `avg` / `min` / `max` → `toLocaleString()` with up to 2 decimal places
+
+## 🎨 Usage via DataGrid prop
+
+```tsx
+<DataGrid
+    aggregationModel={{
+        salary: 'sum',
+        age: 'avg',
+        department: 'count'
+    }}
+/>
+```
+
+The footer renders automatically. No additional configuration required.
+
+## ♿ Accessibility
+
+The footer row uses `role="row"` and `aria-label="Aggregation totals"`. Each cell uses `role="gridcell"`. The container uses `aria-live="polite"` so screen readers announce value updates when the data changes.
+
+## 🔗 Related
+- [DataGrid](datagrid.md)
+- [Aggregation & Pivot](../features/aggregation-pivot.md)

package/docs/components/datagrid.md

@@ -29,8 +29,9 @@ function MyGrid() {
 | `loading` | `boolean` | `false` | Displays a loading skeleton/shimmer. |
 | `checkboxSelection` | `boolean` | `false` | Enable row checkboxes. |
 | `pagination` | `boolean` | `false` | Enable/Disable bottom pagination bar. |
-| `paginationModel` | `GridPaginationModel` | `{page:0, pageSize:25}` | Controlled pagination state. |
-| `initialState` | `GridState` | `undefined` | Initial configuration (sorting, columns, etc). |
+| `paginationModel` | `GridPaginationModel` | — | Controlled pagination state (`{ page, pageSize }`). |
+| `pageSizeOptions` | `number[]` | `[10, 25, 50]` | Available page size options. |
+| `initialState` | `GridInitialState` | `undefined` | Initial configuration (sorting, columns, etc). |
 
 ## 🖱️ Interaction & Events
 
@@ -38,8 +39,9 @@ function MyGrid() {
 | :--- | :--- | :--- |
 | `onRowClick` | `(params) => void` | Fired when clicking a row body. |
 | `onCellClick` | `(params) => void` | Fired when clicking a specific cell. |
+| `onPaginationModelChange` | `(model: GridPaginationModel) => void` | Fired when page or page size changes. |
 | `onStateChange` | `(state) => void` | Fired on any internal state update. |
-| `processRowUpdate` | `(new, old) => R` | Fired after a cell edit is committed. |
+| `processRowUpdate` | `(new, old) => R \| Promise<R>` | Fired after a cell edit is committed. |
 
 ## 📦 Slots
 
@@ -68,3 +70,6 @@ Customize internal components using the `slots` prop.
 - [Column Visibility](column-visibility.md)
 - [Column Grouping](column-group-header.md)
 - [Column Resizing](column-resize.md)
+- [Empty State](empty-state.md)
+- [Error Overlay](error-overlay.md)
+- [Aggregation Footer](aggregation-footer.md)

package/docs/components/empty-state.md

@@ -0,0 +1,50 @@
+# `<GridEmptyState />`
+
+Internal component rendered when the grid has no rows to display. Replaces the row viewport with a centered icon and message.
+
+## ⚙️ Props
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `noRowsLabel` | `string` | Text shown beneath the empty-state icon. Controlled by the `noRowsLabel` DataGrid prop. |
+| `width` | `number` | Pixel width of the empty-state container, matched to the grid's total column width. |
+
+## 🔄 When it renders
+
+`GridEmptyState` renders when `allRenderableRows.length === 0` and the grid is not in a loading state. The loading skeleton takes precedence — if `loading={true}` the skeleton rows are shown instead.
+
+## 🎨 Customizing via slot
+
+Replace the default empty state with any React component using the `noRowsOverlay` slot:
+
+```tsx
+function MyEmptyState() {
+    return (
+        <div style={{ textAlign: 'center', padding: '40px' }}>
+            <p>No results match your filter.</p>
+            <button onClick={clearFilters}>Clear filters</button>
+        </div>
+    );
+}
+
+<DataGrid
+    slots={{ noRowsOverlay: MyEmptyState }}
+    slotProps={{ noRowsOverlay: { /* custom props if needed */ } }}
+/>
+```
+
+## 💬 Custom label (without a full slot replacement)
+
+To only change the message text without replacing the whole component, use `noRowsLabel`:
+
+```tsx
+<DataGrid
+    noRowsLabel="No employees found for this department."
+/>
+```
+
+Default value: `"No rows"`
+
+## 🔗 Related
+- [DataGrid](datagrid.md)
+- [Loading States](../features/loading-states.md)

package/docs/components/error-overlay.md

@@ -0,0 +1,40 @@
+# `<GridErrorOverlay />`
+
+Internal component rendered when a `GridDataSource` fetch fails. Displays an error icon, a human-readable message, and a **Retry** button that calls `window.location.reload()`.
+
+## ⚙️ Props
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `error` | `{ message?: string } \| null` | The error object from `state.dataSource.error`. When `null` the component renders nothing (`null` return). |
+
+## 🔄 When it renders
+
+`GridErrorOverlay` only appears when using a server-side `dataSource` prop. When a fetch throws, DataGrid catches the error and stores it in internal state. The overlay replaces the row viewport until the user retries.
+
+```tsx
+<DataGrid
+    dataSource={{
+        getRows: async ({ filterModel, sortModel, paginationModel }) => {
+            const res = await fetch('/api/employees');
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            return res.json();
+        }
+    }}
+/>
+```
+
+If `getRows` throws, the overlay renders with the thrown error's `message`.
+
+## ♿ Accessibility
+
+The overlay container uses `role="alert"` and `aria-live="assertive"` so screen readers announce the error immediately when it appears.
+
+## 🎨 Customizing
+
+`GridErrorOverlay` is not currently exposed as a configurable slot. To implement custom error handling, catch errors in your `dataSource.getRows` and manage the error display in your own component wrapping the grid.
+
+## 🔗 Related
+- [DataGrid](datagrid.md)
+- [Data Source](../features/data-source.md)
+- [Loading States](../features/loading-states.md)

package/docs/features/editing-reordering.md

@@ -82,18 +82,22 @@ const [colOrder, setColOrder] = useState(['id', 'name', 'status']);
 <DataGrid
   columnOrder={colOrder}
   onColumnOrderChange={(params) => {
-    // params.newOrder is the updated array of field strings
-    setColOrder(params.newOrder);
+    // params: { column: GridColDef, oldIndex: number, targetIndex: number }
+    const newOrder = [...colOrder];
+    const [moved] = newOrder.splice(params.oldIndex, 1);
+    newOrder.splice(params.targetIndex, 0, moved);
+    setColOrder(newOrder);
   }}
 />
 ```
 
 ### Non-Reorderable Columns
-To prevent a specific column from being moved, set `reorderable: false` in its definition.
+To prevent all columns from being reordered, use `disableColumnReorder` on the grid. For individual column control, pin the column using `pinnedColumns` at the grid level — pinned columns do not participate in drag-reorder.
 
 ```tsx
-const columns = [
-  { field: 'id', reorderable: false }, // Stay pinned at start
-  { field: 'name' }
-];
+// Disable reordering globally
+<DataGrid disableColumnReorder />
+
+// Keep a column fixed by pinning it
+<DataGrid pinnedColumns={{ left: ['id'] }} />
 ```

package/docs/features/filtering.md

@@ -49,7 +49,7 @@ The `GridFilterModel` describes the current state of filters.
 
 ```typescript
 interface GridFilterModel {
-  items: GridFilterItem[];    // Active filter items
+  items?: (GridFilterItem | GridFilterGroup)[];  // Active filter items or groups
   logicOperator?: 'and' | 'or'; // How to combine items
   quickFilterValues?: string[]; // Values for the global search
 }
@@ -57,27 +57,29 @@ interface GridFilterModel {
 interface GridFilterItem {
   field: string;              // Column to filter
   operator: GridFilterOperator;
-  value?: any;                // Comparison value
+  value?: unknown;            // Comparison value
 }
 ```
 
 ### Supported Operators
 | Type | Operators |
 | :--- | :--- |
-| **String** | `contains`, `equals`, `startsWith`, `endsWith`, `isEmpty`, `isNotEmpty` |
-| **Number** | `=`, `!=`, `>`, `>=`, `<`, `<=`, `isEmpty`, `isNotEmpty` |
-| **Date** | `is`, `not`, `after`, `before`, `isEmpty`, `isNotEmpty` |
+| **String** | `contains`, `equals`, `startsWith`, `endsWith`, `isEmpty`, `isNotEmpty`, `isAnyOf` |
+| **Number** | `equals`, `!=`, `>`, `>=`, `<`, `<=`, `isEmpty`, `isNotEmpty` |
+| **Date** | `is`, `not`, `isEmpty`, `isNotEmpty` |
 | **Boolean** | `is` |
 
 ---
 
-## 🎨 Customizing Filter Components
-You can replace the default filter panel via the `slots` API:
+## 🎨 Customizing the Toolbar
+The filter panel is accessible through the built-in `GridToolbar`. To use your own toolbar that includes a filter entry point, pass a custom component to the `toolbar` slot:
 
 ```tsx
 <DataGrid
   slots={{
-    filterPanel: MyCustomFilterPanel
+    toolbar: MyCustomToolbar
   }}
 />
 ```
+
+The `FilterPanel` component is also exported from `@opencorestack/opengridx` if you need to embed it inside a custom layout.

package/docs/features/selection.md

@@ -47,7 +47,8 @@ const [selection, setSelection] = useState<GridRowId[]>([]);
 | `disableRowSelectionOnClick` | `boolean` | `false` | If true, clicking a cell won't select the row. |
 | `disableMultipleRowSelection` | `boolean` | `false` | Restricts selection to a single row. |
 | `rowSelectionModel` | `GridRowId[]` | `[]` | Controlled array of selected IDs. |
-| `isRowSelectable` | `(params) => boolean` | `undefined` | Predicate to disable selection for specific rows. |
+| `onRowSelectionModelChange` | `(model: GridRowSelectionModel) => void` | — | Fired when the selection changes. |
+| `pinCheckboxColumn` | `boolean` | `false` | Keep the checkbox column visible during horizontal scroll. |
 
 ---
 

package/docs/features/sorting-pagination.md

@@ -52,7 +52,9 @@ When using `paginationMode="server"`, you must provide the `rowCount` and handle
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
 | `pagination` | `boolean` | `false` | Enable/disable the pagination footer. |
-| `paginationMode` | `'client' \| 'server'` | `'client'` | Location of the pagination logic. |
+| `paginationMode` | `'client' \| 'server' \| 'infinite'` | `'client'` | Location of the pagination logic. |
+| `paginationModel` | `GridPaginationModel` | — | Controlled pagination state (`{ page, pageSize }`). |
+| `onPaginationModelChange` | `(model: GridPaginationModel) => void` | — | Fired when page or page size changes. |
 | `pageSizeOptions` | `number[]` | `[10, 25, 50]` | Options for the rows-per-page selector. |
 
 ---

package/docs/features/state-persistence.md

@@ -63,5 +63,4 @@ The following features support state persistence:
 - **Filtering**: `filterModel`
 - **Pagination**: `paginationModel`
 - **Columns**: `columnVisibilityModel`, `columnOrder`, `pinnedColumns`, `columnWidths`
-- **Selection**: `rowSelectionModel`
-- **Grouping**: `rowGroupingModel`
+- **Density**: `density`

package/docs/roadmap.md

@@ -54,6 +54,20 @@ This document tracks the current status of features in `OpenGridX` and outlines
 *   **Demo**: `AdvancedExcelExportDemo` in demo app (`Data Management` category).
 *   **Docs**: `docs/features/export-guide.md` fully updated with feature comparison table and all options.
 
+### Code Quality & Architecture *(completed 2026-07-29 → 2026-07-30)*
+*   **DataGrid decomposition**: Extracted `useGridControlledState`, `useGridRowPipeline`, `useGridVirtualization`, `useGridScrollSync`, `useGridVisibleRows`, `useGridColumns` hooks, plus `GridEmptyState`, `GridErrorOverlay`, `GridAggregationFooter`, `GridVirtualRows`, `GridPinnedRows`, `GridStandaloneColumnPanel`, `GridListView` components from `DataGrid.tsx`. Each module has a single clear responsibility with typed params and return interfaces.
+*   **Full `any` elimination**: Every `any` across `lib/` replaced with proper types or `unknown`. `GridRowModel` index signature, all cell/value/error params, aggregation functions, slot types, and export utilities are now fully typed. Zero `eslint-disable` suppressions remain — every case fixed at the root.
+*   **Regression test suite**: 3 test files covering column-visibility-model persistence, pivot aggregation correctness including grand-total avg and null-value exclusion, and pagination rendering/row key stability.
+*   **Pivot null-value fix**: `Number(null) === 0` caused null numeric fields to be silently included as `0` in avg/min/max pivot aggregation. Both the per-row bucket loop and the grand-total bucket loop in `usePivot.ts` now guard with `raw != null` before pushing values.
+
+### Bug Fixes *(completed 2026-07-30)*
+*   **`onRowClick` never fired when `onCellClick` was registered**: `Cell.tsx` called `e.stopPropagation()` on every cell click, silently preventing events from reaching the row's `onClick` handler. Removed — both callbacks now fire in natural bubble order.
+*   **Column visibility panel order not updating after reorder**: Panel received `effectiveColumns` (pre-ordering, definition order) instead of `orderedColumns`. Fixed — panel list now reflects the live reordered sequence.
+*   **Reset button ignoring column sequence**: Reset only restored visibility; column order was left wherever the user dragged it. Added `onColumnOrderReset` callback that restores `internalColumnOrder` to original definition order.
+*   **`FilterPanel` debounce stale-closure**: Debounce effect read `item`/`col.field`/`currentOperator` from stale closure, previously suppressed with `eslint-disable`. Replaced with `useLayoutEffect` refs-sync pattern.
+*   **`FilterPanelDemo` inaccessible**: Missing `slots={{ toolbar: GridToolbar }}` meant the filter panel had no UI entry point. Fixed; demo also migrated to `DocsLayout`.
+*   **`EventsDemo` dead handlers**: Fixed broken `onRowClick`, dead filter/column-order callbacks, and three `any`-typed handler signatures.
+
 ---
 
 ## 📅 Upcoming Features
@@ -66,6 +80,11 @@ This document tracks the current status of features in `OpenGridX` and outlines
 ### DX & Publishing
 *   **npm publish**: Finalize `package.json` metadata, `README.md`, and publish to npm registry.
 
+### Demo Site
+*   **Full source viewer coverage**: Migrate all 32 examples to `DocsLayout` using Vite `?raw` auto-loading (eliminates string-literal source maintenance). See `docs/superpowers/plans/2026-07-29-demo-app-refactor.md`.
+*   **Syntax highlighting**: Prism.js token-based highlighting in the source viewer.
+*   **GitHub Pages deployment**: CI/CD via GitHub Actions (`base: '/OpenGridX/'` already configured in `vite.config.js`).
+
 ## ✅ Implemented Features (Recent)
-*   **Storybook / Docs site**: Interactive component documentation with source code viewer and categorized navigation (implemented via `demo` app).
+*   **Demo app (partial)**: 32 interactive examples across 6 categories (Main features, Advanced features, Components, Customization, Tutorials, Resources) with categorized sidebar navigation and per-page Table of Contents. Source code viewer present on 6 of 32 examples. Syntax highlighting and public deployment are in the upcoming Demo Site section above.
 *   **Quickstart & Installation Guides**: Comprehensive onboarding documentation for developers.

package/lib/components/Cell/Cell.tsx

@@ -7,9 +7,9 @@ import { GridEditInputCell } from './GridEditInputCell';
 
 export interface CellProps<R extends GridRowModel = GridRowModel> {
     onCellClick?: (params: GridCellParams<R>) => void;
-    onCellEditStart?: (field: string, value: any) => void;
-    onCellValueChange?: (field: string, newValue: any) => void;
-    value: any;
+    onCellEditStart?: (field: string, value: unknown) => void;
+    onCellValueChange?: (field: string, newValue: unknown) => void;
+    value: unknown;
     row: R;
     colDef: GridColDef<R>;
     rowIndex: number;
@@ -27,7 +27,7 @@ export interface CellProps<R extends GridRowModel = GridRowModel> {
     isEditing?: boolean;
     onEditStart?: () => void;
     onEditStop?: (cancel?: boolean) => void;
-    onValueChange?: (newValue: any) => void;
+    onValueChange?: (newValue: unknown) => void;
 
     colSpanInfo?: CellColSpanInfo;
     rowSpan?: number;
@@ -63,7 +63,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
     } = props;
 
     // All hooks must come before any early returns (Rules of Hooks)
-    const handleValueChange = React.useCallback((newValue: any) => {
+    const handleValueChange = React.useCallback((newValue: unknown) => {
         if (onCellValueChange) {
             onCellValueChange(colDef.field, newValue);
         } else {
@@ -94,7 +94,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
                     value,
                     row,
                     field: colDef.field,
-                    colDef: colDef as any,
+                    colDef,
                     rowIndex,
                     colIndex
                 });
@@ -104,7 +104,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
                     value={value}
                     row={row}
                     field={colDef.field}
-                    colDef={colDef as any}
+                    colDef={colDef as unknown as GridColDef}
                     rowIndex={rowIndex}
                     colIndex={colIndex}
                     onValueChange={handleValueChange}
@@ -119,7 +119,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
                 value,
                 row,
                 field: colDef.field,
-                colDef: colDef as any,
+                colDef,
                 rowIndex,
                 colIndex
             });
@@ -131,7 +131,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
     const resolvedCellClassName = React.useMemo(() => {
         if (!colDef.cellClassName) return '';
         if (typeof colDef.cellClassName === 'function') {
-            return colDef.cellClassName({ value, row, field: colDef.field, colDef: colDef as any, rowIndex, colIndex }) || '';
+            return colDef.cellClassName({ value, row, field: colDef.field, colDef, rowIndex, colIndex }) || '';
         }
         return colDef.cellClassName;
     }, [colDef, value, row, rowIndex, colIndex]);
@@ -162,7 +162,6 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
 
     const handleClick = (e: React.MouseEvent) => {
         if (onCellClick) {
-            e.stopPropagation();
             onCellClick({
                 row,
                 field: colDef.field,

package/lib/components/Cell/GridEditInputCell.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import type { GridRenderCellParams } from '../../types';
 
 export interface GridEditInputCellProps extends GridRenderCellParams {
-    onValueChange: (value: any) => void;
+    onValueChange: (value: unknown) => void;
     onCommit: () => void;
     onCancel: () => void;
 }
@@ -31,7 +31,7 @@ function TextEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputC
 
 // ─── Number ───────────────────────────────────────────────────────────────────
 function NumberEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
-    const [local, setLocal] = useState(value ?? '');
+    const [local, setLocal] = useState<string | number>(typeof value === 'number' ? value : '');
     const ref = useRef<HTMLInputElement>(null);
     useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
 
@@ -94,7 +94,7 @@ function SelectEditor({ value, colDef, onValueChange, onCommit, onCancel }: Grid
         <select
             ref={ref}
             className="ogx__edit-select"
-            value={value ?? ''}
+            value={String(value ?? '')}
             onChange={e => { onValueChange(e.target.value); }}
             onBlur={onCommit}
             onKeyDown={e => {
@@ -113,7 +113,7 @@ function SelectEditor({ value, colDef, onValueChange, onCommit, onCancel }: Grid
 
 // ─── Date ─────────────────────────────────────────────────────────────────────
 function DateEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
-    const [local, setLocal] = useState(value ?? '');
+    const [local, setLocal] = useState<string>(typeof value === 'string' ? value : String(value ?? ''));
     const ref = useRef<HTMLInputElement>(null);
     useEffect(() => { ref.current?.focus(); }, []);
 

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -10,6 +10,7 @@ export interface ColumnVisibilityPanelProps<R extends GridRowModel = GridRowMode
     onShowAll: () => void;
     onHideAll: () => void;
     onColumnReorder?: (fromField: string, toField: string) => void;
+    onColumnOrderReset?: () => void;
 }
 
 function SearchIcon() {
@@ -43,7 +44,7 @@ function DragHandleIcon() {
 export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
     props: ColumnVisibilityPanelProps<R>
 ) {
-    const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll, onColumnReorder } = props;
+    const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll, onColumnReorder, onColumnOrderReset } = props;
     const [searchQuery, setSearchQuery] = useState('');
     const [dragOverField, setDragOverField] = useState<string | null>(null);
     const dragFieldRef = useRef<string | null>(null);
@@ -180,7 +181,7 @@ export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
                 </label>
                 <button
                     className="ogx-column-visibility-panel__reset-btn"
-                    onClick={onShowAll}
+                    onClick={() => { onShowAll(); onColumnOrderReset?.(); }}
                 >
                     Reset
                 </button>