@mui/x-data-grid-generator 5.13.0 → 5.15.0

package/CHANGELOG.md

@@ -3,6 +3,156 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.15.0
+
+_Jul 29, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce aggregation (#5592) @flaviendelangle
+
+  Premium users can now aggregate data in the grid.
+  Extract information like sum, average, count, and others with a couple of clicks.
+  
+  https://user-images.githubusercontent.com/45398769/181581503-77cc412e-9d9e-4de1-8bc3-c3bccc54cdaa.mp4
+
+  To enable this feature, add `experimentalFeatures={{ aggregation: true }}`.
+  Aggregation functions are customizable and they combine well with row grouping.
+  See the [documentation](https://mui.com/x/react-data-grid/aggregation/) to explore everything it has to offer.
+
+- 🚀 Introduce row pinning (#4863) @cherniavskii
+
+  Pro users can now pin rows on top or bottom of the grid.
+
+  https://user-images.githubusercontent.com/45398769/181581493-56c733a3-6dd5-4546-bf8d-3f2dff72b14a.mp4
+
+  To do so, enable the feature with `experimentalFeatures={{ rowPinning: true }}` and provide the pinned rows data to the `pinnedRows` prop.
+  For more details, see the [documentation](https://mui.com/x/react-data-grid/row-pinning/).
+
+- 🌍 Add simplified Chinese (zh-CN) locale to pickers (#5584) @gamecss
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v5.15.0` / `@mui/x-data-grid-pro@v5.15.0` / `@mui/x-data-grid-premium@v5.15.0`
+
+#### Changes
+
+- [DataGrid] Add prop to keep modifications while processing props (#5309) @m4theushw
+- [DataGrid] Fix container width change on React 18 (#5566) @m4theushw
+- [DataGrid] Fix ellipsis style convention (#5587) @oliviertassinari
+- [DataGridPro] Implement row pinning (#4863) @cherniavskii
+- [DataGridPremium] Make aggregation public (#5592) @cherniavskii
+- [l10n] Improve simplified Chinese (zh-CN) locale (#5584) @gamecss
+
+### `@mui/x-date-pickers@v5.0.0-beta.3` / `@mui/x-date-picker-pro@5.0.0-beta.3`
+
+#### Changes
+
+- [l10n] Add simplified Chinese (zh-CN) locale (#5584) @gamecss
+
+### Docs
+
+- [docs] Split docs page about rows (#5195) @flaviendelangle
+- [docs] Add warning clarifications (#5399) @alexfauquette
+- [docs] Correct slot CSS classes for Pro and Premium components (#5452) @alexfauquette
+- [docs] Fix internal link to `valueParser` (#5450) @alexfauquette
+
+### Core
+
+- [core] Upgrade monorepo (#5560) @m4theushw
+
+## 5.14.0
+
+_Jul 21, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧪 Export `GridBooleanCell` component from data grid (#5537) @cliedeman
+- ⚙️ Improve accessibility of the Export menu (#5486) @nogalpaulina
+- 🌍 Improvements to different locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@5.14.0` / `@mui/x-data-grid-pro@5.14.0` / `@mui/x-data-grid-premium@5.14.0`
+
+#### Changes
+
+- [DataGrid] Add generics to `GridPreProcessEditCellProps` (#5510) @YunosukeY
+- [DataGrid] Avoid inconsistent state export (#5390) @flaviendelangle
+- [DataGrid] Export `GridBooleanCell` component (#5537) @cliedeman
+- [DataGrid] Fix `date`/`dateTime` edit input font size to match view mode (#5304) @cherniavskii
+- [DataGrid] Fix loading overlay position (#5558) @DanailH
+- [DataGrid] Improve accessibility of the Export menu in the toolbar (#5486) @nogalpaulina
+- [DataGridPremium] Implement Aggregation - not publicly released (#4208) @flaviendelangle
+- [DataGridPremium] Fix crash when exporting all columns to Excel (#5425) @cherniavskii
+- [l10n] Add Traditional Chinese (zh-TW) locale (#5498) @happyincent
+
+### `@mui/x-date-pickers@v5.0.0-beta.2` / `@mui/x-date-picker-pro@5.0.0-beta.2`
+
+#### Changes
+
+- [l10n] Add Norwegian (nb-NO) locale (#5475) @elkebab
+
+### Docs
+
+- [docs] New page presenting the `apiRef` (#5273) @flaviendelangle
+- [docs] Remove blank line @oliviertassinari
+
+### Core
+
+- [core] Add missing comments on zh-TW translation (#5559) @flaviendelangle
+- [core] Polish on the bug issue template (#5525) @oliviertassinari
+- [test] Add more tests related to `isPrintableKey` (#5458) @mnajdova
+
+## 5.13.1
+
+_Jul 15, 2022_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- ✏️ Enter edit mode when pasting in a cell with Ctrl+V (Cmd+V on macOS) (#5405) @alexfauquette
+- 🌍 Many improvements to the locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.13.1` / `@mui/x-data-grid-pro@v5.13.1` / `@mui/x-data-grid-premium@v5.13.1`
+
+#### Changes
+
+- [DataGrid] Fix blank space when using dynamic row height with pagination (#5315) @m4theushw
+- [DataGrid] Start editing with uppercase letter and Ctrl+V (#5405) @alexfauquette
+- [DataGrid] Fix some filters being removed from filter model on filter panel open (#5403) @cherniavskii
+- [DataGridPro] Improve pinned column headers accessibility (#5370) @cherniavskii
+- [l10n] Improve Dutch (nl-NL) locale (#5464) @developenguin
+- [l10n] Improve French (fr-FR) locale (#3211) (#5420) @Zenoo
+- [l10n] Improve German (de-DE) locale (#5448) @sebastianfrey
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#5394) @andrepxa
+- [l10n] Improve Romanian (ro-RO) locale (#5449) @rolule
+
+### `@mui/x-date-pickers@v5.0.0-beta.1` / `@mui/x-date-picker-pro@5.0.0-beta.1`
+
+#### Changes
+
+- [pickers] Add Italian (it-IT) locale (#5467) @felixh10r
+- [pickers] Add Spanish (es-ES) locale (#5468) @felixh10r
+- [pickers] Improve French (fr-FR) locale (#5446) @Zenoo
+- [pickers] Improve German (de-DE) locale (#5447) @sebastianfrey
+
+### Docs
+
+- [docs] Fix typo in the sorting page (#5431) @JosephMarinier
+- [docs] Fix description for "Striped rows" example (#5432) @lindapaiste
+- [docs] Make a clear difference between the license and license key (#5316) @oliviertassinari
+- [docs] Update pickers README files (#5456) @cherniavskii
+- [docs] Clarify the scope of support for MUI X (#5423) @joserodolfofreitas
+
+### Core
+
+- [core] Add technical support link to \_redirects (#5428) @joserodolfofreitas
+- [core] Improve GitHub bug reproduction template (#5067) @joserodolfofreitas
+- [core] Include playground pages in tsconfig (#5367) @cherniavskii
+- [core] Sort keys like in material-ui @oliviertassinari
+- [test] Wait for flags to load on regression tests (#5473) @m4theushw
+
 ## 5.13.0
 
 _Jul 7, 2022_
@@ -213,7 +363,7 @@ _May 31, 2022_
 
 We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
-- 🎁 Introduce support for [dynamic row height](https://mui.com/x/react-data-grid/rows/#dynamic-row-height) (#4859) @m4theushw
+- 🎁 Introduce support for [dynamic row height](https://mui.com/x/react-data-grid/row-height/#dynamic-row-height) (#4859) @m4theushw
 
   <img src="https://user-images.githubusercontent.com/42154031/171183167-718d7bcd-ec0f-459e-97fe-0f650abb4a99.gif" width="800">
 
@@ -530,7 +680,7 @@ _Apr 25, 2022_
 
 We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
-- 🎁 Introduce [Row reorder](https://mui.com/x/react-data-grid/rows/#row-reorder) (#4034) @DanailH
+- 🎁 Introduce [Row reorder](https://mui.com/x/react-data-grid/row-ordering/) (#4034) @DanailH
 
   <img src="https://user-images.githubusercontent.com/5858539/165091263-23472fbb-a989-44b8-849a-d2185adfe13b.gif" width="800">
 
@@ -794,7 +944,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
   <DataGrid getRowSpacing={() => ({ top: 10, bottom: 10 })} />
   ```
 
-  Check the [documentation](https://mui.com/x/react-data-grid/rows/#row-spacing) for more information.
+  Check the [documentation](https://mui.com/x/react-data-grid/row-height/#row-spacing) for more information.
 
 ### `@mui/x-data-grid@v5.6.1` / `@mui/x-data-grid-pro@v5.6.1`
 
@@ -1048,7 +1198,7 @@ _Jan 28, 2022_
 
 A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
 
-- 🚣 Introduce [variable row height](https://mui.com/x/react-data-grid/rows/#variable-row-height) (#438) @DanailH
+- 🚣 Introduce [variable row height](https://mui.com/x/react-data-grid/row-height/#variable-row-height) (#438) @DanailH
 
   Allows for setting a row-specific height.
   By default, all rows have the same height, but now you can set the height on a per-row basis.
@@ -1416,7 +1566,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some
 - [core] Fix `yarn prettier` script (#3292) @oliviertassinari
 - [core] Improve tests for Tree Data (#3366) @flaviendelangle
 - [core] Never import directly from the `__modules__` folder in the `x-data-grid-generator` package (#3379) @flaviendelangle
-- [core] Transition to a new StackOverflow tag (#3308) @oliviertassinari
+- [core] Transition to a new Stack Overflow tag (#3308) @oliviertassinari
 - [core] Update monorepo (#3370) @flaviendelangle
 - [core] Use pre-processors for sorting and filtering (#3318) @flaviendelangle
 - [test] Replace `useFakeTimers` (#3323) @m4theushw
@@ -3700,7 +3850,7 @@ Big thanks to the 7 contributors who made this release possible. Here are some h
 - 🎁 Add `onRowsScrollEnd` to support infinite loading (#1199) @DanailH
   This is an XGrid feature. Provides the ability to tap into the `onRowsScrollEnd` which is called when the scroll reaches the bottom of the grid viewport allowing developers to load additional data. It can be used with a combination of `scrollBottomThreshold` to control the area in which the `onRowsScrollEnd` is called.
 
-  See the documentation for [more details](https://mui.com/x/react-data-grid/rows/#infinite-loading).
+  See the documentation for [more details](https://mui.com/x/react-data-grid/row-updates/#infinite-loading).
 
 - 🕹 Provide the ability to sort by multiple columns using Shift+click (#1203) @dtassone
 - 🇵🇱 Added pl-PL locale (#1117) @LarsKumbier

package/columns/commodities.columns.js

@@ -44,6 +44,7 @@ export const getCommodityColumns = (editable = false) => [{
   generateData: generateFilledQuantity,
   renderCell: renderProgress,
   renderEditCell: renderEditProgress,
+  availableAggregationFunctions: ['min', 'max', 'avg', 'size'],
   type: 'number',
   width: 120,
   editable

package/columns/employees.columns.js

@@ -9,10 +9,16 @@ export const getEmployeeColumns = () => [{
 }, {
   field: 'avatar',
   headerName: 'Avatar',
-  sortable: false,
   generateData: randomColor,
   renderCell: renderAvatar,
+  valueGetter: params => params.rowNode.isAutoGenerated ? null : {
+    name: params.row.name,
+    color: params.row.avatar
+  },
+  sortable: false,
   filterable: false,
+  groupable: false,
+  aggregable: false,
   disableExport: true
 }, {
   field: 'name',
@@ -20,14 +26,18 @@ export const getEmployeeColumns = () => [{
   generateData: randomName,
   dataGeneratorUniquenessEnabled: true,
   width: 120,
-  editable: true
+  editable: true,
+  groupable: false,
+  aggregable: false
 }, {
   field: 'website',
   headerName: 'Website',
   generateData: randomUrl,
   renderCell: renderLink,
   width: 160,
-  editable: true
+  editable: true,
+  groupable: false,
+  aggregable: false
 }, {
   field: 'rating',
   headerName: 'Rating',
@@ -36,7 +46,8 @@ export const getEmployeeColumns = () => [{
   renderEditCell: renderEditRating,
   width: 180,
   type: 'number',
-  editable: true
+  editable: true,
+  availableAggregationFunctions: ['avg', 'min', 'max', 'size']
 }, {
   field: 'email',
   headerName: 'Email',
@@ -111,5 +122,15 @@ export const getEmployeeColumns = () => [{
 }, {
   field: 'salary',
   headerName: 'Salary',
-  generateData: () => randomInt(30000, 80000)
+  generateData: () => randomInt(30000, 80000),
+  type: 'number',
+  valueFormatter: ({
+    value
+  }) => {
+    if (!value || typeof value !== 'number') {
+      return value;
+    }
+
+    return `${value.toLocaleString()}$`;
+  }
 }];

package/columns/index.d.ts

@@ -1,3 +1,2 @@
 export * from './commodities.columns';
 export * from './employees.columns';
-export * from '@mui/x-data-grid-premium/hooks/utils/useKeepGroupedColumnsHidden';

package/columns/index.js

@@ -1,3 +1,2 @@
 export * from './commodities.columns';
-export * from './employees.columns';
-export * from '@mui/x-data-grid-premium/hooks/utils/useKeepGroupedColumnsHidden';
+export * from './employees.columns';

package/hooks/useMovieData.js

@@ -35,7 +35,8 @@ const COLUMNS = [{
 }, {
   field: 'year',
   headerName: 'Year',
-  type: 'number'
+  type: 'number',
+  availableAggregationFunctions: ['max', 'min']
 }, {
   field: 'cinematicUniverse',
   headerName: 'Cinematic Universe',

package/hooks/useQuery.d.ts

@@ -17,7 +17,7 @@ export interface QueryOptions {
     filterModel?: GridFilterModel;
     sortModel?: GridSortModel;
 }
-export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOptions> | undefined, serverOptions?: Partial<ServerOptions> | undefined) => {
+export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOptions>, serverOptions?: Partial<ServerOptions>) => {
     columns: import("..").GridColDefGenerator[];
     initialState: {
         columns: {

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.13.0
+/** @license MUI v5.15.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/columns/commodities.columns.js

@@ -48,6 +48,7 @@ export var getCommodityColumns = function getCommodityColumns() {
     generateData: generateFilledQuantity,
     renderCell: renderProgress,
     renderEditCell: renderEditProgress,
+    availableAggregationFunctions: ['min', 'max', 'avg', 'size'],
     type: 'number',
     width: 120,
     editable: editable

package/legacy/columns/employees.columns.js

@@ -10,10 +10,18 @@ export var getEmployeeColumns = function getEmployeeColumns() {
   }, {
     field: 'avatar',
     headerName: 'Avatar',
-    sortable: false,
     generateData: randomColor,
     renderCell: renderAvatar,
+    valueGetter: function valueGetter(params) {
+      return params.rowNode.isAutoGenerated ? null : {
+        name: params.row.name,
+        color: params.row.avatar
+      };
+    },
+    sortable: false,
     filterable: false,
+    groupable: false,
+    aggregable: false,
     disableExport: true
   }, {
     field: 'name',
@@ -21,14 +29,18 @@ export var getEmployeeColumns = function getEmployeeColumns() {
     generateData: randomName,
     dataGeneratorUniquenessEnabled: true,
     width: 120,
-    editable: true
+    editable: true,
+    groupable: false,
+    aggregable: false
   }, {
     field: 'website',
     headerName: 'Website',
     generateData: randomUrl,
     renderCell: renderLink,
     width: 160,
-    editable: true
+    editable: true,
+    groupable: false,
+    aggregable: false
   }, {
     field: 'rating',
     headerName: 'Rating',
@@ -37,7 +49,8 @@ export var getEmployeeColumns = function getEmployeeColumns() {
     renderEditCell: renderEditRating,
     width: 180,
     type: 'number',
-    editable: true
+    editable: true,
+    availableAggregationFunctions: ['avg', 'min', 'max', 'size']
   }, {
     field: 'email',
     headerName: 'Email',
@@ -117,6 +130,16 @@ export var getEmployeeColumns = function getEmployeeColumns() {
     headerName: 'Salary',
     generateData: function generateData() {
       return randomInt(30000, 80000);
+    },
+    type: 'number',
+    valueFormatter: function valueFormatter(_ref2) {
+      var value = _ref2.value;
+
+      if (!value || typeof value !== 'number') {
+        return value;
+      }
+
+      return "".concat(value.toLocaleString(), "$");
     }
   }];
 };

package/legacy/columns/index.js

@@ -1,3 +1,2 @@
 export * from './commodities.columns';
-export * from './employees.columns';
-export * from '@mui/x-data-grid-premium/hooks/utils/useKeepGroupedColumnsHidden';
+export * from './employees.columns';

package/legacy/hooks/useMovieData.js

@@ -35,7 +35,8 @@ var COLUMNS = [{
 }, {
   field: 'year',
   headerName: 'Year',
-  type: 'number'
+  type: 'number',
+  availableAggregationFunctions: ['max', 'min']
 }, {
   field: 'cinematicUniverse',
   headerName: 'Cinematic Universe',

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.13.0
+/** @license MUI v5.15.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/renderer/renderAvatar.js

@@ -2,14 +2,14 @@ import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function renderAvatar(params) {
-  if (params.rowNode.isAutoGenerated) {
+  if (params.value == null) {
     return '';
   }
 
   return /*#__PURE__*/_jsx(Avatar, {
     style: {
-      backgroundColor: params.value
+      backgroundColor: params.value.color
     },
-    children: params.row.name.toString().toUpperCase().substring(0, 1)
+    children: params.value.name.toUpperCase().substring(0, 1)
   });
 }

package/legacy/renderer/renderCountry.js

@@ -32,8 +32,14 @@ var Country = /*#__PURE__*/React.memo(function Country(props) {
   });
 });
 export function renderCountry(params) {
-  if (params.rowNode.isAutoGenerated || !params.value) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(Country, {

package/legacy/renderer/renderPnl.js

@@ -28,7 +28,7 @@ var Pnl = /*#__PURE__*/React.memo(function Pnl(props) {
   });
 });
 export function renderPnl(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
   }
 

package/legacy/renderer/renderProgress.js

@@ -48,8 +48,14 @@ var ProgressBar = /*#__PURE__*/React.memo(function ProgressBar(props) {
   });
 });
 export function renderProgress(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering a progress bar.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(ProgressBar, {

package/legacy/renderer/renderRating.js

@@ -4,8 +4,7 @@ import Rating from '@mui/material/Rating';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var RatingValue = /*#__PURE__*/React.memo(function RatingValue(props) {
-  var name = props.name,
-      value = props.value;
+  var value = props.value;
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
       display: 'flex',
@@ -14,22 +13,26 @@ var RatingValue = /*#__PURE__*/React.memo(function RatingValue(props) {
       color: 'text.secondary'
     },
     children: [/*#__PURE__*/_jsx(Rating, {
-      name: name,
       value: value,
       sx: {
         mr: 1
       },
       readOnly: true
-    }), ' ', Math.round(Number(value) * 10) / 10]
+    }), " ", Math.round(Number(value) * 10) / 10]
   });
 });
 export function renderRating(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(RatingValue, {
-    value: params.value,
-    name: params.row.id.toString()
+    value: params.value
   });
 }

package/legacy/renderer/renderTotalPrice.js

@@ -33,8 +33,14 @@ var TotalPrice = /*#__PURE__*/React.memo(function TotalPrice(props) {
   });
 });
 export function renderTotalPrice(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(TotalPrice, {

package/modern/columns/commodities.columns.js

@@ -44,6 +44,7 @@ export const getCommodityColumns = (editable = false) => [{
   generateData: generateFilledQuantity,
   renderCell: renderProgress,
   renderEditCell: renderEditProgress,
+  availableAggregationFunctions: ['min', 'max', 'avg', 'size'],
   type: 'number',
   width: 120,
   editable

package/modern/columns/employees.columns.js

@@ -9,10 +9,16 @@ export const getEmployeeColumns = () => [{
 }, {
   field: 'avatar',
   headerName: 'Avatar',
-  sortable: false,
   generateData: randomColor,
   renderCell: renderAvatar,
+  valueGetter: params => params.rowNode.isAutoGenerated ? null : {
+    name: params.row.name,
+    color: params.row.avatar
+  },
+  sortable: false,
   filterable: false,
+  groupable: false,
+  aggregable: false,
   disableExport: true
 }, {
   field: 'name',
@@ -20,14 +26,18 @@ export const getEmployeeColumns = () => [{
   generateData: randomName,
   dataGeneratorUniquenessEnabled: true,
   width: 120,
-  editable: true
+  editable: true,
+  groupable: false,
+  aggregable: false
 }, {
   field: 'website',
   headerName: 'Website',
   generateData: randomUrl,
   renderCell: renderLink,
   width: 160,
-  editable: true
+  editable: true,
+  groupable: false,
+  aggregable: false
 }, {
   field: 'rating',
   headerName: 'Rating',
@@ -36,7 +46,8 @@ export const getEmployeeColumns = () => [{
   renderEditCell: renderEditRating,
   width: 180,
   type: 'number',
-  editable: true
+  editable: true,
+  availableAggregationFunctions: ['avg', 'min', 'max', 'size']
 }, {
   field: 'email',
   headerName: 'Email',
@@ -111,5 +122,15 @@ export const getEmployeeColumns = () => [{
 }, {
   field: 'salary',
   headerName: 'Salary',
-  generateData: () => randomInt(30000, 80000)
+  generateData: () => randomInt(30000, 80000),
+  type: 'number',
+  valueFormatter: ({
+    value
+  }) => {
+    if (!value || typeof value !== 'number') {
+      return value;
+    }
+
+    return `${value.toLocaleString()}$`;
+  }
 }];

package/modern/columns/index.js

@@ -1,3 +1,2 @@
 export * from './commodities.columns';
-export * from './employees.columns';
-export * from '@mui/x-data-grid-premium/hooks/utils/useKeepGroupedColumnsHidden';
+export * from './employees.columns';

package/modern/hooks/useMovieData.js

@@ -35,7 +35,8 @@ const COLUMNS = [{
 }, {
   field: 'year',
   headerName: 'Year',
-  type: 'number'
+  type: 'number',
+  availableAggregationFunctions: ['max', 'min']
 }, {
   field: 'cinematicUniverse',
   headerName: 'Cinematic Universe',

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.13.0
+/** @license MUI v5.15.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/renderer/renderAvatar.js

@@ -2,14 +2,14 @@ import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function renderAvatar(params) {
-  if (params.rowNode.isAutoGenerated) {
+  if (params.value == null) {
     return '';
   }
 
   return /*#__PURE__*/_jsx(Avatar, {
     style: {
-      backgroundColor: params.value
+      backgroundColor: params.value.color
     },
-    children: params.row.name.toString().toUpperCase().substring(0, 1)
+    children: params.value.name.toUpperCase().substring(0, 1)
   });
 }

package/modern/renderer/renderCountry.js

@@ -34,8 +34,14 @@ const Country = /*#__PURE__*/React.memo(function Country(props) {
   });
 });
 export function renderCountry(params) {
-  if (params.rowNode.isAutoGenerated || !params.value) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(Country, {

package/modern/renderer/renderPnl.js

@@ -29,7 +29,7 @@ const Pnl = /*#__PURE__*/React.memo(function Pnl(props) {
   });
 });
 export function renderPnl(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
   }
 

package/modern/renderer/renderProgress.js

@@ -49,8 +49,14 @@ const ProgressBar = /*#__PURE__*/React.memo(function ProgressBar(props) {
   });
 });
 export function renderProgress(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering a progress bar.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(ProgressBar, {

package/modern/renderer/renderRating.js

@@ -5,7 +5,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const RatingValue = /*#__PURE__*/React.memo(function RatingValue(props) {
   const {
-    name,
     value
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
@@ -16,22 +15,26 @@ const RatingValue = /*#__PURE__*/React.memo(function RatingValue(props) {
       color: 'text.secondary'
     },
     children: [/*#__PURE__*/_jsx(Rating, {
-      name: name,
       value: value,
       sx: {
         mr: 1
       },
       readOnly: true
-    }), ' ', Math.round(Number(value) * 10) / 10]
+    }), " ", Math.round(Number(value) * 10) / 10]
   });
 });
 export function renderRating(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(RatingValue, {
-    value: params.value,
-    name: params.row.id.toString()
+    value: params.value
   });
 }

package/modern/renderer/renderTotalPrice.js

@@ -34,8 +34,14 @@ const TotalPrice = /*#__PURE__*/React.memo(function TotalPrice(props) {
   });
 });
 export function renderTotalPrice(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(TotalPrice, {

package/node/columns/commodities.columns.js

@@ -55,6 +55,7 @@ const getCommodityColumns = (editable = false) => [{
   generateData: _services.generateFilledQuantity,
   renderCell: _renderer.renderProgress,
   renderEditCell: _renderer.renderEditProgress,
+  availableAggregationFunctions: ['min', 'max', 'avg', 'size'],
   type: 'number',
   width: 120,
   editable

package/node/columns/employees.columns.js

@@ -20,10 +20,16 @@ const getEmployeeColumns = () => [{
 }, {
   field: 'avatar',
   headerName: 'Avatar',
-  sortable: false,
   generateData: _services.randomColor,
   renderCell: _renderer.renderAvatar,
+  valueGetter: params => params.rowNode.isAutoGenerated ? null : {
+    name: params.row.name,
+    color: params.row.avatar
+  },
+  sortable: false,
   filterable: false,
+  groupable: false,
+  aggregable: false,
   disableExport: true
 }, {
   field: 'name',
@@ -31,14 +37,18 @@ const getEmployeeColumns = () => [{
   generateData: _services.randomName,
   dataGeneratorUniquenessEnabled: true,
   width: 120,
-  editable: true
+  editable: true,
+  groupable: false,
+  aggregable: false
 }, {
   field: 'website',
   headerName: 'Website',
   generateData: _services.randomUrl,
   renderCell: _renderer.renderLink,
   width: 160,
-  editable: true
+  editable: true,
+  groupable: false,
+  aggregable: false
 }, {
   field: 'rating',
   headerName: 'Rating',
@@ -47,7 +57,8 @@ const getEmployeeColumns = () => [{
   renderEditCell: _renderer.renderEditRating,
   width: 180,
   type: 'number',
-  editable: true
+  editable: true,
+  availableAggregationFunctions: ['avg', 'min', 'max', 'size']
 }, {
   field: 'email',
   headerName: 'Email',
@@ -122,7 +133,17 @@ const getEmployeeColumns = () => [{
 }, {
   field: 'salary',
   headerName: 'Salary',
-  generateData: () => (0, _services.randomInt)(30000, 80000)
+  generateData: () => (0, _services.randomInt)(30000, 80000),
+  type: 'number',
+  valueFormatter: ({
+    value
+  }) => {
+    if (!value || typeof value !== 'number') {
+      return value;
+    }
+
+    return `${value.toLocaleString()}$`;
+  }
 }];
 
 exports.getEmployeeColumns = getEmployeeColumns;

package/node/columns/index.js

@@ -28,17 +28,4 @@ Object.keys(_employees).forEach(function (key) {
       return _employees[key];
     }
   });
-});
-
-var _useKeepGroupedColumnsHidden = require("@mui/x-data-grid-premium/hooks/utils/useKeepGroupedColumnsHidden");
-
-Object.keys(_useKeepGroupedColumnsHidden).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useKeepGroupedColumnsHidden[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useKeepGroupedColumnsHidden[key];
-    }
-  });
 });

package/node/hooks/useMovieData.js

@@ -41,7 +41,8 @@ const COLUMNS = [{
 }, {
   field: 'year',
   headerName: 'Year',
-  type: 'number'
+  type: 'number',
+  availableAggregationFunctions: ['max', 'min']
 }, {
   field: 'cinematicUniverse',
   headerName: 'Cinematic Universe',

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.13.0
+/** @license MUI v5.15.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/renderer/renderAvatar.js

@@ -18,14 +18,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function renderAvatar(params) {
-  if (params.rowNode.isAutoGenerated) {
+  if (params.value == null) {
     return '';
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
     style: {
-      backgroundColor: params.value
+      backgroundColor: params.value.color
     },
-    children: params.row.name.toString().toUpperCase().substring(0, 1)
+    children: params.value.name.toUpperCase().substring(0, 1)
   });
 }

package/node/renderer/renderCountry.js

@@ -50,8 +50,14 @@ const Country = /*#__PURE__*/React.memo(function Country(props) {
 });
 
 function renderCountry(params) {
-  if (params.rowNode.isAutoGenerated || !params.value) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Country, {

package/node/renderer/renderPnl.js

@@ -47,7 +47,7 @@ const Pnl = /*#__PURE__*/React.memo(function Pnl(props) {
 });
 
 function renderPnl(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
   }
 

package/node/renderer/renderProgress.js

@@ -66,8 +66,14 @@ const ProgressBar = /*#__PURE__*/React.memo(function ProgressBar(props) {
 });
 
 function renderProgress(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering a progress bar.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBar, {

package/node/renderer/renderRating.js

@@ -21,7 +21,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const RatingValue = /*#__PURE__*/React.memo(function RatingValue(props) {
   const {
-    name,
     value
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -32,23 +31,27 @@ const RatingValue = /*#__PURE__*/React.memo(function RatingValue(props) {
       color: 'text.secondary'
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
-      name: name,
       value: value,
       sx: {
         mr: 1
       },
       readOnly: true
-    }), ' ', Math.round(Number(value) * 10) / 10]
+    }), " ", Math.round(Number(value) * 10) / 10]
   });
 });
 
 function renderRating(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RatingValue, {
-    value: params.value,
-    name: params.row.id.toString()
+    value: params.value
   });
 }

package/node/renderer/renderTotalPrice.js

@@ -52,8 +52,14 @@ const TotalPrice = /*#__PURE__*/React.memo(function TotalPrice(props) {
 });
 
 function renderTotalPrice(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TotalPrice, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-generator",
-  "version": "5.13.0",
+  "version": "5.15.0",
   "description": "Generate fake data for demo purposes only.",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -19,12 +19,12 @@
     "directory": "packages/grid/x-data-grid-generator"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.2",
+    "@babel/runtime": "^7.18.6",
     "@mui/base": "^5.0.0-alpha.80",
-    "@mui/x-data-grid-premium": "5.13.0",
+    "@mui/x-data-grid-premium": "5.15.0",
     "chance": "^1.1.8",
     "clsx": "^1.2.1",
-    "lru-cache": "^7.12.0"
+    "lru-cache": "^7.13.1"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5.4.1",

package/renderer/renderAvatar.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { GridRenderCellParams } from '@mui/x-data-grid-premium';
-export declare function renderAvatar(params: GridRenderCellParams<string, {
+export declare function renderAvatar(params: GridRenderCellParams<{
     name: string;
-}, any>): "" | JSX.Element;
+    color: string;
+}, any, any>): "" | JSX.Element;

package/renderer/renderAvatar.js

@@ -2,14 +2,14 @@ import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function renderAvatar(params) {
-  if (params.rowNode.isAutoGenerated) {
+  if (params.value == null) {
     return '';
   }
 
   return /*#__PURE__*/_jsx(Avatar, {
     style: {
-      backgroundColor: params.value
+      backgroundColor: params.value.color
     },
-    children: params.row.name.toString().toUpperCase().substring(0, 1)
+    children: params.value.name.toUpperCase().substring(0, 1)
   });
 }

package/renderer/renderCountry.d.ts

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

package/renderer/renderCountry.js

@@ -34,8 +34,14 @@ const Country = /*#__PURE__*/React.memo(function Country(props) {
   });
 });
 export function renderCountry(params) {
-  if (params.rowNode.isAutoGenerated || !params.value) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(Country, {

package/renderer/renderPnl.js

@@ -29,7 +29,7 @@ const Pnl = /*#__PURE__*/React.memo(function Pnl(props) {
   });
 });
 export function renderPnl(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
   }
 

package/renderer/renderProgress.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { GridRenderCellParams } from '@mui/x-data-grid-premium';
-export declare function renderProgress(params: GridRenderCellParams<number, any, any>): "" | JSX.Element;
+export declare function renderProgress(params: GridRenderCellParams<number, any, any>): "" | JSX.Element | null;

package/renderer/renderProgress.js

@@ -49,8 +49,14 @@ const ProgressBar = /*#__PURE__*/React.memo(function ProgressBar(props) {
   });
 });
 export function renderProgress(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering a progress bar.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(ProgressBar, {

package/renderer/renderRating.d.ts

@@ -2,4 +2,4 @@
 import { GridRenderCellParams, GridRowId } from '@mui/x-data-grid-premium';
 export declare function renderRating(params: GridRenderCellParams<number, {
     id: GridRowId;
-}, any>): "" | JSX.Element;
+}, any>): "" | JSX.Element | null;

package/renderer/renderRating.js

@@ -5,7 +5,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const RatingValue = /*#__PURE__*/React.memo(function RatingValue(props) {
   const {
-    name,
     value
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
@@ -16,22 +15,26 @@ const RatingValue = /*#__PURE__*/React.memo(function RatingValue(props) {
       color: 'text.secondary'
     },
     children: [/*#__PURE__*/_jsx(Rating, {
-      name: name,
       value: value,
       sx: {
         mr: 1
       },
       readOnly: true
-    }), ' ', Math.round(Number(value) * 10) / 10]
+    }), " ", Math.round(Number(value) * 10) / 10]
   });
 });
 export function renderRating(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(RatingValue, {
-    value: params.value,
-    name: params.row.id.toString()
+    value: params.value
   });
 }

package/renderer/renderTotalPrice.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { GridRenderCellParams } from '@mui/x-data-grid-premium';
-export declare function renderTotalPrice(params: GridRenderCellParams<number>): "" | JSX.Element;
+export declare function renderTotalPrice(params: GridRenderCellParams<number>): "" | JSX.Element | null;

package/renderer/renderTotalPrice.js

@@ -34,8 +34,14 @@ const TotalPrice = /*#__PURE__*/React.memo(function TotalPrice(props) {
   });
 });
 export function renderTotalPrice(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
+  } // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
+
+
+  if (params.aggregation && !params.aggregation.hasCellUnit) {
+    return null;
   }
 
   return /*#__PURE__*/_jsx(TotalPrice, {