@mui/x-data-grid-generator 8.0.0-beta.3 → 8.1.0

package/columns/commodities.columns.js

@@ -175,7 +175,7 @@ const getCommodityColumns = (editable = false) => [{
     return value;
   },
   valueFormatter: value => value?.label,
-  groupingValueGetter: value => value.code,
+  groupingValueGetter: value => value?.label,
   sortComparator: (v1, v2, param1, param2) => (0, _xDataGridPremium.gridStringOrNumberComparator)(v1.label, v2.label, param1, param2),
   editable,
   width: 120

package/columns/employees.columns.js

@@ -89,6 +89,7 @@ const getEmployeeColumns = () => [{
   generateData: _services.randomCountry,
   renderCell: _renderer.renderCountry,
   renderEditCell: _renderer.renderEditCountry,
+  groupingValueGetter: value => value?.label,
   sortComparator: (v1, v2, param1, param2) => (0, _xDataGridPremium.gridStringOrNumberComparator)(v1.label, v2.label, param1, param2),
   width: 150,
   editable: true

package/constants/prompts.d.ts

@@ -1,2 +1,2 @@
-import { unstable_PromptResponse as PromptResponse } from '@mui/x-data-grid-premium';
+import { PromptResponse } from '@mui/x-data-grid-premium';
 export declare const mockPrompts: Map<string, PromptResponse>;

package/constants/prompts.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockPrompts = void 0;
 const mockPrompts = exports.mockPrompts = new Map([['sort by name', {
+  conversationId: 'mock',
   select: -1,
   filters: [],
   aggregation: {},
@@ -13,8 +14,9 @@ const mockPrompts = exports.mockPrompts = new Map([['sort by name', {
     direction: 'asc'
   }],
   grouping: [],
-  error: null
+  pivoting: {}
 }], ['sort by company name and employee name', {
+  conversationId: 'mock',
   select: -1,
   filters: [],
   aggregation: {},
@@ -26,8 +28,9 @@ const mockPrompts = exports.mockPrompts = new Map([['sort by name', {
     direction: 'asc'
   }],
   grouping: [],
-  error: null
+  pivoting: {}
 }], ['show people from the eu', {
+  conversationId: 'mock',
   select: -1,
   filters: [{
     column: 'country',
@@ -37,8 +40,9 @@ const mockPrompts = exports.mockPrompts = new Map([['sort by name', {
   aggregation: {},
   sorting: [],
   grouping: [],
-  error: null
+  pivoting: {}
 }], ['order companies by amount of people', {
+  conversationId: 'mock',
   select: -1,
   filters: [],
   aggregation: {
@@ -51,5 +55,5 @@ const mockPrompts = exports.mockPrompts = new Map([['sort by name', {
   grouping: [{
     column: 'company'
   }],
-  error: null
+  pivoting: {}
 }]]);

package/esm/columns/commodities.columns.js

@@ -169,7 +169,7 @@ export const getCommodityColumns = (editable = false) => [{
     return value;
   },
   valueFormatter: value => value?.label,
-  groupingValueGetter: value => value.code,
+  groupingValueGetter: value => value?.label,
   sortComparator: (v1, v2, param1, param2) => gridStringOrNumberComparator(v1.label, v2.label, param1, param2),
   editable,
   width: 120

package/esm/columns/employees.columns.js

@@ -83,6 +83,7 @@ export const getEmployeeColumns = () => [{
   generateData: randomCountry,
   renderCell: renderCountry,
   renderEditCell: renderEditCountry,
+  groupingValueGetter: value => value?.label,
   sortComparator: (v1, v2, param1, param2) => gridStringOrNumberComparator(v1.label, v2.label, param1, param2),
   width: 150,
   editable: true

package/esm/constants/prompts.d.ts

@@ -1,2 +1,2 @@
-import { unstable_PromptResponse as PromptResponse } from '@mui/x-data-grid-premium';
+import { PromptResponse } from '@mui/x-data-grid-premium';
 export declare const mockPrompts: Map<string, PromptResponse>;

package/esm/constants/prompts.js

@@ -1,4 +1,5 @@
 export const mockPrompts = new Map([['sort by name', {
+  conversationId: 'mock',
   select: -1,
   filters: [],
   aggregation: {},
@@ -7,8 +8,9 @@ export const mockPrompts = new Map([['sort by name', {
     direction: 'asc'
   }],
   grouping: [],
-  error: null
+  pivoting: {}
 }], ['sort by company name and employee name', {
+  conversationId: 'mock',
   select: -1,
   filters: [],
   aggregation: {},
@@ -20,8 +22,9 @@ export const mockPrompts = new Map([['sort by name', {
     direction: 'asc'
   }],
   grouping: [],
-  error: null
+  pivoting: {}
 }], ['show people from the eu', {
+  conversationId: 'mock',
   select: -1,
   filters: [{
     column: 'country',
@@ -31,8 +34,9 @@ export const mockPrompts = new Map([['sort by name', {
   aggregation: {},
   sorting: [],
   grouping: [],
-  error: null
+  pivoting: {}
 }], ['order companies by amount of people', {
+  conversationId: 'mock',
   select: -1,
   filters: [],
   aggregation: {
@@ -45,5 +49,5 @@ export const mockPrompts = new Map([['sort by name', {
   grouping: [{
     column: 'company'
   }],
-  error: null
+  pivoting: {}
 }]]);

package/esm/hooks/serverUtils.js

@@ -21,16 +21,16 @@ const apiRef = {};
 const simplifiedValueGetter = (field, colDef) => row => {
   return colDef.valueGetter?.(row[row.id], row, colDef, apiRef) || row[field];
 };
-const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
+const getRowComparator = (sortModel, aggregationModel, columnsWithDefaultColDef) => {
   if (!sortModel) {
     const comparator = () => 0;
     return comparator;
   }
   const sortOperators = sortModel.map(sortItem => {
-    const columnField = sortItem.field;
+    const columnField = aggregationModel?.[sortItem.field] ? `${sortItem.field}Aggregate` : sortItem.field;
     const colDef = columnsWithDefaultColDef.find(({
       field
-    }) => field === columnField);
+    }) => field === sortItem.field);
     return _extends({}, sortItem, {
       valueGetter: simplifiedValueGetter(columnField, colDef),
       sortComparator: colDef.sortComparator
@@ -220,7 +220,7 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
   let firstRowIndex;
   let lastRowIndex;
   let filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
-  const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+  const rowComparator = getRowComparator(queryOptions.sortModel, queryOptions.aggregationModel, columnsWithDefaultColDef);
   filteredRows = [...filteredRows].sort(rowComparator);
   let aggregateRow = {};
   if (queryOptions.aggregationModel) {
@@ -374,7 +374,7 @@ export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWi
   });
   if (queryOptions.sortModel) {
     // apply sorting
-    const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+    const rowComparator = getRowComparator(queryOptions.sortModel, queryOptions.aggregationModel, columnsWithDefaultColDef);
     childRowsWithDescendantCounts = [...childRowsWithDescendantCounts].sort(rowComparator);
   }
   let aggregateRow;
@@ -429,7 +429,15 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
   const groupFields = queryOptions.groupFields;
   if (groupFields.length > 0) {
     rowsWithPaths = rows.reduce((acc, row) => {
-      const partialPath = groupFields.map(field => String(row[field]));
+      const partialPath = groupFields.map(field => {
+        const colDef = columnsWithDefaultColDef.find(({
+          field: f
+        }) => f === field);
+        if (colDef?.groupingValueGetter) {
+          return colDef.groupingValueGetter(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) {
@@ -496,7 +504,7 @@ export const processRowGroupingRows = (rows, queryOptions, serverOptions, column
     });
   });
   if (queryOptions.sortModel) {
-    const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+    const rowComparator = getRowComparator(queryOptions.sortModel, queryOptions.aggregationModel, columnsWithDefaultColDef);
     const sortedMissingGroups = [...filteredRowsWithMissingGroups].sort(rowComparator);
     const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
     childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];

package/esm/hooks/useDemoData.js

@@ -61,8 +61,8 @@ export const deepFreeze = object => {
 export const getColumnsFromOptions = options => {
   let columns = options.dataSet === 'Commodity' ? getCommodityColumns(options.editable) : getEmployeeColumns();
   if (options.visibleFields) {
-    columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : _extends({}, col, {
-      hide: true
+    columns = columns.map(col => _extends({}, col, {
+      hide: !options.visibleFields?.includes(col.field)
     }));
   }
   if (options.maxColumns) {

package/esm/hooks/useMockServer.d.ts

@@ -1,5 +1,4 @@
-import type { GridGetRowsResponse } from '@mui/x-data-grid';
-import { type GridRowModel, type GridColDef, type GridInitialState } from '@mui/x-data-grid-premium';
+import { type GridGetRowsResponse, type GridRowId, type GridRowModel, type GridColDef, type GridInitialState } from '@mui/x-data-grid-premium';
 import { AddPathToDemoDataOptions } from "../services/tree-data-generator.js";
 import type { ServerOptions } from './serverUtils';
 export declare const BASE_URL = "https://mui.com/x/api/data-grid";
@@ -9,6 +8,7 @@ type UseMockServerResponse<T> = {
   getGroupKey?: (row: GridRowModel) => string;
   getChildrenCount?: (row: GridRowModel) => number;
   fetchRows: (url: string) => Promise<T>;
+  editRow: (rowId: GridRowId, updatedRow: GridRowModel) => Promise<GridRowModel>;
   loadNewData: () => void;
   isReady: boolean;
 };

package/esm/hooks/useMockServer.js

@@ -38,8 +38,8 @@ const getColumnsFromOptions = options => {
       throw new Error('Unknown dataset');
   }
   if (options.visibleFields) {
-    columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : _extends({}, col, {
-      hide: true
+    columns = columns.map(col => _extends({}, col, {
+      hide: !options.visibleFields?.includes(col.field)
     }));
   }
   if (options.maxColumns) {
@@ -86,7 +86,8 @@ function sendEmptyResponse() {
   });
 }
 export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
-  const [data, setData] = React.useState();
+  const dataRef = React.useRef(null);
+  const [isDataReady, setDataReady] = React.useState(false);
   const [index, setIndex] = React.useState(0);
   const shouldRequestsFailRef = React.useRef(shouldRequestsFail ?? false);
   React.useEffect(() => {
@@ -127,7 +128,8 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
     // of the demos.
     if (dataCache.has(cacheKey)) {
       const newData = dataCache.get(cacheKey);
-      setData(newData);
+      dataRef.current = newData;
+      setDataReady(true);
       return undefined;
     }
     if (options.dataSet === 'Movies') {
@@ -135,7 +137,8 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
         rows: getMovieRows(),
         columns
       };
-      setData(rowsData);
+      dataRef.current = rowsData;
+      setDataReady(true);
       dataCache.set(cacheKey, rowsData);
       return undefined;
     }
@@ -163,14 +166,15 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
         deepFreeze(rowData);
       }
       dataCache.set(cacheKey, rowData);
-      setData(rowData);
+      dataRef.current = rowData;
+      setDataReady(true);
     })();
     return () => {
       active = false;
     };
   }, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, index]);
   const fetchRows = React.useCallback(async requestUrl => {
-    if (!requestUrl || !data?.rows) {
+    if (!requestUrl || !isDataReady) {
       return sendEmptyResponse();
     }
     const params = decodeParams(requestUrl);
@@ -204,7 +208,7 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
         rows,
         rootRowCount,
         aggregateRow
-      } = await processTreeDataRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      } = await processTreeDataRows(dataRef.current?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
       getRowsResponse = _extends({
         rows: rows.slice().map(row => _extends({}, row, {
           path: undefined
@@ -218,7 +222,7 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
         rows,
         rootRowCount,
         aggregateRow
-      } = await processRowGroupingRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      } = await processRowGroupingRows(dataRef.current?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
       getRowsResponse = _extends({
         rows: rows.slice().map(row => _extends({}, row, {
           path: undefined
@@ -233,7 +237,7 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
         nextCursor,
         totalRowCount,
         aggregateRow
-      } = await loadServerRows(data?.rows ?? [], _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
+      } = await loadServerRows(dataRef.current?.rows ?? [], _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
       getRowsResponse = _extends({
         rows: returnedRows,
         rowCount: totalRowCount,
@@ -250,16 +254,64 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
       }
       resolve(getRowsResponse);
     });
-  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, isRowGrouping]);
+  }, [dataRef, isDataReady, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, isRowGrouping]);
+  const editRow = React.useCallback(async (rowId, updatedRow) => {
+    return new Promise((resolve, reject) => {
+      const minDelay = serverOptions?.minDelay ?? DEFAULT_SERVER_OPTIONS.minDelay;
+      const maxDelay = serverOptions?.maxDelay ?? DEFAULT_SERVER_OPTIONS.maxDelay;
+      const delay = randomInt(minDelay, maxDelay);
+      const verbose = serverOptions?.verbose ?? true;
+      // eslint-disable-next-line no-console
+      const print = console.info;
+      if (verbose) {
+        print('MUI X: DATASOURCE EDIT ROW REQUEST', {
+          rowId,
+          updatedRow
+        });
+      }
+      if (shouldRequestsFailRef.current) {
+        setTimeout(() => reject(new Error(`Could not update the row with the id ${rowId}`)), delay);
+        if (verbose) {
+          print('MUI X: DATASOURCE EDIT ROW FAILURE', {
+            rowId,
+            updatedRow
+          });
+        }
+        return;
+      }
+      const newRows = [...(dataRef.current?.rows || [])];
+      const rowIndex = newRows.findIndex(row => row.id === rowId) ?? -1;
+      if (rowIndex === -1) {
+        return;
+      }
+      newRows[rowIndex] = updatedRow;
+      const newData = _extends({}, dataRef.current, {
+        rows: newRows
+      });
+      const cacheKey = `${options.dataSet}-${options.rowLength}-${index}-${options.maxColumns}`;
+      dataCache.set(cacheKey, newData);
+      setTimeout(() => {
+        if (verbose) {
+          print('MUI X: DATASOURCE EDIT ROW SUCCESS', {
+            rowId,
+            updatedRow
+          });
+        }
+        resolve(updatedRow);
+      }, delay);
+      dataRef.current = newData;
+    });
+  }, [index, options.dataSet, options.maxColumns, options.rowLength, serverOptions?.maxDelay, serverOptions?.minDelay, serverOptions?.verbose]);
   return {
     columns: columnsWithDefaultColDef,
     initialState: options.dataSet === 'Movies' ? {} : initialState,
     getGroupKey,
     getChildrenCount,
     fetchRows,
+    editRow,
     loadNewData: () => {
       setIndex(oldIndex => oldIndex + 1);
     },
-    isReady: Boolean(data?.rows?.length)
+    isReady: isDataReady
   };
 };

package/esm/hooks/useQuery.d.ts

@@ -44,12 +44,13 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
     disableReorder?: boolean;
     disableExport?: boolean;
     colSpan?: number | import("@mui/x-data-grid").GridColSpanFn<any, any, any> | undefined;
-    unstable_examples?: any[] | undefined;
+    examples?: any[] | undefined;
     renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
     aggregable?: boolean;
     availableAggregationFunctions?: string[];
     groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
     pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
+    pivotable?: boolean;
     generateData?: (row: any, context: import("..").GridDataGeneratorContext) => any;
     dataGeneratorUniquenessEnabled?: boolean;
     hide?: boolean;
@@ -94,12 +95,13 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
     disableReorder?: boolean;
     disableExport?: boolean;
     colSpan?: number | import("@mui/x-data-grid").GridColSpanFn<any, any, any> | undefined;
-    unstable_examples?: any[] | undefined;
+    examples?: any[] | undefined;
     renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
     aggregable?: boolean;
     availableAggregationFunctions?: string[];
     groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
     pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
+    pivotable?: boolean;
     generateData?: (row: any, context: import("..").GridDataGeneratorContext) => any;
     dataGeneratorUniquenessEnabled?: boolean;
     hide?: boolean;
@@ -146,12 +148,13 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
     disableReorder?: boolean;
     disableExport?: boolean;
     colSpan?: number | import("@mui/x-data-grid").GridColSpanFn<any, any, any> | undefined;
-    unstable_examples?: any[] | undefined;
+    examples?: any[] | undefined;
     renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
     aggregable?: boolean;
     availableAggregationFunctions?: string[];
     groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
     pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
+    pivotable?: boolean;
     generateData?: (row: any, context: import("..").GridDataGeneratorContext) => any;
     dataGeneratorUniquenessEnabled?: boolean;
     hide?: boolean;

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v8.0.0-beta.3
+ * @mui/x-data-grid-generator v8.1.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/esm/renderer/renderCountry.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid-premium';
 import { CountryIsoOption } from "../services/static-data.js";
-export declare function renderCountry(params: GridRenderCellParams<CountryIsoOption, any, any>): "" | React.JSX.Element | null;
+export declare function renderCountry(params: GridRenderCellParams<CountryIsoOption, any, any>): any;

package/esm/renderer/renderCountry.js

@@ -51,6 +51,9 @@ export function renderCountry(params) {
   if (params.aggregation && !params.aggregation.hasCellUnit) {
     return null;
   }
+  if (params.rowNode.type === 'group') {
+    return params.value;
+  }
   return /*#__PURE__*/_jsx(Country, {
     value: params.value
   });

package/esm/services/prompt-resolver.d.ts

@@ -1,2 +1,2 @@
-import { unstable_PromptResponse as PromptResponse } from '@mui/x-data-grid-premium';
-export declare const mockPromptResolver: (_: string, query: string) => Promise<PromptResponse>;
+import { PromptResponse } from '@mui/x-data-grid-premium';
+export declare const mockPromptResolver: (query: string, _: string) => Promise<PromptResponse>;

package/esm/services/prompt-resolver.js

@@ -1,12 +1,13 @@
 import { mockPrompts } from "../constants/prompts.js";
-export const mockPromptResolver = (_, query) => {
+export const mockPromptResolver = (query, _) => {
   const resolved = mockPrompts.get(query.toLowerCase().trim());
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       if (resolved) {
         resolve(resolved);
       } else {
-        reject(new Error('Unknown query'));
+        console.error(`Unsupported query: ${query}`);
+        reject(new Error('Could not process prompt'));
       }
     }, 1000);
   });

package/hooks/serverUtils.js

@@ -28,16 +28,16 @@ const apiRef = {};
 const simplifiedValueGetter = (field, colDef) => row => {
   return colDef.valueGetter?.(row[row.id], row, colDef, apiRef) || row[field];
 };
-const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
+const getRowComparator = (sortModel, aggregationModel, columnsWithDefaultColDef) => {
   if (!sortModel) {
     const comparator = () => 0;
     return comparator;
   }
   const sortOperators = sortModel.map(sortItem => {
-    const columnField = sortItem.field;
+    const columnField = aggregationModel?.[sortItem.field] ? `${sortItem.field}Aggregate` : sortItem.field;
     const colDef = columnsWithDefaultColDef.find(({
       field
-    }) => field === columnField);
+    }) => field === sortItem.field);
     return (0, _extends2.default)({}, sortItem, {
       valueGetter: simplifiedValueGetter(columnField, colDef),
       sortComparator: colDef.sortComparator
@@ -227,7 +227,7 @@ const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultCol
   let firstRowIndex;
   let lastRowIndex;
   let filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
-  const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+  const rowComparator = getRowComparator(queryOptions.sortModel, queryOptions.aggregationModel, columnsWithDefaultColDef);
   filteredRows = [...filteredRows].sort(rowComparator);
   let aggregateRow = {};
   if (queryOptions.aggregationModel) {
@@ -382,7 +382,7 @@ const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefau
   });
   if (queryOptions.sortModel) {
     // apply sorting
-    const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+    const rowComparator = getRowComparator(queryOptions.sortModel, queryOptions.aggregationModel, columnsWithDefaultColDef);
     childRowsWithDescendantCounts = [...childRowsWithDescendantCounts].sort(rowComparator);
   }
   let aggregateRow;
@@ -438,7 +438,15 @@ const processRowGroupingRows = (rows, queryOptions, serverOptions, columnsWithDe
   const groupFields = queryOptions.groupFields;
   if (groupFields.length > 0) {
     rowsWithPaths = rows.reduce((acc, row) => {
-      const partialPath = groupFields.map(field => String(row[field]));
+      const partialPath = groupFields.map(field => {
+        const colDef = columnsWithDefaultColDef.find(({
+          field: f
+        }) => f === field);
+        if (colDef?.groupingValueGetter) {
+          return colDef.groupingValueGetter(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) {
@@ -505,7 +513,7 @@ const processRowGroupingRows = (rows, queryOptions, serverOptions, columnsWithDe
     });
   });
   if (queryOptions.sortModel) {
-    const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+    const rowComparator = getRowComparator(queryOptions.sortModel, queryOptions.aggregationModel, columnsWithDefaultColDef);
     const sortedMissingGroups = [...filteredRowsWithMissingGroups].sort(rowComparator);
     const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
     childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];

package/hooks/useDemoData.js

@@ -71,8 +71,8 @@ exports.deepFreeze = deepFreeze;
 const getColumnsFromOptions = options => {
   let columns = options.dataSet === 'Commodity' ? (0, _commodities.getCommodityColumns)(options.editable) : (0, _employees.getEmployeeColumns)();
   if (options.visibleFields) {
-    columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : (0, _extends2.default)({}, col, {
-      hide: true
+    columns = columns.map(col => (0, _extends2.default)({}, col, {
+      hide: !options.visibleFields?.includes(col.field)
     }));
   }
   if (options.maxColumns) {

package/hooks/useMockServer.d.ts

@@ -1,5 +1,4 @@
-import type { GridGetRowsResponse } from '@mui/x-data-grid';
-import { type GridRowModel, type GridColDef, type GridInitialState } from '@mui/x-data-grid-premium';
+import { type GridGetRowsResponse, type GridRowId, type GridRowModel, type GridColDef, type GridInitialState } from '@mui/x-data-grid-premium';
 import { AddPathToDemoDataOptions } from "../services/tree-data-generator.js";
 import type { ServerOptions } from './serverUtils';
 export declare const BASE_URL = "https://mui.com/x/api/data-grid";
@@ -9,6 +8,7 @@ type UseMockServerResponse<T> = {
   getGroupKey?: (row: GridRowModel) => string;
   getChildrenCount?: (row: GridRowModel) => number;
   fetchRows: (url: string) => Promise<T>;
+  editRow: (rowId: GridRowId, updatedRow: GridRowModel) => Promise<GridRowModel>;
   loadNewData: () => void;
   isReady: boolean;
 };