@mui/x-data-grid-generator 8.13.1 → 8.14.1

package/hooks/serverUtils.js

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

package/hooks/useMockServer.d.ts

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

package/hooks/useMockServer.js

@@ -24,11 +24,11 @@ const dataCache = new _lruCache.LRUCache({
   ttl: 60 * 5 * 1e3 // 5 minutes
 });
 const BASE_URL = exports.BASE_URL = 'https://mui.com/x/api/data-grid';
-const GET_DEFAULT_DATASET_OPTIONS = isRowGrouping => ({
-  dataSet: isRowGrouping ? 'Movies' : 'Commodity',
-  rowLength: isRowGrouping ? (0, _useMovieData.getMovieRows)().length : 100,
+const GET_DEFAULT_DATASET_OPTIONS = {
+  dataSet: 'Commodity',
+  rowLength: 100,
   maxColumns: 6
-});
+};
 const getColumnsFromOptions = options => {
   let columns;
   switch (options.dataSet) {
@@ -52,6 +52,28 @@ const getColumnsFromOptions = options => {
   if (options.maxColumns) {
     columns = columns.slice(0, options.maxColumns);
   }
+  if (options.derivedColumns) {
+    columns = columns.reduce((acc, col) => {
+      acc.push(col);
+      if (col.type === 'date' || col.type === 'dateTime') {
+        acc.push({
+          type: 'date',
+          field: `${col.field}-year`,
+          generateData: row => new Date(row[col.field].getFullYear(), 0, 1),
+          editable: false,
+          derivedFrom: col.field
+        });
+        acc.push({
+          type: 'date',
+          field: `${col.field}-month`,
+          generateData: row => new Date(row[col.field].getFullYear(), row[col.field].getMonth(), 1),
+          editable: false,
+          derivedFrom: col.field
+        });
+      }
+      return acc;
+    }, []);
+  }
   return columns;
 };
 function decodeParams(url) {
@@ -102,19 +124,20 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail, nested
       shouldRequestsFailRef.current = shouldRequestsFail;
     }
   }, [shouldRequestsFail]);
-  const isRowGrouping = dataSetOptions?.rowGrouping ?? false;
-  const options = (0, _extends2.default)({}, GET_DEFAULT_DATASET_OPTIONS(isRowGrouping), dataSetOptions);
+  const options = (0, _extends2.default)({}, GET_DEFAULT_DATASET_OPTIONS, dataSetOptions);
   const isTreeData = options.treeData?.groupingField != null;
   const columns = React.useMemo(() => {
     return getColumnsFromOptions({
       dataSet: options.dataSet,
       editable: options.editable,
       maxColumns: options.maxColumns,
-      visibleFields: options.visibleFields
+      visibleFields: options.visibleFields,
+      derivedColumns: options.derivedColumns
     });
-  }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
+  }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields, options.derivedColumns]);
   const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
-  const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => (0, _extends2.default)({}, defaultColDef[column.type || 'string'], column)), [columns]);
+  const columnsWithDerivedColDef = React.useMemo(() => columns.map(column => (0, _extends2.default)({}, defaultColDef[column.type || 'string'], column)), [columns]);
+  const columnsWithDefaultColDef = React.useMemo(() => columnsWithDerivedColDef.filter(column => !column.derivedFrom), [columnsWithDerivedColDef]);
   const getGroupKey = React.useMemo(() => {
     if (isTreeData) {
       return row => row[options.treeData.groupingField];
@@ -153,7 +176,7 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail, nested
     (async () => {
       let rowData;
       const rowLength = options.rowLength;
-      if (rowLength > 1000) {
+      if (rowLength > 1000 && !options.derivedColumns) {
         rowData = await (0, _realDataService.getRealGridData)(1000, columns);
         rowData = await (0, _useDemoData.extrapolateSeed)(rowLength, rowData);
       } else {
@@ -179,9 +202,25 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail, nested
     return () => {
       active = false;
     };
-  }, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, index]);
+  }, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, options.derivedColumns, index]);
   const fetchRows = React.useCallback(async requestUrl => {
-    if (!requestUrl || !isDataReady) {
+    let dataDelay = 0;
+    const waitInterval = 10;
+    const waitTimeout = 500 * waitInterval; // 5 seconds
+    // wait until data is ready
+    while (dataRef.current === null) {
+      // prevent infinite loop with a timeout
+      if (dataDelay > waitTimeout) {
+        return sendEmptyResponse();
+      }
+
+      // eslint-disable-next-line no-await-in-loop
+      await new Promise(resolve => {
+        setTimeout(resolve, waitInterval);
+      });
+      dataDelay += waitInterval;
+    }
+    if (!requestUrl) {
       return sendEmptyResponse();
     }
     const params = decodeParams(requestUrl);
@@ -198,10 +237,9 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail, nested
       useCursorPagination: serverOptions?.useCursorPagination ?? _serverUtils.DEFAULT_SERVER_OPTIONS.useCursorPagination
     };
     if (shouldRequestsFailRef.current) {
-      const {
-        minDelay,
-        maxDelay
-      } = serverOptionsWithDefault;
+      // substract the delay made by waiting for data to be ready
+      const minDelay = Math.max(0, serverOptionsWithDefault.minDelay - dataDelay);
+      const maxDelay = Math.max(0, serverOptionsWithDefault.maxDelay - dataDelay);
       const delay = (0, _services.randomInt)(minDelay, maxDelay);
       return new Promise((_, reject) => {
         if (verbose) {
@@ -224,7 +262,20 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail, nested
       }, aggregateRow ? {
         aggregateRow
       } : {});
-    } else if (isRowGrouping) {
+    } else if (typeof params.pivotModel === 'object' && params.pivotModel.columns && params.pivotModel.rows && params.pivotModel.values) {
+      const {
+        rows,
+        rootRowCount,
+        pivotColumns,
+        aggregateRow
+      } = await (0, _serverUtils.processPivotingRows)(dataRef.current?.rows ?? [], params, serverOptionsWithDefault, columnsWithDerivedColDef);
+      getRowsResponse = {
+        rows: rows.slice(),
+        rowCount: rootRowCount,
+        pivotColumns,
+        aggregateRow
+      };
+    } else if (params.groupFields && params.groupFields.length > 0) {
       const {
         rows,
         rootRowCount,
@@ -261,7 +312,7 @@ const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail, nested
       }
       resolve(getRowsResponse);
     });
-  }, [dataRef, isDataReady, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, nestedPagination, isRowGrouping]);
+  }, [dataRef, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef, columnsWithDerivedColDef, nestedPagination]);
   const editRow = React.useCallback(async (rowId, updatedRow) => {
     return new Promise((resolve, reject) => {
       const minDelay = serverOptions?.minDelay ?? _serverUtils.DEFAULT_SERVER_OPTIONS.minDelay;

package/hooks/useQuery.d.ts

@@ -56,6 +56,7 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
     generateData?: (row: any, context: import("../index.js").GridDataGeneratorContext) => any;
     dataGeneratorUniquenessEnabled?: boolean;
     hide?: boolean;
+    derivedFrom?: string;
   } | {
     type: "actions";
     getActions: (params: import("@mui/x-data-grid").GridRowParams<any>) => readonly React.ReactElement<import("@mui/x-data-grid").GridActionsCellItemProps>[];
@@ -109,6 +110,7 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
     generateData?: (row: any, context: import("../index.js").GridDataGeneratorContext) => any;
     dataGeneratorUniquenessEnabled?: boolean;
     hide?: boolean;
+    derivedFrom?: string;
   } | {
     type: "singleSelect";
     valueOptions?: import("@mui/x-data-grid").ValueOptions[] | ((params: import("@mui/x-data-grid").GridValueOptionsParams<any>) => Array<import("@mui/x-data-grid").ValueOptions>) | undefined;
@@ -164,6 +166,7 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
     generateData?: (row: any, context: import("../index.js").GridDataGeneratorContext) => any;
     dataGeneratorUniquenessEnabled?: boolean;
     hide?: boolean;
+    derivedFrom?: string;
   })[];
   initialState: {
     columns: {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v8.13.1
+ * @mui/x-data-grid-generator v8.14.1
  *
  * @license UNLICENSED
  * This source code is licensed under the UNLICENSED license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-generator",
-  "version": "8.13.1",
+  "version": "8.14.1",
   "author": "MUI Team",
   "description": "Generate fake data for demo purposes only.",
   "license": "UNLICENSED",
@@ -25,10 +25,10 @@
     "chance": "^1.1.13",
     "clsx": "^2.1.1",
     "lru-cache": "^11.2.2",
-    "@mui/x-data-grid": "8.13.1",
-    "@mui/x-internals": "8.13.1",
-    "@mui/x-data-grid-pro": "8.13.1",
-    "@mui/x-data-grid-premium": "8.13.1"
+    "@mui/x-data-grid": "8.14.1",
+    "@mui/x-data-grid-pro": "8.14.1",
+    "@mui/x-data-grid-premium": "8.14.1",
+    "@mui/x-internals": "8.14.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/renderer/renderProgress.d.ts

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

package/renderer/renderProgress.js

@@ -65,6 +65,9 @@ function renderProgress(params) {
   if (params.value == null) {
     return '';
   }
+  if (params.rowNode.type === 'group') {
+    return `${(params.value * 100).toLocaleString()} %`;
+  }
 
   // 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.

package/renderer/renderTotalPrice.js

@@ -22,9 +22,17 @@ const Value = (0, _styles.styled)('div')(({
   alignItems: 'center',
   justifyContent: 'flex-end',
   '&.good': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.success.mainChannel} /  0.3)` : (0, _styles.alpha)(theme.palette.success.main, 0.3)
+    color: theme.vars ? `rgb(${theme.vars.palette.success.mainChannel})` : theme.palette.success.main
   },
   '&.bad': {
+    color: theme.vars ? `rgb(${theme.vars.palette.error.mainChannel})` : theme.palette.error.main
+  },
+  '&.filled.good': {
+    color: 'inherit',
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.success.mainChannel} /  0.3)` : (0, _styles.alpha)(theme.palette.success.main, 0.3)
+  },
+  '&.filled.bad': {
+    color: 'inherit',
     backgroundColor: theme.vars ? `rgba(${theme.vars.palette.error.mainChannel} /  0.3)` : (0, _styles.alpha)(theme.palette.error.main, 0.3)
   }
 }));
@@ -34,10 +42,11 @@ const currencyFormatter = new Intl.NumberFormat('en-US', {
 });
 const TotalPrice = /*#__PURE__*/React.memo(function TotalPrice(props) {
   const {
-    value
+    value,
+    grouped
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Value, {
-    className: (0, _clsx.default)(value > 1000000 && "good", value < 1000000 && "bad"),
+    className: (0, _clsx.default)(value > 1000000 && "good", value < 1000000 && "bad", !grouped && "filled"),
     children: currencyFormatter.format(value)
   });
 });
@@ -53,6 +62,7 @@ function renderTotalPrice(params) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TotalPrice, {
-    value: params.value
+    value: params.value,
+    grouped: params.rowNode.type === 'group'
   });
 }

package/services/gridColDefGenerator.d.ts

@@ -20,4 +20,8 @@ export type GridColDefGenerator = GridColDef & {
    * If `true`, the column will be marked as hidden in the `columnVisibilityModel`.
    */
   hide?: boolean;
+  /**
+   * Reference to the field this column was derived from.
+   */
+  derivedFrom?: string;
 };