@mui/x-data-grid-generator 8.13.0 → 8.14.0

package/CHANGELOG.md

@@ -5,6 +5,176 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.14.0
+
+_Oct 9, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 The [Chart zoom now supports the `pressAndDrag` gesture](https://mui.com/x/react-charts/zoom-and-pan/#zoom-interactions-configuration). Pan by pressing and dragging.
+- 🔄 [Server-side pivoting](https://mui.com/x/react-data-grid/server-side-data/pivoting/) support for the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@djpremier, @Utkarsh-0304
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @prakhargupta1, @rita-codes, @noraleonte, @brijeshb42, @arminmeh, @michelengelen
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.14.0`
+
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#19658) @djpremier
+
+#### `@mui/x-data-grid-pro@8.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.14.0`.
+
+#### `@mui/x-data-grid-premium@8.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.14.0`, plus:
+
+- [DataGridPremium] Server-side pivoting (#19575) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.14.0`
+
+- [pickers] Fixed the extra element for the disabled date picker (#19387) @Utkarsh-0304
+- [pickers] Fix input `autoCapitalize` value for Firefox compatibility (#19285) @michelengelen
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#19658) @djpremier
+
+#### `@mui/x-date-pickers-pro@8.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.14.0`
+
+- [charts] Add `pressAndDrag` pan gesture (#19779) @JCQuintas
+- [charts] Allow `minPointers` and `maxPointers` to be configured by pointer type (#19794) @JCQuintas
+- [charts] Correct scale domain types (#19844) @bernardobelchior
+- [charts] Fix tooltip position when scrolling (#19857) @alexfauquette
+- [charts] Link item highlight with keyboard navigation (#19768) @alexfauquette
+- [charts] Refactor domain/scale selectors (#19832) @bernardobelchior
+- [charts] Remove min/max from ordinal configuration (#19789) @alexfauquette
+- [charts] Simplify axes filters selectors (#19833) @bernardobelchior
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#19658) @djpremier
+
+#### `@mui/x-charts-pro@8.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.14.0`.
+
+#### `@mui/x-charts-premium@8.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.14.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.14.0`
+
+- [tree view] Fix Tree View tooltip anchoring on overview page (#19806) @noraleonte
+
+#### `@mui/x-tree-view-pro@8.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.14.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add overview section for pie chart (#19672) @prakhargupta1
+- [docs] Fix demo title knob keys (#19843) @JCQuintas
+- [docs] Hide UI elements of unsupported features in the data source demos (#19849) @arminmeh
+
+### Core
+
+- [code-infra] Cleanup unused dependencies (#19788) @brijeshb42
+- [code-infra] Fix pnpm-lock issue (#19861) @JCQuintas
+- [code-infra] Improve publishing docs (#19404) @Janpot
+- [code-infra] Remove tsconfig `baseUrl` (#19837) @Janpot
+- [code-infra] Support custom npm dist tags during release (#19803) @Janpot
+- [code-infra] Wait longer for print dialog (#19795) @JCQuintas
+- [code-infra] Replace `lodash` with `es-toolkit` (#19853) @bernardobelchior
+- [code-infra] Update release script PR checklist (#19785) @bernardobelchior
+- [code-infra] Remove remaining usages of `lodash` (#19864) @bernardobelchior
+- [docs-infra] Add `title` knob (#19792) @JCQuintas
+- [docs-infra] Fix missing key in title knob (#19804) @JCQuintas
+
+### Miscellaneous
+
+- [x-telemetry] Fix transpile issues (#19761) @hasdfa
+- [x-telemetry] Fix ref to deleted file (#19842) @JCQuintas
+
+## 8.13.1
+
+_Oct 1, 2025_
+
+- 🐛 Fix `@mui/x-charts-pro` failure on import due to missing `@mui/x-internals` release
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.13.1`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.13.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.13.1`.
+
+#### `@mui/x-data-grid-premium@8.13.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.13.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.13.1`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.13.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.13.1`, plus:
+
+- [charts-pro] Fix `@mui/x-charts-pro` failure on import due to missing `@mui/x-internals` release @bernardobelchior
+
+#### `@mui/x-charts-premium@8.13.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.13.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.13.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.13.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.13.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+Internal changes.
+
 ## 8.13.0
 
 _Oct 1, 2025_
@@ -160,7 +330,7 @@ We'd like to extend a big thank you to the 15 contributors who made this release
 
 ![Grid x Charts](https://github.com/user-attachments/assets/0817c36f-f87f-4688-8f30-fa0db638ca8c)
 
-  👉 [🎥 Watch the full video](https://github.com/user-attachments/assets/28f1848e-dc85-4077-8756-a3e88afd4e54)
+👉 [🎥 Watch the full video](https://github.com/user-attachments/assets/28f1848e-dc85-4077-8756-a3e88afd4e54)
 
 - ⌨️ Charts keyboard navigation
 - ⚡️ Charts: Add new `renderer="svg-batch"` prop to Scatter charts that provides improved performance for large datasets

package/columns/commodities.columns.js

@@ -70,6 +70,7 @@ const getCommodityColumns = (editable = false) => [{
   renderEditCell: _renderer.renderEditStatus,
   type: 'singleSelect',
   valueOptions: _staticData.STATUS_OPTIONS,
+  valueFormatter: value => value === 'PartiallyFilled' ? 'Partially Filled' : value,
   width: 150,
   editable
 }, {

package/esm/columns/commodities.columns.js

@@ -64,6 +64,7 @@ export const getCommodityColumns = (editable = false) => [{
   renderEditCell: renderEditStatus,
   type: 'singleSelect',
   valueOptions: STATUS_OPTIONS,
+  valueFormatter: value => value === 'PartiallyFilled' ? 'Partially Filled' : value,
   width: 150,
   editable
 }, {

package/esm/hooks/serverUtils.d.ts

@@ -1,4 +1,4 @@
-import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel, GridValidRowModel, GridAggregationModel } from '@mui/x-data-grid-premium';
+import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel, GridValidRowModel, GridAggregationModel, GridPivotModel, GridGetRowsResponse } from '@mui/x-data-grid-premium';
 export interface FakeServerResponse {
   returnedRows: GridRowModel[];
   aggregateRow?: GridValidRowModel;
@@ -13,7 +13,15 @@ export interface PageInfo {
   pageSize?: number;
 }
 export interface DefaultServerOptions {
+  /**
+   * The minimum response delay in milliseconds.
+   * For a large dataset, the response delay can be larger than the minimum delay.
+   */
   minDelay: number;
+  /**
+   * The maximum response delay in milliseconds
+   * For a large dataset, the response delay can be larger than the maximum delay.
+   */
   maxDelay: number;
   useCursorPagination?: boolean;
 }
@@ -38,6 +46,15 @@ export interface ServerSideQueryOptions {
   start?: number;
   end?: number;
   groupFields?: string[];
+  pivotModel?: GridPivotModel;
+}
+interface NestedDataRowsResponse {
+  rows: GridRowModel[];
+  rootRowCount: number;
+  aggregateRow?: GridRowModel;
+}
+interface PivotingDataRowsResponse extends NestedDataRowsResponse {
+  pivotColumns: GridGetRowsResponse['pivotColumns'];
 }
 export declare const disableDelay: any;
 export declare const DEFAULT_SERVER_OPTIONS: DefaultServerOptions;
@@ -45,11 +62,6 @@ export declare const DEFAULT_SERVER_OPTIONS: DefaultServerOptions;
  * Simulates server data loading
  */
 export declare const loadServerRows: (rows: GridRowModel[], queryOptions: QueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<FakeServerResponse>;
-interface NestedDataRowsResponse {
-  rows: GridRowModel[];
-  rootRowCount: number;
-  aggregateRow?: GridRowModel;
-}
 /**
  * Simulates server data for tree-data feature
  */
@@ -58,4 +70,8 @@ export declare const processTreeDataRows: (rows: GridRowModel[], queryOptions: S
  * Simulates server data for row grouping feature
  */
 export declare const processRowGroupingRows: (rows: GridValidRowModel[], queryOptions: ServerSideQueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<NestedDataRowsResponse>;
+/**
+ * Simulates server data for pivoting feature
+ */
+export declare const processPivotingRows: (rows: GridValidRowModel[], queryOptions: ServerSideQueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<PivotingDataRowsResponse>;
 export {};

package/esm/hooks/serverUtils.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridLogicOperator, GRID_AGGREGATION_FUNCTIONS } from '@mui/x-data-grid-premium';
+import { GridLogicOperator, GRID_AGGREGATION_FUNCTIONS, gridStringOrNumberComparator } from '@mui/x-data-grid-premium';
 import { randomInt } from "../services/random-generator.js";
 const getAvailableAggregationFunctions = columnType => {
   const availableAggregationFunctions = new Map();
@@ -27,7 +27,7 @@ const getRowComparator = (sortModel, aggregationModel, columnsWithDefaultColDef)
     return comparator;
   }
   const sortOperators = sortModel.map(sortItem => {
-    const columnField = aggregationModel?.[sortItem.field] ? `${sortItem.field}Aggregate` : sortItem.field;
+    const columnField = sortItem.field;
     const colDef = columnsWithDefaultColDef.find(({
       field
     }) => field === sortItem.field);
@@ -187,7 +187,7 @@ const applyAggregation = (aggregationModel, colDefs, rows, groupId = 'root') =>
       return;
     }
     const values = rows.map(row => row[field]);
-    aggregateValues[`${field}Aggregate`] = aggregationFunction.apply({
+    aggregateValues[field] = aggregationFunction.apply({
       values,
       field,
       groupId
@@ -195,6 +195,49 @@ const applyAggregation = (aggregationModel, colDefs, rows, groupId = 'root') =>
   });
   return aggregateValues;
 };
+const generateParentRows = pathsToAutogenerate => {
+  return Array.from(pathsToAutogenerate).map(path => {
+    const pathArray = path.split(',');
+    return {
+      id: `auto-generated-parent-${pathArray.join('-')}`,
+      path: pathArray.slice(0, pathArray.length),
+      group: pathArray.slice(-1)[0]
+    };
+  });
+};
+
+/**
+ * Computes pivot aggregations for given pivot column keys
+ */
+const computePivotAggregations = (pivotColumnKeys, rows, visibleValues, columnTypeMap, groupId = 'root', columnGroupIdSeparator = '>->') => {
+  const pivotAggregations = {};
+  pivotColumnKeys.forEach(pivotColumnKey => {
+    const values = rows.map(row => row[pivotColumnKey]).filter(v => v !== undefined);
+    if (values.length > 0) {
+      // Find the corresponding pivot value configuration
+      const pivotValueConfig = visibleValues.find(v => {
+        if (visibleValues.length === 0 || !visibleValues[0].field) {
+          return v.field === pivotColumnKey;
+        }
+        // For pivot columns with column grouping, extract the value field from the column name
+        const columnParts = pivotColumnKey.split(columnGroupIdSeparator);
+        return columnParts[columnParts.length - 1] === v.field;
+      });
+      if (pivotValueConfig) {
+        const availableAggregationFunctions = getAvailableAggregationFunctions(columnTypeMap.get(pivotValueConfig.field));
+        const aggregationFunction = availableAggregationFunctions.get(pivotValueConfig.aggFunc);
+        if (aggregationFunction) {
+          pivotAggregations[pivotColumnKey] = aggregationFunction.apply({
+            values,
+            field: pivotValueConfig.field,
+            groupId
+          });
+        }
+      }
+    }
+  });
+  return pivotAggregations;
+};
 
 /**
  * Simulates server data loading
@@ -435,7 +478,10 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
           field: f
         }) => f === field);
         if (colDef?.groupingValueGetter) {
-          return colDef.groupingValueGetter(row[field], row, colDef, apiRef);
+          return String(colDef.groupingValueGetter(row[field], row, colDef, apiRef));
+        }
+        if (colDef?.valueGetter) {
+          return String(colDef.valueGetter(row[field], row, colDef, apiRef));
         }
         return String(row[field]);
       });
@@ -465,14 +511,7 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
       path: ['']
     }));
   }
-  const autogeneratedRows = Array.from(pathsToAutogenerate).map(path => {
-    const pathArray = path.split(',');
-    return {
-      id: `auto-generated-parent-${pathArray.join('-')}`,
-      path: pathArray.slice(0, pathArray.length),
-      group: pathArray.slice(-1)[0]
-    };
-  });
+  const autogeneratedRows = generateParentRows(pathsToAutogenerate);
 
   // apply plain filtering
   const filteredRows = getTreeDataFilteredRows([...autogeneratedRows, ...rowsWithPaths, ...rowsWithMissingGroups], queryOptions.filterModel, columnsWithDefaultColDef);
@@ -533,4 +572,271 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
       });
     }, delay); // simulate network latency
   });
+};
+
+/**
+ * Simulates server data for pivoting feature
+ */
+export const processPivotingRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
+  const {
+    minDelay = 100,
+    maxDelay = 300
+  } = serverOptions;
+  if (maxDelay < minDelay) {
+    throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
+  }
+  if (!queryOptions.pivotModel) {
+    throw new Error('queryOptions.pivotModel must be defined to compute pivoting data');
+  }
+  const delay = randomInt(minDelay, maxDelay);
+  const {
+    pivotModel
+  } = queryOptions;
+  const visibleColumns = pivotModel.columns.filter(column => !column.hidden);
+  const visibleRows = pivotModel.rows.filter(row => !row.hidden);
+  const visibleValues = pivotModel.values.filter(value => !value.hidden);
+
+  // Create column lookup map for O(1) access
+  const columnLookup = new Map();
+  for (const column of columnsWithDefaultColDef) {
+    columnLookup.set(column.field, column);
+  }
+  if (visibleRows.length === 0) {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve({
+          rows: [],
+          rootRowCount: 0,
+          pivotColumns: []
+        });
+      }, delay); // simulate network latency
+    });
+  }
+
+  // Apply filtering if provided
+  let filteredRows = rows;
+  if (queryOptions.filterModel) {
+    filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
+  }
+
+  // Create pivot columns based on the pivot model
+  const columnGroupIdSeparator = '>->';
+  const pivotColumns = [];
+  const uniqueColumnGroups = new Map();
+
+  // Generate pivot column names based on pivot model columns
+  if (visibleColumns.length > 0 || visibleValues.length > 0) {
+    // Create column groups based on unique combinations of row values
+
+    filteredRows = filteredRows.map(row => {
+      const columnGroupPath = [];
+      const updatedRow = _extends({}, row);
+      for (let i = 0; i < visibleColumns.length; i += 1) {
+        const {
+          field: colGroupField
+        } = visibleColumns[i];
+        const column = columnLookup.get(colGroupField);
+        if (!column) {
+          continue;
+        }
+        if (!column.valueGetter && !column.valueFormatter) {
+          columnGroupPath.push(row[colGroupField]);
+        } else {
+          columnGroupPath.push({
+            [colGroupField]: column.valueGetter ? column.valueGetter(row[colGroupField], row, column, apiRef) : row[colGroupField]
+          });
+        }
+      }
+
+      // Create pivot columns for each value field within this column group
+      visibleValues.forEach(pivotValue => {
+        let valueKey = pivotValue.field;
+        const column = columnLookup.get(valueKey);
+        if (!column) {
+          return;
+        }
+        if (visibleColumns.length > 0) {
+          const columnGroupPathValue = columnGroupPath.map((path, pathIndex) => {
+            const value = path[visibleColumns[pathIndex].field];
+            if (value instanceof Date) {
+              return value.toLocaleDateString();
+            }
+            return value;
+          });
+          valueKey = `${columnGroupPathValue.join(columnGroupIdSeparator)}${columnGroupIdSeparator}${pivotValue.field}`;
+        }
+        uniqueColumnGroups.set(valueKey, [...columnGroupPath, pivotValue.field]);
+        updatedRow[valueKey] = column.valueGetter ? column.valueGetter(row[pivotValue.field], row, column, apiRef) : row[pivotValue.field];
+      });
+      return updatedRow;
+    });
+
+    // Convert uniqueColumnGroups to the pivot column structure
+    const columnGroupMap = new Map();
+    uniqueColumnGroups.forEach(columnGroupPath => {
+      let currentLevel = columnGroupMap;
+      let currentPath = '';
+      for (let i = 0; i < columnGroupPath.length - 1; i += 1) {
+        const groupValue = columnGroupPath[i];
+        let groupKey = typeof groupValue === 'string' ? groupValue : groupValue[visibleColumns[i].field];
+        if (groupKey instanceof Date) {
+          groupKey = groupKey.toLocaleDateString();
+        }
+        const pathKey = currentPath ? `${currentPath}-${groupKey}` : groupKey;
+        if (!currentLevel.has(groupKey)) {
+          currentLevel.set(groupKey, {
+            group: groupValue,
+            children: new Map()
+          });
+        }
+        const group = currentLevel.get(groupKey);
+        currentLevel = group.children;
+        currentPath = pathKey;
+      }
+    });
+    const convertMapToArray = map => {
+      return Array.from(map.entries()).map(([key, group]) => _extends({
+        key,
+        group: group.group
+      }, group.children.size > 0 ? {
+        children: convertMapToArray(group.children)
+      } : {}));
+    };
+    pivotColumns.push(...convertMapToArray(columnGroupMap));
+  }
+  const pivotColumnKeys = Array.from(uniqueColumnGroups.keys());
+
+  // Add paths and generate parent rows based on `visibleRows` (pivot row fields)
+  const pathsToAutogenerate = new Set();
+  let rowsWithPaths = filteredRows;
+  const rowsWithMissingGroups = [];
+  if (visibleRows.length > 0) {
+    rowsWithPaths = filteredRows.reduce((acc, row) => {
+      const partialPath = visibleRows.map(pivotRow => {
+        const field = pivotRow.field;
+        const colDef = columnLookup.get(field);
+        if (colDef?.groupingValueGetter) {
+          return String(colDef.groupingValueGetter(row[field], row, colDef, apiRef));
+        }
+        if (colDef?.valueGetter) {
+          return String(colDef.valueGetter(row[field], row, colDef, apiRef));
+        }
+        return String(row[field]);
+      });
+      for (let index = 0; index < partialPath.length; index += 1) {
+        const value = partialPath[index];
+        if (value === undefined) {
+          if (index === 0) {
+            rowsWithMissingGroups.push(_extends({}, row, {
+              group: false
+            }));
+          }
+          return acc;
+        }
+        const parentPath = partialPath.slice(0, index + 1);
+        const stringifiedPath = parentPath.join(',');
+        if (!pathsToAutogenerate.has(stringifiedPath)) {
+          pathsToAutogenerate.add(stringifiedPath);
+        }
+      }
+      acc.push(_extends({}, row, {
+        path: [...partialPath, '']
+      }));
+      return acc;
+    }, []);
+  } else {
+    rowsWithPaths = filteredRows.map(row => _extends({}, row, {
+      path: ['']
+    }));
+  }
+  const autogeneratedRows = generateParentRows(pathsToAutogenerate);
+
+  // Apply tree data filtering to include missing parents and children
+  const filteredRowsWithGroups = getTreeDataFilteredRows([...autogeneratedRows, ...rowsWithPaths, ...rowsWithMissingGroups], queryOptions.filterModel, columnsWithDefaultColDef);
+
+  // Get root rows
+  const rootRows = findTreeDataRowChildren(filteredRowsWithGroups, []);
+  const rootRowCount = rootRows.length;
+  let filteredRowsWithMissingGroups = [];
+  let childRows = rootRows;
+  if (queryOptions.groupKeys?.length === 0) {
+    filteredRowsWithMissingGroups = filteredRowsWithGroups.filter(({
+      group
+    }) => group === false);
+  } else {
+    childRows = findTreeDataRowChildren(filteredRowsWithGroups, queryOptions.groupKeys || []);
+  }
+  const columnTypeMap = new Map();
+  for (const column of columnsWithDefaultColDef) {
+    if (column.type) {
+      columnTypeMap.set(column.field, column.type);
+    }
+  }
+  let childRowsWithDescendantCounts = childRows.map(row => {
+    const descendants = findTreeDataRowChildren(filteredRowsWithGroups, row.path, 'path', -1, ({
+      id
+    }) => typeof id !== 'string' || !id.startsWith('auto-generated-parent-'));
+    const descendantCount = descendants.length;
+    if (descendantCount > 0) {
+      // Parent row, compute aggregation for both regular aggregation model and pivot values
+      const regularAggregation = applyAggregation(queryOptions.pivotModel.values.map(value => ({
+        [value.field]: value.aggFunc
+      })), columnsWithDefaultColDef, descendants, row.id);
+
+      // Compute aggregations for each pivot column
+      const pivotAggregations = computePivotAggregations(pivotColumnKeys, descendants, visibleValues, columnTypeMap, row.id, columnGroupIdSeparator);
+      return _extends({}, row, {
+        descendantCount
+      }, regularAggregation, pivotAggregations);
+    }
+    return _extends({}, row, {
+      descendantCount
+    });
+  });
+
+  // Apply sorting if provided
+  if (queryOptions.sortModel) {
+    const rowComparator = getRowComparator(queryOptions.sortModel, {}, pivotColumnKeys.map(key => ({
+      field: key,
+      type: 'number',
+      sortComparator: gridStringOrNumberComparator
+    })));
+    const sortedMissingGroups = [...filteredRowsWithMissingGroups].sort(rowComparator);
+    const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
+    childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];
+  }
+
+  // Apply pagination if provided
+  if (queryOptions.paginationModel && queryOptions.groupKeys?.length === 0) {
+    // Only paginate root rows, grid should refetch root rows when `paginationModel` updates
+    const {
+      pageSize,
+      page
+    } = queryOptions.paginationModel;
+    if (pageSize < childRowsWithDescendantCounts.length) {
+      childRowsWithDescendantCounts = childRowsWithDescendantCounts.slice(page * pageSize, (page + 1) * pageSize);
+    }
+  }
+
+  // Compute aggregate row if pivot values are provided
+  let aggregateRow;
+  if (visibleValues.length > 0) {
+    const regularAggregation = applyAggregation(visibleValues.map(value => ({
+      [value.field]: value.aggFunc
+    })), columnsWithDefaultColDef, filteredRowsWithGroups);
+
+    // Compute aggregations for each pivot column for the entire dataset
+    const pivotAggregations = computePivotAggregations(pivotColumnKeys, filteredRowsWithGroups.filter(row => typeof row.id !== 'string' || !row.id.startsWith('auto-generated-parent-')), visibleValues, columnTypeMap, 'root', columnGroupIdSeparator);
+    aggregateRow = _extends({}, regularAggregation, pivotAggregations);
+  }
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        rows: childRowsWithDescendantCounts,
+        rootRowCount,
+        pivotColumns,
+        aggregateRow
+      });
+    }, delay); // simulate network latency
+  });
 };

package/esm/hooks/useMockServer.d.ts

@@ -23,7 +23,7 @@ interface UseMockServerOptions {
   visibleFields?: string[];
   editable?: boolean;
   treeData?: AddPathToDemoDataOptions;
-  rowGrouping?: boolean;
+  derivedColumns?: boolean;
 }
 export declare const useMockServer: <T extends GridGetRowsResponse>(dataSetOptions?: Partial<UseMockServerOptions>, serverOptions?: ServerOptions & {
   verbose?: boolean;