@mui/x-data-grid-generator 7.21.0 → 7.22.1

package/CHANGELOG.md

@@ -3,6 +3,148 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.22.1
+
+_Nov 1, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Polish (pl-PL) locale on the Date Pickers
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@wojtkolos, @dpak-maurya, @k-rajat19.
+Following are all team members who have contributed to this release:
+@LukasTy, @arminmeh, @MBilalShafi, @KenanYusuf, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.1`
+
+- [DataGrid] Fix right column group header border (#15152) @KenanYusuf
+- [DataGrid] Fix scroll jump when holding down arrow keys (#15167) @arminmeh
+- [DataGrid] Move `rowGroupingModelChange` handler to respective hook (#15127) @MBilalShafi
+- [DataGrid] Prevent error when deleting the last row (#15153) @dpak-maurya
+- [DataGrid] Fix overlay height in autoHeight mode (#15205) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.22.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@7.22.1`, plus:
+
+- [DataGridPro] Add list view tests (#15166) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@7.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+- [DataGridPremium] Keep focus on the grouping cell on space bar press #15155 @k-rajat19
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.1`
+
+- [l10n] Improve Polish (pl-PL) locale (#15177) @wojtkolos
+
+#### `@mui/x-date-pickers-pro@7.22.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-date-pickers@7.22.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.1`
+
+- [TreeView] Export `TreeItem2DragAndDropOverlay` and `TreeItem2LabelInput` from the root of each package (#15208) @flaviendelangle
+- [TreeView] Fix drag and drop color usage (#15149) @LukasTy
+
+#### `@mui/x-tree-view-pro@7.22.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@7.22.1`.
+
+### Docs
+
+- [docs] Add section explaining how to keep the selection while filtering in Data grid docs (#15199) @arminmeh
+
+## 7.22.0
+
+_Oct 25, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce [server-side support for Data Grid row grouping](https://mui.com/x/react-data-grid/server-side-data/row-grouping/)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Portuguese (pt-BR) locale on the Data Grid component
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@clins1994, @GITPHLAP, @k-rajat19, @kalyan90, @merotosc, @yash49.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.0`
+
+- [DataGrid] Fix `GridPanelAnchor` positioning (#15022) @k-rajat19
+- [DataGrid] Fix ugly prop-types for the `pageStyle` prop of the `GridPrintExportMenuItem` component (#15015) @flaviendelangle
+- [DataGrid] Fix value type in filter model for number and boolean column type (#14733) @k-rajat19
+- [DataGrid] Focus next row when the focused row is deleted (#15067) @cherniavskii
+- [DataGrid] Remove some usages of `<Box />` and `<Badge />` (#15013) @romgrk
+- [DataGrid] Fix number of rows to display for page size options with negative value (#14890) @kalyan90
+- [l10n] Improve Portuguese (pt-BR) locale (#15021) @k-rajat19
+
+#### `@mui/x-data-grid-pro@7.22.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@7.22.0`, plus:
+
+- [DataGridPro] Fix column pinning layout (#15073) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.22.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@7.22.0`, plus:
+
+- [DataGridPremium] Server-side data source with row grouping (#15109) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.0`
+
+- [pickers] Fix `DateCalendar` timezone management (#15119) @LukasTy
+- [pickers] Fix `DigitalClock` time options on a `DST` switch day (#15092) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.22.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@7.22.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.22.0`
+
+- [charts] Export data type in `onAxisClick(_, data)` callback (#15038) @clins1994
+
+#### `@mui/x-charts-pro@7.0.0-beta.6` [![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@7.22.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.0`
+
+- [TreeView] Make the cancellable event types public (#14992) @flaviendelangle
+
+### Docs
+
+- [docs] Fix typo in Tree View docs (#15047) @yash49
+
+### Core
+
+- [core] Adjust cherry-pick GH actions (#15101) @LukasTy
+- [core] Update prettier target branch (#15100) @MBilalShafi
+- [core] Update some `default-branch-switch` instances for `v7.x` (#15085) @MBilalShafi
+- [test] Revert to using `fireEvent` instead of `userEvent` (#14927) @LukasTy
+
 ## 7.21.0
 
 _Oct 17, 2024_

package/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './useDemoData';
 export * from './useBasicDemoData';
-export * from './useMovieData';
+export { useMovieData } from './useMovieData';
+export type { Movie } from './useMovieData';
 export * from './useQuery';
 export * from './useMockServer';
 export { loadServerRows } from './serverUtils';

package/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/hooks/serverUtils.d.ts

@@ -1,5 +1,4 @@
-import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel } from '@mui/x-data-grid-pro';
-import { UseDemoDataOptions } from './useDemoData';
+import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel, GridValidRowModel } from '@mui/x-data-grid-pro';
 export interface FakeServerResponse {
     returnedRows: GridRowModel[];
     nextCursor?: string;
@@ -35,20 +34,24 @@ export interface ServerSideQueryOptions {
     sortModel?: GridSortModel;
     firstRowToRender?: number;
     lastRowToRender?: number;
+    groupFields?: string[];
 }
-export declare const DEFAULT_DATASET_OPTIONS: UseDemoDataOptions;
 export declare const disableDelay: any;
 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 ProcessTreeDataRowsResponse {
+interface NestedDataRowsResponse {
     rows: GridRowModel[];
     rootRowCount: number;
 }
 /**
- * Simulates server data loading
+ * Simulates server data for tree-data feature
+ */
+export declare const processTreeDataRows: (rows: GridRowModel[], queryOptions: ServerSideQueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<NestedDataRowsResponse>;
+/**
+ * Simulates server data for row grouping feature
  */
-export declare const processTreeDataRows: (rows: GridRowModel[], queryOptions: ServerSideQueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<ProcessTreeDataRowsResponse>;
+export declare const processRowGroupingRows: (rows: GridValidRowModel[], queryOptions: ServerSideQueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<NestedDataRowsResponse>;
 export {};

package/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/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.21.0
+ * @mui/x-data-grid-generator v7.22.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

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";