@mui/x-data-grid-generator 7.20.0 → 7.22.0

package/hooks/useMockServer.d.ts

@@ -1,5 +1,5 @@
 import { GridRowModel, GridGetRowsResponse, GridColDef, GridInitialState } from '@mui/x-data-grid-pro';
-import { UseDemoDataOptions } from './useDemoData';
+import { AddPathToDemoDataOptions } from '../services/tree-data-generator';
 import type { ServerOptions } from './serverUtils';
 export declare const BASE_URL = "https://mui.com/x/api/data-grid";
 type UseMockServerResponse = {
@@ -10,7 +10,20 @@ type UseMockServerResponse = {
     fetchRows: (url: string) => Promise<GridGetRowsResponse>;
     loadNewData: () => void;
 };
-export declare const useMockServer: (dataSetOptions?: Partial<UseDemoDataOptions>, serverOptions?: ServerOptions & {
+type DataSet = 'Commodity' | 'Employee' | 'Movies';
+interface UseMockServerOptions {
+    dataSet: DataSet;
+    /**
+     * Has no effect when DataSet='Movies'
+     */
+    rowLength: number;
+    maxColumns?: number;
+    visibleFields?: string[];
+    editable?: boolean;
+    treeData?: AddPathToDemoDataOptions;
+    rowGrouping?: boolean;
+}
+export declare const useMockServer: (dataSetOptions?: Partial<UseMockServerOptions>, serverOptions?: ServerOptions & {
     verbose?: boolean;
 }, shouldRequestsFail?: boolean) => UseMockServerResponse;
 export {};

package/hooks/useMockServer.js

@@ -2,16 +2,49 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { LRUCache } from 'lru-cache';
 import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
-import { getColumnsFromOptions, extrapolateSeed, deepFreeze } from "./useDemoData.js";
+import { extrapolateSeed, deepFreeze } from "./useDemoData.js";
+import { getCommodityColumns } from "../columns/commodities.columns.js";
+import { getEmployeeColumns } from "../columns/employees.columns.js";
 import { getRealGridData } from "../services/real-data-service.js";
 import { addTreeDataOptionsToDemoData } from "../services/tree-data-generator.js";
-import { loadServerRows, processTreeDataRows, DEFAULT_DATASET_OPTIONS, DEFAULT_SERVER_OPTIONS } from "./serverUtils.js";
+import { loadServerRows, processTreeDataRows, processRowGroupingRows, DEFAULT_SERVER_OPTIONS } from "./serverUtils.js";
 import { randomInt } from "../services/index.js";
+import { getMovieRows, getMovieColumns } from "./useMovieData.js";
 const dataCache = new LRUCache({
   max: 10,
   ttl: 60 * 5 * 1e3 // 5 minutes
 });
 export const BASE_URL = 'https://mui.com/x/api/data-grid';
+const GET_DEFAULT_DATASET_OPTIONS = isRowGrouping => ({
+  dataSet: isRowGrouping ? 'Movies' : 'Commodity',
+  rowLength: isRowGrouping ? getMovieRows().length : 100,
+  maxColumns: 6
+});
+const getColumnsFromOptions = options => {
+  let columns;
+  switch (options.dataSet) {
+    case 'Commodity':
+      columns = getCommodityColumns(options.editable);
+      break;
+    case 'Employee':
+      columns = getEmployeeColumns();
+      break;
+    case 'Movies':
+      columns = getMovieColumns();
+      break;
+    default:
+      throw new Error('Unknown dataset');
+  }
+  if (options.visibleFields) {
+    columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : _extends({}, col, {
+      hide: true
+    }));
+  }
+  if (options.maxColumns) {
+    columns = columns.slice(0, options.maxColumns);
+  }
+  return columns;
+};
 function decodeParams(url) {
   const params = new URL(url).searchParams;
   const decodedParams = {};
@@ -42,6 +75,14 @@ const getInitialState = (columns, groupingField) => {
   };
 };
 const defaultColDef = getGridDefaultColumnTypes();
+function sendEmptyResponse() {
+  return new Promise(resolve => {
+    resolve({
+      rows: [],
+      rowCount: 0
+    });
+  });
+}
 export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
   const [data, setData] = React.useState();
   const [index, setIndex] = React.useState(0);
@@ -51,7 +92,9 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
       shouldRequestsFailRef.current = shouldRequestsFail;
     }
   }, [shouldRequestsFail]);
-  const options = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
+  const isRowGrouping = dataSetOptions?.rowGrouping ?? false;
+  const options = _extends({}, GET_DEFAULT_DATASET_OPTIONS(isRowGrouping), dataSetOptions);
+  const isTreeData = options.treeData?.groupingField != null;
   const columns = React.useMemo(() => {
     return getColumnsFromOptions({
       dataSet: options.dataSet,
@@ -62,7 +105,6 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
   }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
   const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
   const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column)), [columns]);
-  const isTreeData = options.treeData?.groupingField != null;
   const getGroupKey = React.useMemo(() => {
     if (isTreeData) {
       return row => row[options.treeData.groupingField];
@@ -86,6 +128,15 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
       setData(newData);
       return undefined;
     }
+    if (options.dataSet === 'Movies') {
+      const rowsData = {
+        rows: getMovieRows(),
+        columns
+      };
+      setData(rowsData);
+      dataCache.set(cacheKey, rowsData);
+      return undefined;
+    }
     let active = true;
     (async () => {
       let rowData;
@@ -117,13 +168,8 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
     };
   }, [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 (!data || !requestUrl) {
-      return new Promise(resolve => {
-        resolve({
-          rows: [],
-          rowCount: 0
-        });
-      });
+    if (!requestUrl || !data?.rows) {
+      return sendEmptyResponse();
     }
     const params = decodeParams(requestUrl);
     const verbose = serverOptions?.verbose ?? true;
@@ -151,11 +197,22 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
         setTimeout(() => reject(new Error('Could not fetch the data')), delay);
       });
     }
-    if (isTreeData /* || TODO: `isRowGrouping` */) {
+    if (isTreeData) {
+      const {
+        rows,
+        rootRowCount
+      } = await processTreeDataRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      getRowsResponse = {
+        rows: rows.slice().map(row => _extends({}, row, {
+          path: undefined
+        })),
+        rowCount: rootRowCount
+      };
+    } else if (isRowGrouping) {
       const {
         rows,
         rootRowCount
-      } = await processTreeDataRows(data.rows, params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      } = await processRowGroupingRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
       getRowsResponse = {
         rows: rows.slice().map(row => _extends({}, row, {
           path: undefined
@@ -163,12 +220,11 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
         rowCount: rootRowCount
       };
     } else {
-      // plain data
       const {
         returnedRows,
         nextCursor,
         totalRowCount
-      } = await loadServerRows(data.rows, _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
+      } = await loadServerRows(data?.rows ?? [], _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
       getRowsResponse = {
         rows: returnedRows,
         rowCount: totalRowCount,
@@ -183,10 +239,10 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
       }
       resolve(getRowsResponse);
     });
-  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef]);
+  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, isRowGrouping]);
   return {
     columns: columnsWithDefaultColDef,
-    initialState,
+    initialState: options.dataSet === 'Movies' ? {} : initialState,
     getGroupKey,
     getChildrenCount,
     fetchRows,

package/hooks/useMovieData.d.ts

@@ -1,4 +1,4 @@
-import { GridColDef } from '@mui/x-data-grid-premium';
+import { GridColDef, GridRowModel } from '@mui/x-data-grid-premium';
 export type Movie = {
     id: number;
     title: string;
@@ -13,6 +13,8 @@ export type Movie = {
     };
     cinematicUniverse?: string;
 };
+export declare const getMovieColumns: () => GridColDef[];
+export declare const getMovieRows: () => GridRowModel<Movie>[];
 export declare const useMovieData: () => {
     rows: Movie[];
     columns: GridColDef[];

package/hooks/useMovieData.js

@@ -490,6 +490,8 @@ const ROWS = [{
     name: 'Randy Newman'
   }
 }];
+export const getMovieColumns = () => COLUMNS;
+export const getMovieRows = () => ROWS;
 export const useMovieData = () => {
   return {
     rows: ROWS,

package/hooks/useQuery.js

@@ -3,7 +3,12 @@ import * as React from 'react';
 import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
 import { isDeepEqual } from '@mui/x-data-grid/internals';
 import { useDemoData, getColumnsFromOptions, getInitialState } from "./useDemoData.js";
-import { DEFAULT_DATASET_OPTIONS, DEFAULT_SERVER_OPTIONS, loadServerRows } from "./serverUtils.js";
+import { DEFAULT_SERVER_OPTIONS, loadServerRows } from "./serverUtils.js";
+const DEFAULT_DATASET_OPTIONS = {
+  dataSet: 'Commodity',
+  rowLength: 100,
+  maxColumns: 6
+};
 export const createFakeServer = (dataSetOptions, serverOptions) => {
   const dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
   const serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v7.20.0
+ * @mui/x-data-grid-generator v7.22.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/columns/employees.columns.js

@@ -128,6 +128,6 @@ export const getEmployeeColumns = () => [{
     if (!value || typeof value !== 'number') {
       return value;
     }
-    return `${value.toLocaleString()}$`;
+    return `$${value.toLocaleString()}`;
   }
 }];

package/modern/hooks/index.js

@@ -1,6 +1,6 @@
 export * from "./useDemoData.js";
 export * from "./useBasicDemoData.js";
-export * from "./useMovieData.js";
+export { useMovieData } from "./useMovieData.js";
 export * from "./useQuery.js";
 export * from "./useMockServer.js";
 export { loadServerRows } from "./serverUtils.js";

package/modern/hooks/serverUtils.js

@@ -1,11 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLogicOperator } from '@mui/x-data-grid-pro';
 import { randomInt } from "../services/random-generator.js";
-export const DEFAULT_DATASET_OPTIONS = {
-  dataSet: 'Commodity',
-  rowLength: 100,
-  maxColumns: 6
-};
 export const disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
 export const DEFAULT_SERVER_OPTIONS = {
   minDelay: disableDelay ? 0 : 100,
@@ -213,8 +208,7 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
     }, delay); // simulate network latency
   });
 };
-const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1 // the depth of the children to find relative to parentDepth, `-1` to find all
-) => {
+const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1, rowQualifier) => {
   const parentDepth = parentPath.length;
   const children = [];
   for (let i = 0; i < allRows.length; i += 1) {
@@ -224,7 +218,9 @@ const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth =
       continue;
     }
     if ((depth < 0 && rowPath.length > parentDepth || rowPath.length === parentDepth + depth) && parentPath.every((value, index) => value === rowPath[index])) {
-      children.push(row);
+      if (!rowQualifier || rowQualifier(row)) {
+        children.push(row);
+      }
     }
   }
   return children;
@@ -287,7 +283,7 @@ const getTreeDataFilteredRows = (rows, filterModel, columnsWithDefaultColDef) =>
 };
 
 /**
- * Simulates server data loading
+ * Simulates server data for tree-data feature
  */
 export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
   const {
@@ -342,4 +338,117 @@ export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWi
       });
     }, delay); // simulate network latency
   });
+};
+
+/**
+ * Simulates server data for row grouping feature
+ */
+export const processRowGroupingRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
+  const {
+    minDelay = 100,
+    maxDelay = 300
+  } = serverOptions;
+  const pathKey = 'path';
+  if (maxDelay < minDelay) {
+    throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
+  }
+  if (queryOptions.groupKeys == null) {
+    throw new Error('serverOptions.groupKeys must be defined to compute row grouping data');
+  }
+  if (queryOptions.groupFields == null) {
+    throw new Error('serverOptions.groupFields must be defined to compute row grouping data');
+  }
+  const delay = randomInt(minDelay, maxDelay);
+  const pathsToAutogenerate = new Set();
+  let rowsWithPaths = rows;
+  const rowsWithMissingGroups = [];
+
+  // add paths and generate parent rows based on `groupFields`
+  const groupFields = queryOptions.groupFields;
+  if (groupFields.length > 0) {
+    rowsWithPaths = rows.reduce((acc, row) => {
+      const partialPath = groupFields.map(field => 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 strigifiedPath = parentPath.join(',');
+        if (!pathsToAutogenerate.has(strigifiedPath)) {
+          pathsToAutogenerate.add(strigifiedPath);
+        }
+      }
+      acc.push(_extends({}, row, {
+        path: [...partialPath, '']
+      }));
+      return acc;
+    }, []);
+  } else {
+    rowsWithPaths = rows.map(row => _extends({}, row, {
+      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]
+    };
+  });
+
+  // apply plain filtering
+  const filteredRows = getTreeDataFilteredRows([...autogeneratedRows, ...rowsWithPaths, ...rowsWithMissingGroups], queryOptions.filterModel, columnsWithDefaultColDef);
+
+  // get root row count
+  const rootRows = findTreeDataRowChildren(filteredRows, []);
+  const rootRowCount = rootRows.length;
+  let filteredRowsWithMissingGroups = [];
+  let childRows = rootRows;
+  if (queryOptions.groupKeys.length === 0) {
+    filteredRowsWithMissingGroups = filteredRows.filter(({
+      group
+    }) => group === false);
+  } else {
+    childRows = findTreeDataRowChildren(filteredRows, queryOptions.groupKeys);
+  }
+  let childRowsWithDescendantCounts = childRows.map(row => {
+    const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1, ({
+      id
+    }) => typeof id !== 'string' || !id.startsWith('auto-generated-parent-'));
+    const descendantCount = descendants.length;
+    return _extends({}, row, {
+      descendantCount
+    });
+  });
+  if (queryOptions.sortModel) {
+    const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+    const sortedMissingGroups = [...filteredRowsWithMissingGroups].sort(rowComparator);
+    const sortedChildRows = [...childRowsWithDescendantCounts].sort(rowComparator);
+    childRowsWithDescendantCounts = [...sortedMissingGroups, ...sortedChildRows];
+  }
+  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);
+    }
+  }
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        rows: childRowsWithDescendantCounts,
+        rootRowCount
+      });
+    }, delay); // simulate network latency
+  });
 };

package/modern/hooks/useMockServer.js

@@ -2,16 +2,49 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { LRUCache } from 'lru-cache';
 import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
-import { getColumnsFromOptions, extrapolateSeed, deepFreeze } from "./useDemoData.js";
+import { extrapolateSeed, deepFreeze } from "./useDemoData.js";
+import { getCommodityColumns } from "../columns/commodities.columns.js";
+import { getEmployeeColumns } from "../columns/employees.columns.js";
 import { getRealGridData } from "../services/real-data-service.js";
 import { addTreeDataOptionsToDemoData } from "../services/tree-data-generator.js";
-import { loadServerRows, processTreeDataRows, DEFAULT_DATASET_OPTIONS, DEFAULT_SERVER_OPTIONS } from "./serverUtils.js";
+import { loadServerRows, processTreeDataRows, processRowGroupingRows, DEFAULT_SERVER_OPTIONS } from "./serverUtils.js";
 import { randomInt } from "../services/index.js";
+import { getMovieRows, getMovieColumns } from "./useMovieData.js";
 const dataCache = new LRUCache({
   max: 10,
   ttl: 60 * 5 * 1e3 // 5 minutes
 });
 export const BASE_URL = 'https://mui.com/x/api/data-grid';
+const GET_DEFAULT_DATASET_OPTIONS = isRowGrouping => ({
+  dataSet: isRowGrouping ? 'Movies' : 'Commodity',
+  rowLength: isRowGrouping ? getMovieRows().length : 100,
+  maxColumns: 6
+});
+const getColumnsFromOptions = options => {
+  let columns;
+  switch (options.dataSet) {
+    case 'Commodity':
+      columns = getCommodityColumns(options.editable);
+      break;
+    case 'Employee':
+      columns = getEmployeeColumns();
+      break;
+    case 'Movies':
+      columns = getMovieColumns();
+      break;
+    default:
+      throw new Error('Unknown dataset');
+  }
+  if (options.visibleFields) {
+    columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : _extends({}, col, {
+      hide: true
+    }));
+  }
+  if (options.maxColumns) {
+    columns = columns.slice(0, options.maxColumns);
+  }
+  return columns;
+};
 function decodeParams(url) {
   const params = new URL(url).searchParams;
   const decodedParams = {};
@@ -42,6 +75,14 @@ const getInitialState = (columns, groupingField) => {
   };
 };
 const defaultColDef = getGridDefaultColumnTypes();
+function sendEmptyResponse() {
+  return new Promise(resolve => {
+    resolve({
+      rows: [],
+      rowCount: 0
+    });
+  });
+}
 export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
   const [data, setData] = React.useState();
   const [index, setIndex] = React.useState(0);
@@ -51,7 +92,9 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
       shouldRequestsFailRef.current = shouldRequestsFail;
     }
   }, [shouldRequestsFail]);
-  const options = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
+  const isRowGrouping = dataSetOptions?.rowGrouping ?? false;
+  const options = _extends({}, GET_DEFAULT_DATASET_OPTIONS(isRowGrouping), dataSetOptions);
+  const isTreeData = options.treeData?.groupingField != null;
   const columns = React.useMemo(() => {
     return getColumnsFromOptions({
       dataSet: options.dataSet,
@@ -62,7 +105,6 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
   }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
   const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
   const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column)), [columns]);
-  const isTreeData = options.treeData?.groupingField != null;
   const getGroupKey = React.useMemo(() => {
     if (isTreeData) {
       return row => row[options.treeData.groupingField];
@@ -86,6 +128,15 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
       setData(newData);
       return undefined;
     }
+    if (options.dataSet === 'Movies') {
+      const rowsData = {
+        rows: getMovieRows(),
+        columns
+      };
+      setData(rowsData);
+      dataCache.set(cacheKey, rowsData);
+      return undefined;
+    }
     let active = true;
     (async () => {
       let rowData;
@@ -117,13 +168,8 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
     };
   }, [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 (!data || !requestUrl) {
-      return new Promise(resolve => {
-        resolve({
-          rows: [],
-          rowCount: 0
-        });
-      });
+    if (!requestUrl || !data?.rows) {
+      return sendEmptyResponse();
     }
     const params = decodeParams(requestUrl);
     const verbose = serverOptions?.verbose ?? true;
@@ -151,11 +197,22 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
         setTimeout(() => reject(new Error('Could not fetch the data')), delay);
       });
     }
-    if (isTreeData /* || TODO: `isRowGrouping` */) {
+    if (isTreeData) {
+      const {
+        rows,
+        rootRowCount
+      } = await processTreeDataRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      getRowsResponse = {
+        rows: rows.slice().map(row => _extends({}, row, {
+          path: undefined
+        })),
+        rowCount: rootRowCount
+      };
+    } else if (isRowGrouping) {
       const {
         rows,
         rootRowCount
-      } = await processTreeDataRows(data.rows, params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      } = await processRowGroupingRows(data?.rows ?? [], params, serverOptionsWithDefault, columnsWithDefaultColDef);
       getRowsResponse = {
         rows: rows.slice().map(row => _extends({}, row, {
           path: undefined
@@ -163,12 +220,11 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
         rowCount: rootRowCount
       };
     } else {
-      // plain data
       const {
         returnedRows,
         nextCursor,
         totalRowCount
-      } = await loadServerRows(data.rows, _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
+      } = await loadServerRows(data?.rows ?? [], _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
       getRowsResponse = {
         rows: returnedRows,
         rowCount: totalRowCount,
@@ -183,10 +239,10 @@ export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail)
       }
       resolve(getRowsResponse);
     });
-  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef]);
+  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, isRowGrouping]);
   return {
     columns: columnsWithDefaultColDef,
-    initialState,
+    initialState: options.dataSet === 'Movies' ? {} : initialState,
     getGroupKey,
     getChildrenCount,
     fetchRows,

package/modern/hooks/useMovieData.js

@@ -490,6 +490,8 @@ const ROWS = [{
     name: 'Randy Newman'
   }
 }];
+export const getMovieColumns = () => COLUMNS;
+export const getMovieRows = () => ROWS;
 export const useMovieData = () => {
   return {
     rows: ROWS,

package/modern/hooks/useQuery.js

@@ -3,7 +3,12 @@ import * as React from 'react';
 import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
 import { isDeepEqual } from '@mui/x-data-grid/internals';
 import { useDemoData, getColumnsFromOptions, getInitialState } from "./useDemoData.js";
-import { DEFAULT_DATASET_OPTIONS, DEFAULT_SERVER_OPTIONS, loadServerRows } from "./serverUtils.js";
+import { DEFAULT_SERVER_OPTIONS, loadServerRows } from "./serverUtils.js";
+const DEFAULT_DATASET_OPTIONS = {
+  dataSet: 'Commodity',
+  rowLength: 100,
+  maxColumns: 6
+};
 export const createFakeServer = (dataSetOptions, serverOptions) => {
   const dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
   const serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v7.20.0
+ * @mui/x-data-grid-generator v7.22.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/columns/employees.columns.js

@@ -134,7 +134,7 @@ const getEmployeeColumns = () => [{
     if (!value || typeof value !== 'number') {
       return value;
     }
-    return `${value.toLocaleString()}$`;
+    return `$${value.toLocaleString()}`;
   }
 }];
 exports.getEmployeeColumns = getEmployeeColumns;

package/node/hooks/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  useMovieData: true,
   loadServerRows: true
 };
 Object.defineProperty(exports, "loadServerRows", {
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "loadServerRows", {
     return _serverUtils.loadServerRows;
   }
 });
+Object.defineProperty(exports, "useMovieData", {
+  enumerable: true,
+  get: function () {
+    return _useMovieData.useMovieData;
+  }
+});
 var _useDemoData = require("./useDemoData");
 Object.keys(_useDemoData).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -37,17 +44,6 @@ Object.keys(_useBasicDemoData).forEach(function (key) {
   });
 });
 var _useMovieData = require("./useMovieData");
-Object.keys(_useMovieData).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useMovieData[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useMovieData[key];
-    }
-  });
-});
 var _useQuery = require("./useQuery");
 Object.keys(_useQuery).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;