Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
stivluc opened this issue Oct 24, 2024 · 6 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! support: commercial Support request from paid users support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ support: question Community support but can be turned into an improvement

Comments

@stivluc
Copy link

stivluc commented Oct 24, 2024

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.

image

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

@stivluc stivluc added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: commercial Support request from paid users labels Oct 24, 2024
@github-actions github-actions bot added component: data grid This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ labels Oct 24, 2024
@KenanYusuf KenanYusuf changed the title [question] In grouped rows: How to determine value based on other columns' values [data grid] In grouped rows: How to determine value based on other columns' values Oct 24, 2024
@KenanYusuf KenanYusuf added the support: question Community support but can be turned into an improvement label Oct 24, 2024
@KenanYusuf
Copy link
Member

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.

@KenanYusuf KenanYusuf added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 24, 2024
@stivluc
Copy link
Author

stivluc commented Oct 24, 2024

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!

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Oct 24, 2024
@KenanYusuf
Copy link
Member

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

@KenanYusuf KenanYusuf added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 24, 2024
@stivluc
Copy link
Author

stivluc commented Oct 25, 2024

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

@stivluc stivluc closed this as completed Oct 25, 2024
@github-actions github-actions bot removed the status: waiting for author Issue with insufficient information label Oct 25, 2024
Copy link

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! support: commercial Support request from paid users support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ support: question Community support but can be turned into an improvement
Projects
None yet
Development

No branches or pull requests

2 participants