[data grid] Override the descendant count for row-grouping="multiple"

[VigneshwaranJheyaraman]

The problem in depth

I represent Comcast, we recently upgraded from DataGridPro plan to DataGridPremium plan for our requirement to use row-grouping functionality. While development, we came across few questions which we require clarification for:

Preface Our row-grouping-model is multiple which supports multiple fields grouping, We came to find that row-grouping isn't supported for filterMode=server (or) sortModel=server which we currently make use of. Kindly help us resolve these questions

1. How to override the descendantCount since row-grouping is purely client-side we have a requirement to show the total count instead of count which data-grid has. For example we paginate the response out of which total-count is the entire records count and page-size can be 20. So how can I display the total-count in place of 20?

2. How can I display N number of records given N the page-size, instead of total-number of rows. For example I have 500 records with row-grouping which has 10 groups. Now if page-size is 25 I want to show all 10 groups instead of 50 records

Your environment

`npx @mui/envinfo`

``` System: OS: macOS 14.3.1 Binaries: Node: 20.11.1 - /opt/nvm/versions/node/v20.11.1/bin/node npm: 10.2.4 - /opt/nvm/versions/node/v20.11.1/bin/npm pnpm: 8.15.6 - /opt/nvm/versions/node/v20.11.1/bin/pnpm Browsers: Chrome: 127.0.6533.100 Edge: Not Found Safari: 17.3.1 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.26 @mui/core-downloads-tracker: 5.15.20 @mui/icons-material: ^5.14.18 => 5.14.19 @mui/lab: ^5.0.0-alpha.147 => 5.0.0-alpha.155 @mui/material: ^5.14.18 => 5.15.20 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/styles: ^5.14.18 => 5.14.20 @mui/system: 5.15.20 @mui/types: 7.2.14 @mui/utils: 5.15.20 @mui/x-data-grid: 6.20.4 @mui/x-data-grid-premium: ^6.18.2 => 6.20.4 @mui/x-data-grid-pro: ^6.18.2 => 6.20.4 @mui/x-date-pickers: ^5.0.12 => 5.0.20 @mui/x-license-pro: 6.10.2 @mui/x-tree-view: ^6.0.0-beta.0 => 6.0.0-beta.0 @types/react: 18.2.42 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 ```

Search keywords: descebdant count + row-grouping + multiple Order ID: 92254

[michelengelen]

@MBilalShafi could you have a look here? Thanks! 🙇🏼

[MBilalShafi]

Hey @VigneshwaranJheyaraman,

We came to find that row-grouping isn't supported for filterMode=server (or) sortModel=server which we currently make use of.

You are right, the server-side implementation of row grouping is currently in progress and should be shipped soon.

How to override the descendantCount since row-grouping is purely client-side we have a requirement to show the total count instead of count which data-grid has. For example we paginate the response out of which total-count is the entire records count and page-size can be 20. So how can I display the total-count in place of 20?

Would you mind expanding on it a bit? By descendantCount, do you mean the count shown in each grouped row or the total count shown in the footer? Could you mark it in this documentation example?

How can I display N number of records given N the page-size, instead of total-number of rows. For example I have 500 records with row-grouping which has 10 groups. Now if page-size is 25 I want to show all 10 groups instead of 50 records

If I understand correctly, this request corresponds more to this recipe: https://mui.com/x/react-data-grid/recipes-row-grouping/#dispaying-child-row-count-in-footer

Could you confirm if that's the case or elaborate more if not?

Thank you!

[VigneshwaranJheyaraman]

@MBilalShafi

If I understand correctly, this request corresponds more to this recipe: https://mui.com/x/react-data-grid/recipes-row-grouping/#dispaying-child-row-count-in-footer

This really helps will have a look into it

Would you mind expanding on it a bit? By descendantCount, do you mean the count shown in each grouped row or the total count shown in the footer? Could you mark it in this documentation example?

I want to modify the count of descendants displayed next to row-grouped-column, For example in the same recipe you share _if there are totally 50 Warner Bro's films but with pagination I only show 25 I want the count to be 50 near Warner Bros. Picture not 25_

[MBilalShafi]

I want to modify the count of descendants displayed next to row-grouped-column, For example in the same recipe you share if there are totally 50 Warner Bro's films but with pagination I only show 25 I want the count to be 50 near Warner Bros. Picture not 25

Thank you @VigneshwaranJheyaraman for the clarification.

Until we have the server-side row grouping officially shipped, you could use a workaround by providing a custom grouping cell using groupingColDef.renderCell. Here's an example originally done by @michelengelen which customizes the grouping cell: https://codesandbox.io/p/sandbox/laughing-currying-3x7fgy

You can modify it as you want, by adding a custom descendantCount based on what you fetch from the server.

Let me know if it solves your concern.

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.