[DataGridPremium] Fix `valueFormatter` issues when `rowGroupingColumnMode="single"` #18967

cherniavskii · 2025-07-29T16:47:48Z

Continuation of #18916 as it only fixed subset of the issues

Preview: https://deploy-preview-18967--material-ui-x.netlify.app/x/react-data-grid/pivoting/#derived-columns-in-pivot-mode

mui-bot · 2025-07-29T16:49:27Z

Deploy preview: https://deploy-preview-18967--material-ui-x.netlify.app/

Updated pages:

docs/data/data-grid/row-grouping/row-grouping.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+64B^(+0.01%)	🔺+10B^(+0.01%)
@mui/x-data-grid-pro	🔺+64B^(+0.01%)	🔺+8B^(0.00%)
@mui/x-data-grid-premium	🔺+372B^(+0.04%)	🔺+100B^(+0.04%)
@mui/x-charts	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 4979c6e

cherniavskii · 2025-07-29T18:32:08Z

packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx

+    // In single column grouping mode, the `valueFormatter` of the grouping column uses
+    // value formatters from original columns for each of the grouping criteria


I think this is the only way valueFormatter could work in rowGroupingColumnMode="single".

arminmeh · 2025-07-31T11:50:59Z

This still fails for this reproduction code

import * as React from 'react';
import { DataGridPremium, GridColDef, GridRowGroupingModel } from '@mui/x-data-grid-premium';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID' },
  {
    field: 'transactionDate',
    type: 'date',
    headerName: 'Transaction Date',
    valueGetter: (value) => new Date(value),
    groupingValueGetter: (value) => value,
  },
  { field: 'ticker', headerName: 'Ticker' },
];

const rowGroupingModel: GridRowGroupingModel = ['transactionDate'];

export default function GridGetPivotDerivedColumns() {
  return (
    <div style={{ width: '100%' }}>
      <div style={{ height: 300, width: '100%' }}>
        <DataGridPremium
          rows={rows}
          columns={columns}
          initialState={{
            rowGrouping: {
              model: rowGroupingModel,
            },
          }}
        />
      </div>
    </div>
  );
}

const rows = [
  {
    id: 1,
    transactionDate: '2024-05-15',
    ticker: 'AAPL',
    price: 192.45,
    volume: 5500,
    type: 'stock',
  },
];

IIUC the problem is that we are using groupingValueGetter() to generate the group key, but also it's value.
Since the requirement is that the key is string | number | null | undefined it can't be a Date which is a requirement for the date column.

We could return here
https://github.com/mui/mui-x/blob/v8.9.2/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts#L237
together with the key the formatted value as
value: apiRef.current.getRowFormattedValue(row, colDef),
and later use the key for the grouping path and the value for the actual value

WDYT?

cherniavskii · 2025-07-31T18:38:34Z

@arminmeh I'm not sure I understand your proposal, can you provide more details? Or feel free to push to this branch so we can give it a try

arminmeh · 2025-08-01T05:42:22Z

@arminmeh I'm not sure I understand your proposal, can you provide more details? Or feel free to push to this branch so we can give it a try

I've made an example here
#19005

it is still missing few pieces, but it covers the discussion here

I have updated the transactionDate field from my previous example to

{
  field: 'transactionDate',
  type: 'date',
  headerName: 'Transaction Date',
  width: 200,
  valueGetter: (value) => new Date(value),
  valueFormatter: (value: Date) => `F${value}`,
  groupingValueGetter: (value) => `G${value}`,
},

for easier testing.

Running this on master actually works now (valueFormatter is added), but it combines return values from both valueFormatter and groupingValueGetter to create the final content of the grouped field.

With the changes from the linked PR, the value from groupingValueGetter is only used to create a grouping key, but it is not displayed to the user - valueGetter and valueFormatter can be used for that.

The problem is that, even though we say that groupingValueGetter should be used to convert complex values to a valid grouping value, people are probably using it for the value formatting, which means that my update would probably break some apps.

We could either postpone this update for v9 or have another prop like getGroupingKey and deprecate groupingValueGetter

IMO the updated behavior is better, because you use the same props for formatting leafs and group rows

cherniavskii · 2025-08-01T18:42:15Z

@arminmeh It still throws an error if you change the grouping model to this:

const rowGroupingModel: GridRowGroupingModel = ['ticker', 'transactionDate'];

I think we need this change to solve it.

We could either postpone this update for v9 or have another prop like getGroupingKey and deprecate groupingValueGetter

How about adding optional groupingValueFormatter?

arminmeh · 2025-08-06T07:42:59Z

packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx

+      const rowId = gridRowIdSelector(apiRef, row);
+      const rowNode = gridRowNodeSelector(apiRef, rowId);
+      if (rowNode.type === 'group') {
+        const originalColDef = originalColDefs.get(rowNode.groupingField!)!;


Could this just be
columnsLookup[rowNode.groupingField]
so that you avoid building originalColDefs?

arminmeh · 2025-08-06T07:44:25Z

@arminmeh It still throws an error if you change the grouping model to this:
const rowGroupingModel: GridRowGroupingModel = ['ticker', 'transactionDate'];
I think we need this change to solve it.

We could either postpone this update for v9 or have another prop like getGroupingKey and deprecate groupingValueGetter

How about adding optional groupingValueFormatter?

Let's merge this one then to fix the user problem.
I will link this comment to the v9 discussion umbrella issue and we can see if the API needs to be updated in the next major

arminmeh

Still failing for
#18967 (comment)

arminmeh

Still failing for
#18967 (comment)

cherniavskii · 2025-08-26T14:17:51Z

docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.js

        field: 'composer',
        headerName: 'Composer',
        valueGetter: (value) => value.name,
-        groupingValueGetter: (value) => value.name,


@arminmeh
I think I fixed all use cases, but now the valueGetter is being called first, and the result is passed to groupingValueGetter (if provided). What do you think about this approach?

This might break for someone, but it's kindof a bugfix.

It could be confusing, since value can either be a value from the row or the return value from the column's valueGetter.

As mentioned before, the problem is that we are using groupingValueGetter() to generate the group key and the column value.
Since the requirement is that the key is string | number | null | undefined, it can't be a Date, which is a requirement for the date column.

So, we could update the default formatter
https://github.com/mui/mui-x/blob/v8.10.2/packages/x-data-grid/src/colDef/gridDateColDef.ts#L30
not to check for Date if the row is autogenerated.

not to check for Date if the row is autogenerated

Hmm, I'll try that

…ormatter

This reverts commit 8ac6f7b.

arminmeh · 2025-08-28T07:46:12Z

docs/data/data-grid/pivoting/GridPivotingFinancial.tsx

    headerName: 'Transaction Date',
    width: 140,
-    valueGetter: (value) => new Date(value),
-    groupingValueGetter: (value) => value,


Should we update the docs at https://mui.com/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value to state that Date is also allowed as a grouping value?

Done.
Also updated the demo for groupingValueGetter, because now groupingValueGetter is not necessary if you have valueGetter, unless you want to use a different value for grouping than the one in the cell.
https://deploy-preview-18967--material-ui-x.netlify.app/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value
WDYT?

Yes, that is a nice addition

arminmeh · 2025-08-28T07:47:02Z

packages/x-data-grid/src/colDef/gridDateColDef.ts

 import { renderEditDateCell } from '../components/cell/GridEditDateCell';
 import { gridRowIdSelector } from '../hooks/core/gridPropsSelectors';
+import { isAutogeneratedRow } from '../hooks/features/rows/gridRowsUtils';
+import { isGroupingColumn } from '../internals/utils/gridRowGroupingUtils';


I had to remove this check because the formatter gets the original column definition.
Checking for autogenerated row should be enough.

cherniavskii added 3 commits July 29, 2025 17:45

fix demos

544d820

add failing unit test

42d1edf

fix failing test

1136985

cherniavskii added type: bug It doesn't behave as expected. scope: data grid Changes related to the data grid. plan: Premium Impact at least one Premium user. feature: Row grouping Related to the data grid Row grouping feature labels Jul 29, 2025

cherniavskii added the feature: Pivoting Related to the data grid pivoting feature label Jul 29, 2025

cherniavskii commented Jul 29, 2025

View reviewed changes

cherniavskii marked this pull request as ready for review July 29, 2025 18:32

cherniavskii requested a review from arminmeh July 29, 2025 18:32

Merge branch 'master' into fix-rowGrouping-valueFormatter

a1b7290

arminmeh mentioned this pull request Aug 1, 2025

[test] Use groupingValueGetter to generate grouping key only #19005

Closed

arminmeh approved these changes Aug 6, 2025

View reviewed changes

arminmeh requested changes Aug 6, 2025

View reviewed changes

arminmeh mentioned this pull request Jul 31, 2025

[discussion] Preparing v9 #17846

Open

cherniavskii added 4 commits August 26, 2025 13:14

Merge branch 'master' into fix-rowGrouping-valueFormatter

83a6d8a

use columnsLookup directly

3280d42

call valueGetter before groupingValueGetter

8ac6f7b

remove unnecessary groupingValueGetter

0feb796

cherniavskii commented Aug 26, 2025

View reviewed changes

cherniavskii added 2 commits August 27, 2025 18:54

Merge remote-tracking branch 'mui/master' into fix-rowGrouping-valueF…

3f870f6

…ormatter

Revert "call valueGetter before groupingValueGetter"

a5dba6b

This reverts commit 8ac6f7b.

cherniavskii and others added 5 commits August 27, 2025 19:02

do not throw for non-Date values for group rows in the grouping column

ab4a886

empty

f7c69da

Merge branch 'master' into fix-rowGrouping-valueFormatter

75f18d8

fix import

ee8ce52

do not check the column field

b067218

arminmeh approved these changes Aug 28, 2025

View reviewed changes

cherniavskii added 2 commits August 28, 2025 12:06

update groupingValueGetter docs and demo

2d9d78d

update groupingValueSetter demo

4979c6e

arminmeh approved these changes Aug 28, 2025

View reviewed changes

cherniavskii merged commit 22f5b49 into mui:master Aug 28, 2025
21 checks passed

cherniavskii mentioned this pull request Sep 9, 2025

[data grid] Grid crashes when grouping by date column using valueGetter #18547

Closed

		// In single column grouping mode, the `valueFormatter` of the grouping column uses
		// value formatters from original columns for each of the grouping criteria

Uh oh!

[DataGridPremium] Fix valueFormatter issues when rowGroupingColumnMode="single" #18967

[DataGridPremium] Fix valueFormatter issues when rowGroupingColumnMode="single" #18967

Uh oh!

Conversation

cherniavskii commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arminmeh commented Jul 31, 2025

Uh oh!

cherniavskii commented Jul 31, 2025

Uh oh!

arminmeh commented Aug 1, 2025

Uh oh!

cherniavskii commented Aug 1, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arminmeh commented Aug 6, 2025

Uh oh!

arminmeh left a comment

Choose a reason for hiding this comment

Uh oh!

arminmeh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arminmeh Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[DataGridPremium] Fix `valueFormatter` issues when `rowGroupingColumnMode="single"` #18967

[DataGridPremium] Fix `valueFormatter` issues when `rowGroupingColumnMode="single"` #18967

cherniavskii commented Jul 29, 2025 •

edited

Loading

mui-bot commented Jul 29, 2025 •

edited

Loading

arminmeh Aug 28, 2025 •

edited

Loading