@opencorestack/opengridx 1.3.0 → 2.0.1

package/docs/API_REFERENCE.md

@@ -45,6 +45,7 @@ The main component for displaying and interacting with data.
 | :--- | :--- | :--- | :--- |
 | `sortingMode` | `'client' \| 'server'` | `'client'` | Set to `'server'` when your backend handles sorting. The grid calls `onSortModelChange` but does not re-sort rows locally. |
 | `filterMode` | `'client' \| 'server'` | `'client'` | Set to `'server'` when your backend handles filtering. The grid calls `onFilterModelChange` but does not re-filter rows locally. |
+| `multiSort` | `boolean` | `false` | When `true`, clicking any sortable column header appends/cycles it in the sort model instead of replacing it — no Shift key required. Shift+click always appends regardless of this prop. |
 | `onSortModelChange` | `(model: GridSortItem[]) => void` | — | Fired when the active sort model changes. |
 | `onFilterModelChange` | `(model: GridFilterModel) => void` | — | Fired when the active filter model changes. |
 
@@ -81,7 +82,6 @@ The main component for displaying and interacting with data.
 | `pinnedColumns` | `GridColumnPinning` | — | Columns pinned to the left or right viewport edges. See [Column & Row Pinning](#-column--row-pinning). |
 | `onPinnedColumnsChange` | `(model: GridColumnPinning) => void` | — | Fired when column pinning changes. |
 | `pinnedRows` | `GridRowPinning` | — | Row IDs pinned to the top or bottom of the viewport. |
-| `onPinnedRowsChange` | `(model: GridRowPinning) => void` | — | Fired when row pinning changes. |
 | `pinCheckboxColumn` | `boolean` | `false` | Keeps the checkbox column visible during horizontal scrolling. |
 | `pinExpandColumn` | `boolean` | `false` | Keeps the Master-Detail expansion column visible during horizontal scrolling. |
 
@@ -107,7 +107,7 @@ The main component for displaying and interacting with data.
 | :--- | :--- | :--- | :--- |
 | `treeData` | `boolean` | `false` | Enables hierarchical tree data display. |
 | `getTreeDataPath` | `(row: R) => string[]` | — | Returns the hierarchy path for a row (e.g. `['Engineering', 'Frontend']`). |
-| `groupingColDef` | `GridColDef` | — | Overrides the auto-generated tree expand/collapse column definition. |
+| `groupingColDef` | `Partial<GridColDef>` | — | Configures the dedicated `__group__` column prepended at position 0 (auto-pinned left) when row grouping is active. Accepts `headerName`, `width`, `renderCell`, and any non-system `GridColDef` field. The column's `field` is always `'__group__'`; it is never sorted, exported, hidden, or re-ordered. |
 | `defaultGroupingExpansionDepth` | `number` | `0` | Number of tree levels expanded on initial render (`-1` = all). |
 
 #### Row Grouping & Aggregation
@@ -115,7 +115,6 @@ The main component for displaying and interacting with data.
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
 | `rowGroupingModel` | `GridRowGroupingModel` | `[]` | Array of field names to group rows by (e.g. `['department', 'team']`). See [Row Grouping](#️-row-grouping). |
-| `onRowGroupingModelChange` | `(model: GridRowGroupingModel) => void` | — | Fired when the grouping model changes. |
 | `aggregationModel` | `GridAggregationModel` | — | Map of `field → aggFn` (e.g. `{ salary: 'sum', age: 'avg' }`). See [Aggregation Reference](#-aggregation-reference). |
 | `onAggregationModelChange` | `(model: GridAggregationModel) => void` | — | Fired when the aggregation model changes. |
 | `getAggregationPosition` | `(groupNode: GridTreeNode \| null) => 'inline' \| 'footer' \| null` | — | Controls where aggregation results appear. `'inline'` = inside the group row, `'footer'` = a dedicated row below the group, `null` = hidden. Pass `null` groupNode = grand-total (root) position. |
@@ -279,7 +278,7 @@ Defines the behavior and appearance of a single column.
 | :--- | :--- | :--- | :--- |
 | `field` | `string` | — | **Required.** Unique identifier matching the row object key. |
 | `headerName` | `string` | — | Text shown in the column header cell. |
-| `description` | `string` | — | Tooltip shown on header hover (accessibility label). |
+| `description` | `string` | — | Tooltip shown on column header hover (rendered as the HTML `title` attribute — improves accessibility). |
 | `width` | `number \| string` | `100` | Fixed width in pixels or a percentage string. |
 | `minWidth` | `number` | — | Minimum width in pixels (enforced during resize). |
 | `maxWidth` | `number` | — | Maximum width in pixels (enforced during resize). |
@@ -335,9 +334,10 @@ Defines the behavior and appearance of a single column.
 | `pinnable` | `boolean` | `true` | Allow this column to be pinned via the UI. |
 | `disableColumnMenu` | `boolean` | `false` | Hide the column header kebab/context menu. |
 | `exportable` | `boolean` | `true` | Set to `false` to exclude from CSV, Excel, JSON, and Print exports. |
-| `groupable` | `boolean` | `true` | Allow this column to be used as a row grouping dimension. |
+| `groupable` | `boolean` | `true` | Allow this column to be used as a row grouping dimension. Set to `false` to prevent this field from being grouped, even when it appears in `rowGroupingModel`. |
+| `groupingValueFormatter` | `(params: { field: string; value: unknown }) => string` | — | Custom formatter for group-header labels when this column is the active grouping field. Falls back to `"field: value"` when omitted. |
 | `aggregable` | `boolean` | `true` | Allow this column to be aggregated. |
-| `availableAggregationFunctions` | `string[]` | all built-ins | Restrict which aggregation functions are available for this column (e.g. `['sum', 'avg']`). |
+| `availableAggregationFunctions` | `string[]` | all built-ins | Restrict which aggregation functions are computed and available for this column (e.g. `['sum', 'avg']`). Functions outside this list are skipped even if set in `aggregationModel`. |
 
 ---
 
@@ -1087,7 +1087,6 @@ import { DataGrid, GridRowGroupingModel, GridAggregationModel } from '@opencores
 import { useState } from 'react';
 
 export default function GroupingExample() {
-  const [rowGroupingModel, setRowGroupingModel] = useState<GridRowGroupingModel>(['department']);
   const [aggregationModel, setAggregationModel] = useState<GridAggregationModel>({
     salary: 'sum',
     age: 'avg',
@@ -1097,8 +1096,7 @@ export default function GroupingExample() {
     <DataGrid
       rows={rows}
       columns={columns}
-      rowGroupingModel={rowGroupingModel}
-      onRowGroupingModelChange={setRowGroupingModel}
+      rowGroupingModel={['department']}
       aggregationModel={aggregationModel}
       onAggregationModelChange={setAggregationModel}
     />

package/docs/components/datagrid.md

@@ -27,11 +27,29 @@ function MyGrid() {
 | `getRowId` | `(row: R) => GridRowId` | `row.id` | Unique ID for each row. |
 | `height` | `number \| string` | `undefined` | Height of the grid container. |
 | `loading` | `boolean` | `false` | Displays a loading skeleton/shimmer. |
+| `density` | `'compact' \| 'standard' \| 'comfortable'` | `'standard'` | Row height preset: compact = 32 px, standard = `rowHeight`, comfortable = 72 px. |
 | `checkboxSelection` | `boolean` | `false` | Enable row checkboxes. |
+| `disableRowSelectionOnClick` | `boolean` | `false` | When `true`, clicking a row does not toggle its selection. |
+| `disableMultipleRowSelection` | `boolean` | `false` | When `true`, at most one row can be selected at a time. |
 | `pagination` | `boolean` | `false` | Enable/Disable bottom pagination bar. |
-| `paginationModel` | `GridPaginationModel` | — | Controlled pagination state (`{ page, pageSize }`). |
+| `paginationModel` | `GridPaginationModel` | — | Controlled pagination state (`{ page, pageSize }`). Omit for uncontrolled; use `initialState` to set the initial page/pageSize. |
 | `pageSizeOptions` | `number[]` | `[10, 25, 50]` | Available page size options. |
-| `initialState` | `GridInitialState` | `undefined` | Initial configuration (sorting, columns, etc). |
+| `initialState` | `GridInitialState` | `undefined` | Initial configuration (sorting, columns, pagination, etc). |
+
+## 🔃 Sorting
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `sortModel` | `GridSortItem[]` | — | Controlled sort state. |
+| `onSortModelChange` | `(model: GridSortItem[]) => void` | — | Fired when the sort model changes. |
+| `multiSort` | `boolean` | `false` | When `true`, every click appends/cycles the column in the sort model instead of replacing it. Shift+click always appends regardless of this prop. |
+
+## 🌳 Row Grouping
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `rowGroupingModel` | `string[]` | `[]` | Fields to group by (in order). |
+| `groupingColDef` | `GridColDef` | — | Config for the dedicated `__group__` column created at position 0, auto-pinned left, when grouping is active. |
 
 ## 🖱️ Interaction & Events
 

package/docs/components/header.md

@@ -9,7 +9,9 @@ Manages the column headers, sorting triggers, column resizing, and column groupi
 | `columns` | `GridColDef[]` | Column definitions for the visible viewport. |
 | `columnGroupingModel` | `GridColumnGroupingModel` | Hierarchy for multi-level header spanning. |
 | `sortModel` | `GridSortModel` | Current sorting state for highlight and icons. |
-| `onSort` | `(field, direction) => void` | Callback triggered when a header is clicked. |
+| `onSort` | `(field, direction) => void` | Callback triggered on a plain click — replaces the sort model with a single key. |
+| `onSortAdd` | `(field, direction) => void` | Callback triggered on Shift+click or when `multiSort` is active — appends/cycles the key without replacing others. |
+| `multiSort` | `boolean` | When `true`, every click routes to `onSortAdd` instead of `onSort`. Wired from the `multiSort` prop on `<DataGrid>`. |
 | `onColumnResize` | `Function` | Callback for manual column width changes. |
 | `pinnedColumns` | `GridColumnPinning` | Coordinates sticky positioning for headers. |
 | `checkboxSelection` | `boolean` | Renders the "Select All" checkbox. |

package/docs/components/row.md

@@ -30,23 +30,18 @@ The grid supports "Zebra" striping via CSS:
 
 When `getDetailPanelContent` is provided, the `<Row />` renders an expandable container below itself to show supplemental data.
 
-## ⚠️ v1.1 — Hierarchy Field Deprecation
+## ⚠️ v2.0 — Runtime `_*` hierarchy fields removed
 
-The internal hierarchy fields (`_hasChildren`, `_treeDepth`, `_isExpanded`, `_groupingField`, `_groupingValue`, `_descendantCount`, `_isGroupRow`) are no longer typed on `GridRowModel`. They will be removed from the runtime row object in v2.0.
-
-**Before (still works at runtime in v1.1 — `params.row._hasChildren` is `unknown`, not `boolean`; assignment to typed variables and arithmetic will error, truthiness checks will not):**
+The internal hierarchy fields (`_hasChildren`, `_treeDepth`, `_isExpanded`, `_groupingField`, `_groupingValue`, `_descendantCount`, `_isGroupRow`) are no longer injected onto the runtime row object as of v2.0. Use `params.rowMeta` instead:
 
 ```tsx
+// ❌ v1 shim — no longer works in v2:
 renderCell: (params) => {
-  // v1.1 accepts this at runtime; _hasChildren resolves to unknown via [key: string]: unknown
   const hasChildren = (params.row as Record<string, unknown>)._hasChildren;
   return hasChildren ? <GroupIcon /> : params.value;
 }
-```
 
-**After (v1.1+):**
-
-```tsx
+// ✅ v2:
 renderCell: (params) => {
   const hasChildren = params.rowMeta?.hasChildren;
   return hasChildren ? <GroupIcon /> : params.value;

package/docs/features/pinning.md

@@ -55,7 +55,6 @@ Rows can be pinned to the top or bottom of the grid. Pinned rows remain visible
 | `pinnedColumns` | `GridColumnPinning` | `{ left: string[], right: string[] }` |
 | `pinnedRows` | `GridRowPinning` | `{ top: GridRowId[], bottom: GridRowId[] }` |
 | `onPinnedColumnsChange` | `(model) => void` | Callback triggered when pinning changes. |
-| `onPinnedRowsChange` | `(model) => void` | Callback triggered when row pinning changes. |
 
 ---
 

package/docs/features/selection.md

@@ -36,6 +36,28 @@ const [selection, setSelection] = useState<GridRowId[]>([]);
 />
 ```
 
+### Disable Click-to-Select
+
+Use `disableRowSelectionOnClick` to prevent clicking a row from changing the selection (useful when rows have their own click actions like navigation). Selection via checkboxes still works.
+
+```tsx
+<DataGrid
+  checkboxSelection
+  disableRowSelectionOnClick
+/>
+```
+
+### Single-Row Selection Only
+
+Use `disableMultipleRowSelection` to cap selection to one row at a time. Clicking a second row deselects the first; clicking an already-selected row deselects it.
+
+```tsx
+<DataGrid
+  disableMultipleRowSelection
+  onRowSelectionModelChange={(model) => console.log('selected:', model)}
+/>
+```
+
 ---
 
 ## ⚙️ API Reference

package/docs/features/sorting-pagination.md

@@ -15,6 +15,41 @@ Sorting can be toggled by clicking column headers. It supports single-column and
 | `sortModel` | `GridSortItem[]` | Controlled state of active sorts. |
 | `onSortModelChange` | `(model) => void` | Callback triggered when sorting changes. |
 
+### Multi-Column Sort
+
+OpenGridX supports two modes of multi-column sorting:
+
+**`multiSort` prop (single-click, recommended):** Pass `multiSort` to make every click append or cycle a column in the sort model rather than replacing it. No modifier key required.
+
+```tsx
+<DataGrid
+  multiSort
+  sortModel={sortModel}
+  onSortModelChange={setSortModel}
+  ...
+/>
+```
+
+**Shift+Click (always available):** Even without `multiSort`, holding **Shift** while clicking a column header appends it to the active sort. This works in all grids regardless of the prop.
+
+Each active sort column shows a numbered priority badge (`1`, `2`, `3`…) next to its arrow.
+
+- Clicking (or shift-clicking) an already-sorted column cycles its direction: `asc → desc → removed`.
+- A plain click *without* `multiSort` and without Shift always resets to a single-key sort on that column.
+- Set `sortable: false` on a column to exclude it entirely.
+
+```tsx
+// Controlled multi-sort — set programmatically or drive from UI with multiSort:
+<DataGrid
+  multiSort
+  sortModel={[
+    { field: 'department', sort: 'asc' },
+    { field: 'salary', sort: 'desc' },
+  ]}
+  onSortModelChange={setSortModel}
+/>
+```
+
 ### Column-Specific Config
 Disable sorting for specific columns in `GridColDef`:
 ```typescript

package/docs/features/tree-data-grouping.md

@@ -54,14 +54,57 @@ Tree data is used for data that has a natural parent-child relationship (e.g., a
 ---
 
 ## 🎨 Customizing the Group Column
-By default, OpenGridX creates a `__group__` column. You can customize its appearance:
+
+When `rowGroupingModel` is active, pass `groupingColDef` to configure a dedicated `__group__` column that is prepended at position 0 and auto-pinned left, separate from your data columns. It accepts any `GridColDef` fields except `field` (always `'__group__'`).
 
 ```tsx
 <DataGrid
+  rows={rows}
+  columns={columns}
+  rowGroupingModel={['department']}
   groupingColDef={{
-    headerName: 'Hierarchy',
-    width: 300,
-    renderCell: (params) => { /* custom renderer */ }
+    headerName: 'Department Group',
+    width: 240,
   }}
 />
 ```
+
+Without `groupingColDef`, the group toggle is overlaid on the first data column. With it, the group indicator always appears in its own fixed column regardless of your `columns` order.
+
+---
+
+## 🏷️ Customizing Group Labels (`groupingValueFormatter`)
+
+By default each group-header row displays `"field: value"`. Use `groupingValueFormatter` on a `GridColDef` to override the label for that grouping level:
+
+```tsx
+const columns: GridColDef[] = [
+  {
+    field: 'department',
+    headerName: 'Department',
+    groupingValueFormatter: ({ value }) => `📁 ${String(value)}`,
+  },
+  { field: 'name', headerName: 'Name' },
+  { field: 'salary', headerName: 'Salary' },
+];
+
+<DataGrid rows={rows} columns={columns} rowGroupingModel={['department']} />
+// Group headers now show: "📁 Engineering", "📁 HR", etc.
+```
+
+---
+
+## 🚫 Preventing a Column from Being Grouped (`groupable: false`)
+
+Set `groupable: false` on a `GridColDef` to prevent that field from being used as a grouping dimension. The column still renders normally, but the grid skips it when building the group tree:
+
+```tsx
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', groupable: false },
+  { field: 'department', headerName: 'Department' },
+];
+
+// Even if rowGroupingModel includes 'id', it will be silently skipped.
+<DataGrid rows={rows} columns={columns} rowGroupingModel={['id', 'department']} />
+// Result: grouped by 'department' only — 'id' is skipped.
+```

package/lib/components/DataGrid/DataGrid.tsx

@@ -39,7 +39,10 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         rowHeight = 52,
         headerHeight = 56,
         autoHeight = false,
+        density,
         checkboxSelection = false,
+        disableRowSelectionOnClick = false,
+        disableMultipleRowSelection = false,
         rowSelectionModel: propRowSelectionModel,
         onRowSelectionModelChange: propOnRowSelectionModelChange,
         onRowClick,
@@ -50,7 +53,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         sortModel: propSortModel,
         onSortModelChange,
         pagination: propPagination = false,
-        paginationModel = { page: 0, pageSize: 100 },
+        paginationModel,
         onPaginationModelChange,
         pageSizeOptions = [10, 25, 50, 100],
         pinnedColumns: propPinnedColumns,
@@ -74,6 +77,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         treeData = false,
         getTreeDataPath,
         defaultGroupingExpansionDepth,
+        groupingColDef,
 
         rowGroupingModel: propRowGroupingModel,
 
@@ -86,6 +90,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         onProcessRowUpdateError,
 
         dataSource,
+        multiSort = false,
         sortingMode = 'client',
         filterMode = 'client',
         paginationMode = 'client',
@@ -191,8 +196,35 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
     const pivot = usePivot(rows as GridRowModel[], columns as unknown as GridColDef[], currentPivotModel, pivotMode);
 
+    const effectiveRowHeight = density === 'compact' ? 32 : density === 'comfortable' ? 72 : rowHeight;
+
     const activeRows = (pivotMode && pivot.isValid ? pivot.pivotRows : rows) as unknown as R[];
-    const activeColumns = (pivotMode && pivot.isValid ? pivot.pivotColumns : columns) as unknown as GridColDef<R>[];
+    const baseColumns = (pivotMode && pivot.isValid ? pivot.pivotColumns : columns) as unknown as GridColDef<R>[];
+
+    // When groupingColDef is provided and row grouping is active, prepend a
+    // dedicated synthetic __group__ column at position 0 (pinned-left).
+    const isRowGroupingActive = Boolean(propRowGroupingModel && propRowGroupingModel.length > 0);
+
+    // Auto-pin __group__ column to the left when groupingColDef is active.
+    const effectivePinnedColumns = (groupingColDef && isRowGroupingActive && !pivotMode)
+        ? { ...pinnedColumns, left: ['__group__', ...((pinnedColumns?.left ?? []).filter(f => f !== '__group__'))] }
+        : pinnedColumns;
+
+    const activeColumns = (groupingColDef && isRowGroupingActive && !pivotMode)
+        ? [
+            {
+                headerName: 'Group',
+                width: 220,
+                ...groupingColDef,
+                field: '__group__',
+                hideable: false,
+                sortable: false,
+                pinnable: false,
+                exportable: false,
+            } as unknown as GridColDef<R>,
+            ...baseColumns,
+          ]
+        : baseColumns;
 
     const [serverAggregationResults, setServerAggregationResults] = useState<GridAggregationResult | null>(null);
 
@@ -245,7 +277,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     const gridData = useDataGrid({
         rows: normalizedRows,
         columns: activeColumns,
-        rowHeight,
+        rowHeight: effectiveRowHeight,
         headerHeight,
         rowCount: propRowCount,
         columnVisibilityModel,
@@ -309,6 +341,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     const rowGroupingHandlers = useRowGrouping({
         rows: effectiveRows,
         getRowId: effectiveGetRowId,
+        columns: activeColumns,
         rowGroupingModel,
         aggregationModel,
         defaultGroupingExpansionDepth,
@@ -355,7 +388,27 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         }
 
         onRowClick?.(params);
-    }, [isHierarchyEnabled, activeHierarchyHandlers, onRowClick, rowMetaMap]);
+
+        if (!disableRowSelectionOnClick) {
+            let next: GridRowId[];
+            if (disableMultipleRowSelection) {
+                const alreadySelected = selectedRowIds.has(id as GridRowId);
+                next = alreadySelected ? [] : [id as GridRowId];
+            } else {
+                const newSelection = new Set(selectedRowIds);
+                if (newSelection.has(id as GridRowId)) {
+                    newSelection.delete(id as GridRowId);
+                } else {
+                    newSelection.add(id as GridRowId);
+                }
+                next = Array.from(newSelection);
+            }
+            if (!isSelectionControlled) {
+                setInternalRowSelectionModel(next);
+            }
+            onRowSelectionModelChange?.(next);
+        }
+    }, [isHierarchyEnabled, activeHierarchyHandlers, onRowClick, rowMetaMap, disableRowSelectionOnClick, disableMultipleRowSelection, selectedRowIds, isSelectionControlled, setInternalRowSelectionModel, onRowSelectionModelChange]);
 
     const dataSourceHandlers = useGridDataSource({
         dataSource,
@@ -440,7 +493,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         columnWidths,
         effectiveColumnOrder,
         columnVisibilityModel,
-        pinnedColumns,
+        pinnedColumns: effectivePinnedColumns,
     });
 
     const rowPipeline = useGridRowPipeline<GridRowModel>({
@@ -486,6 +539,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
     const { aggregationResult } = useAggregation({
         rows: filteredRows,
+        columns: activeColumns as unknown as GridColDef[],
         aggregationModel,
         isServerSide: !!(dataSource && (paginationMode === 'server' || sortingMode === 'server')),
         dataSource,
@@ -548,7 +602,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     }, [aggregationResult, aggregationModel, hasAggregation, gridData.apiRef, isRowGrouping, rowGroupingHandlers, sortedUnpinnedRows]);
 
     const layout = useLayout({
-        rowHeight,
+        rowHeight: effectiveRowHeight,
         pagination,
         paginatedUnpinnedRows,
         sortedUnpinnedRows,
@@ -557,7 +611,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         pinnedTopRowsLength: pinnedTopRows.length,
         pinnedBottomRowsLength: pinnedBottomRows.length,
         visibleOrderedColumns,
-        pinnedColumns,
+        pinnedColumns: effectivePinnedColumns,
         columnWidths,
         viewportWidth: state.dimensions.viewportWidth || 1000,
         checkboxSelection,
@@ -688,6 +742,18 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         onSortModelChange?.(newSortModel as GridSortItem[]);
     }, [isSortControlled, onSortModelChange, setInternalSortModel]);
 
+    const handleSortAdd = useCallback((field: string, direction: GridSortDirection) => {
+        const existing = sortModel.filter(item => item.field !== field);
+        const newSortModel: GridSortItem[] = direction
+            ? [...existing, { field, sort: direction }]
+            : existing;
+
+        if (!isSortControlled) {
+            setInternalSortModel(newSortModel);
+        }
+        onSortModelChange?.(newSortModel);
+    }, [sortModel, isSortControlled, onSortModelChange, setInternalSortModel]);
+
     const { focusedCell, setFocusedCell, handleFocus, handleBlur, handleKeyDown } = useGridKeyboardNavigation({
         allRenderableRows,
         navigationColumns,
@@ -809,7 +875,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
             style={{
                 ...style,
                 height: height ?? style?.height,
-                '--ogx-row-height': `${rowHeight}px`,
+                '--ogx-row-height': `${effectiveRowHeight}px`,
                 '--ogx-header-height': `${headerHeight}px`
             } as unknown as React.CSSProperties}
             aria-busy={effectiveLoading}
@@ -844,7 +910,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                     selectedRowIds={selectedRowIds}
                     listViewColumn={listViewColumn}
                     noRowsLabel={effectiveNoRowsLabel}
-                    rowHeight={rowHeight}
+                    rowHeight={effectiveRowHeight}
                     checkboxSelection={checkboxSelection}
                     paginationMode={paginationMode}
                     dataSource={dataSource}
@@ -909,10 +975,12 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             onSelectAll={handleSelectAll}
                             sortModel={sortModel}
                             onSort={handleSort}
+                            onSortAdd={handleSortAdd}
+                            multiSort={multiSort}
 
                             onColumnResize={handleColumnResize}
                             columnWidths={columnWidths}
-                            pinnedColumns={pinnedColumns}
+                            pinnedColumns={effectivePinnedColumns}
 
                             focusedCell={focusedCell}
                             onHeaderClick={(field) => {
@@ -969,7 +1037,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             onCellClick={handleCellClick}
                             onSelectionChange={handleSelectionChange}
                             columnWidths={columnWidths}
-                            pinnedColumns={pinnedColumns}
+                            pinnedColumns={effectivePinnedColumns}
                             pinnedRows={pinnedRows}
                             hasDetailPanel={hasDetailPanel}
                             expandedRowIds={expandedRowIds}
@@ -981,7 +1049,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             focusedCell={focusedCell}
                             colspanMap={spanning.colspanMap}
                             rowSpanningCaches={spanning.rowSpanningState.caches}
-                            rowHeight={rowHeight}
+                            rowHeight={effectiveRowHeight}
                             rowMetaMap={rowMetaMap}
                         />
 
@@ -996,14 +1064,14 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             checkboxSelection={checkboxSelection}
                             hasDetailPanel={hasDetailPanel}
                             rowReordering={rowReordering}
-                            rowHeight={rowHeight}
+                            rowHeight={effectiveRowHeight}
                             pinnedRows={pinnedRows}
                             selectedRowIds={selectedRowIds}
                             onRowClick={handleRowClick}
                             onCellClick={handleCellClick}
                             onSelectionChange={handleSelectionChange}
                             columnWidths={columnWidths}
-                            pinnedColumns={pinnedColumns}
+                            pinnedColumns={effectivePinnedColumns}
                             expandedRowIds={expandedRowIds}
                             getDetailPanelContent={getDetailPanelContent}
                             getDetailPanelHeight={getDetailPanelHeight}
@@ -1033,7 +1101,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             onCellClick={handleCellClick}
                             onSelectionChange={handleSelectionChange}
                             columnWidths={columnWidths}
-                            pinnedColumns={pinnedColumns}
+                            pinnedColumns={effectivePinnedColumns}
                             pinnedRows={pinnedRows}
                             hasDetailPanel={hasDetailPanel}
                             expandedRowIds={expandedRowIds}
@@ -1045,7 +1113,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             focusedCell={focusedCell}
                             colspanMap={spanning.colspanMap}
                             rowSpanningCaches={spanning.rowSpanningState.caches}
-                            rowHeight={rowHeight}
+                            rowHeight={effectiveRowHeight}
                             rowMetaMap={rowMetaMap}
                         />
 
@@ -1058,11 +1126,11 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                                 aggregationModel={aggregationModel}
                                 aggregationResult={aggregationResult}
                                 columnWidths={resolvedColumnWidths}
-                                rowHeight={rowHeight}
+                                rowHeight={effectiveRowHeight}
                                 checkboxSelection={checkboxSelection}
                                 hasDetailPanel={hasDetailPanel}
                                 rowReordering={rowReordering}
-                                pinnedColumns={pinnedColumns}
+                                pinnedColumns={effectivePinnedColumns}
                             />
                         )}