[DataGridPremium] Server-side data source with row grouping

[MBilalShafi]

👨‍💻 Ready for Review 👨‍💻

Part of #8179 Resolves #10859

Preview: https://deploy-preview-13826--material-ui-x.netlify.app/x/react-data-grid/server-side-data/row-grouping/

Action items

• [x] Add support for groupingValueGetter
• [x] Support row grouping features on useMockServer:
  • [x] Sorting
  • [x] Filtering
  • [x] Pagination
  • [x] Support more datasets
• [x] Rows with missing groups
• [x] Fix Argos' regression
• [x] Add/refine documentation

Follow-ups:

• [ ] Support sort and filter on the Group column(s) for row grouping and tree data
• [ ] Test coverage

[mui-bot]

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

Updated pages:

• docs/data/data-grid/row-grouping/row-grouping.md
• docs/data/data-grid/server-side-data/row-grouping.md
• docs/data/data-grid/server-side-data/tree-data.md

Generated by :no_entry_sign: dangerJS against 10747b1958906d5d7e88ea72de046bf8656b0ca0

[tommy-wl]

Hi @MBilalShafi, are you able to provide an ETA for this? Thank you!

[MBilalShafi]

Hey @tommy-wl, thank you for reaching out.

The ETA for this feature is around the end of Q3, its currently one of the main focus areas for the team. Feel free to test the under development feature and provide some early feedback if you want.

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[forwardslahsdotj]

@MBilalShafi Looking for an update on this or an ETA. Premium customer - Support ID: 96081

[MBilalShafi]

@forwardslahsdotj

The goal is to deliver the feature by around Q3 end, though it depends on how fast the closure of remaining action items and the code review process takes. I hope it gets closed before the v8 pre-release phase, which starts sometime in October.

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[tommy-wl]

@MBilalShafi great work! Super excited to start using this feature as soon as it is released!

Quick question: just to confirm, does this work grouping multiple columns at the same time as well? https://mui.com/x/react-data-grid/row-grouping/#multiple-grouping-columns

Thanks

Premium customer - Support ID: 96081

[MBilalShafi]

Hey @tommy-wl,

just to confirm, does this work grouping multiple columns at the same time as well? mui.com/x/react-data-grid/row-grouping#multiple-grouping-columns

Yes, single column and multiple column grouping both should work with this feature.

[tommy-wl]

Hi @MBilalShafi

Server side row grouping was fine on MUI Data Grid v7 (Grouping on single and multiple columns).

Upon upgrading to v8 (8.5.2 -- also tried 8.0.0), the following was observed:

Multiple is the first level grouping.

When clicking on it to expand, the second level groups do appear (Ahmed, Client Anastasia and Guest).

However:

• Second level groups are not indented (Issue 1)
• First level group clicked is not expanded (chevron is still pointing to the right) (Issue 2)

Clicking the first level group Multiple again correctly shows the expanded state (chevron down) and indent for second level groups.

When trying to click and expand other first level groups, the following error appears (Issue 3):

Uncaught TypeError: Cannot read properties of undefined (reading 'depth')
    at gridFilterSelector.js:92:39
    at Array.reduce (<anonymous>)
    at gridFilterSelector.js:90:30
    at recomputationWrapper (createSelectorCreator.ts:392:63)
    at memoized (lruMemoize.ts:217:20)
    at dependenciesChecker (createSelectorCreator.ts:412:39)
    at memoized (weakMapMemoize.js:100:21)
    at Object.selector (createSelector.js:82:14)
    at useGridSelector.js:59:37
    at Store.js:19:35

These issues never occurred on v7.

Please advise.

Thank you.

Premium customer - Support ID: 96081

[michelengelen]

Hi @MBilalShafi

Server side row grouping was fine on MUI Data Grid v7 (Grouping on single and multiple columns).

Upon upgrading to v8 (8.5.2 -- also tried 8.0.0), the following was observed:

Multiple is the first level grouping.

When clicking on it to expand, the second level groups do appear (Ahmed, Client Anastasia and Guest).

However:

• Second level groups are not indented (Issue 1)
• First level group clicked is not expanded (chevron is still pointing to the right) (Issue 2)

Clicking the first level group Multiple again correctly shows the expanded state (chevron down) and indent for second level groups.

When trying to click and expand other first level groups, the following error appears (Issue 3):

Uncaught TypeError: Cannot read properties of undefined (reading 'depth')
    at gridFilterSelector.js:92:39
    at Array.reduce (<anonymous>)
    at gridFilterSelector.js:90:30
    at recomputationWrapper (createSelectorCreator.ts:392:63)
    at memoized (lruMemoize.ts:217:20)
    at dependenciesChecker (createSelectorCreator.ts:412:39)
    at memoized (weakMapMemoize.js:100:21)
    at Object.selector (createSelector.js:82:14)
    at useGridSelector.js:59:37
    at Store.js:19:35

These issues never occurred on v7.

Please advise.

Thank you.

Premium customer - Support ID: 96081

Hey @tommy-wl could you please open a new issue with this information? And please include a minimal reproduction of the bug we can look at.