`DataGridPremium` with row grouping and `valueGetter` doesn't show `valueGetter` value

[WiXSL]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/dreamy-bush-jl4ulj?file=/src/components/Table1.jsx

Current behavior 😯

The text on the User name group is the value of the userName field (plus the group count)

Expected behavior 🤔

The text on the User name group is the value returned by userName's valueGetter function (plus the group count)

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Order ID 💳 (optional)

No response

[MBilalShafi]

Can you explain more about what you want to achieve?

If I understand your intention right, you want to customize the grouping column cell value, to customize anything related to the grouping column you can use the groupingColDef prop, see this demo for an example.

Note that in groupingColDef.valueGetter params, you will not receive row values as it refers to the grouping row and not the child rows, if you want to show a field or custom value as leaf though, you can use groupingColDef.leafField as mentioned here.

<DataGrid
  groupingColDef={{
    valueGetter: (params) => {
      console.log(params.row); // {}
      return `Custom value`;
    },
    leafField: "userName"
  }}
/>

I've also added groupingColDef.leafField and groupingColDef.valueGetter to this codesandbox to visualize.

[WiXSL]

Hi @MBilalShafi, Thanks for taking the time to look into this.

Yes, I want to set the leaf cell value to the userName field. Since I'm only grouping by userName field, and userName has a valueGetter set, I would expect the valueGetter to be used for the leaf cell. Using leaffield: "userName" doesn't make use of the valueGetter either.

I tried using params.api inside of groupingColDef.valueGetter but I couldn't have access to the fields values. I don't know if this can be achieved, maybe this issue could be set as a feature request instead of a bug.

[MBilalShafi]

Using leaffield: "userName" doesn't make use of the valueGetter either.

I can see the same value getter set for userName being used for leaf field in this codesandbox, can you check if that is what you are trying to achieve?

Note that the leafField is rendering userName column as value so its using the colDef.valueGetter of field: userName, not groupingColDef as shown in image above.

[WiXSL]

Ok, I wasn't clear about what I want to achieve. What I want is not the leaf cell to be set, but the group cell. Something like this:

And I found that I can use this in the column definition:

groupingValueGetter: (params) => {
    return `${params.row.id}, ${params.row.userName}`;
},

Sorry for the time spent. I thank you again for your help. I'm closing this issue since this is clearly not a bug