[data grid] In grouped rows: How to determine value based on other columns' values

[stivluc]

The problem in depth

For some columns of my datagrid, the value depends on other columns' values, using
valueGetter: (params) => params.row.quantity / params.row.total

I need to calculate those values also on grouped row.

Current behavior: params.row.XXX returns undefined on grouped row

For the grouped rows, we can currently only display aggregations like sum, avg, etc. But an avg of progresses for example is totaly wrong because it depends on the sum of quantities.

Example here:
Progress for 10/25/2024 should be (15,936 - 3384 - 567) / 15936 = 75% but it currently displays an average of the sums.

It should display the value according to the three columns right of it.

Your environment

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 22.8.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD  
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.98)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.13.3
    @emotion/styled: ^11.10.6 => 11.13.0
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.16.7
    @mui/icons-material: ^5.11.16 => 5.16.7
    @mui/lab: ^5.0.0-alpha.126 => 5.0.0-alpha.173
    @mui/material: ^5.12.0 => 5.16.7
    @mui/private-theming:  5.16.6
    @mui/styled-engine:  5.16.6
    @mui/system:  5.16.7
    @mui/types:  7.2.15
    @mui/utils:  5.16.6
    @mui/x-data-grid:  6.20.4
    @mui/x-data-grid-premium: ^6.19.6 => 6.20.4
    @mui/x-data-grid-pro:  6.20.4
    @mui/x-date-pickers: ^6.18.2 => 6.20.2
    @mui/x-date-pickers-pro: ^6.19.5 => 6.20.2
    @mui/x-license-pro:  6.10.2
    @types/react:  18.3.4
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript:  5.6.3

Search keywords: Grouped row aggregations
Order ID: 80196

[KenanYusuf]

Hey @stivluc please could you provide a minimal reproduction of your example? I have an idea for how to solve it with renderCell but it would be useful to have an example with some sample data to work with.

[stivluc]

Hi, thanks for your help and sorry for lack of info.

So my API send data in this format:

[ { "CODACT": "MAT", "DATLIV": 20241024, "CIRPIC": "MAT", "SUPPORTS": 30, "TOTAL": 1797, "PREPARES": 1797, "RESTANTS": 0 }, { "CODACT": "PIC", "DATLIV": 20241024, "CIRPIC": "ETQ", "SUPPORTS": 5, "TOTAL": 107, "PREPARES": 107, "RESTANTS": 0 }, { "CODACT": "PIC", "DATLIV": 20241024, "CIRPIC": "PEX", "SUPPORTS": 5, "TOTAL": 5, "PREPARES": 5, "RESTANTS": 0 }, { "CODACT": "PIC", "DATLIV": 20241024, "CIRPIC": "PIC", "SUPPORTS": 324, "TOTAL": 10920, "PREPARES": 10920, "RESTANTS": 0 }, { "CODACT": "ALD", "DATLIV": 20241025, "CIRPIC": "ALB", "SUPPORTS": 118, "TOTAL": 2608, "PREPARES": 2608, "RESTANTS": 0 } ]

In my DataGrid, rows are always grouped by DATLIV and CODACT.
I have a field in my columns definition which is "PROGRESS" which is actually (PREPARES / TOTAL) * 100.
As my DataGrid is always grouped by default, I wanna show this progress also on grouped rows. But params.row is undefined on grouped rows.

Here is my column definition:
{ field: 'CODACT', headerName: 'Activité', flex: 1, renderCell: (params) => <Activite codact={params.value} />, }, { field: 'DATLIV', headerName: 'Date liv.', flex: 1, type: 'date', valueGetter: (params) => convertDateWMStoDate(params.value), renderCell: (params) => <Calendar value={params.value} />, }, { field: 'CIRPIC', headerName: 'Circuit', flex: 0.75, renderCell: (params) => <Cirpic value={params.value} /> }, { field: 'PROGRESS', headerName: 'Progression', flex: 1.25, type: 'number', align: 'center', headerAlign: 'center', valueGetter: (params) => Math.round((params.row.PREPARES / params.row.TOTAL) * 100) / 100 renderCell: (params) => params.id !== 'auto-generated-group-footer-root' && <ProgressBar value={parseInt(params.value ?? 0)} />, }, { field: 'RESTANTS', headerName: 'Restants', flex: 1, type: 'number', valueGetter: (params) => Math.round(params.value), renderCell: (params) => (params.value > 0 ? params.value?.toLocaleString() : null), }

I can't have the desired result and have to use one of the default aggregations for example average to calculate the progress, which isn't accurate. Thanks for your help!

[KenanYusuf]

@stivluc does this do what you're looking to achieve? https://codesandbox.io/p/sandbox/15083-row-group-derived-aggregation-cd8cx3

[stivluc]

It does!! Thanks a lot for your help I'll have to study this as it will be very useful all accross my app.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@stivluc How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[KenanYusuf]

Glad to hear it @stivluc - let me know if you have any follow up questions.