[DataGridPremium] Server-side data source with row grouping #13826

MBilalShafi · 2024-07-15T03:52:15Z

👨‍💻 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

Follow-ups:

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

mui-bot · 2024-07-15T03:55:52Z

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

Updated pages:

Generated by 🚫 dangerJS against 10747b1

tommy-wl · 2024-07-18T14:46:33Z

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

MBilalShafi · 2024-07-18T21:10:58Z

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.

packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx

packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx

packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx

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

docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.js

cherniavskii · 2024-10-24T11:33:56Z

packages/x-data-grid/src/components/cell/GridBooleanCell.tsx

+  if (value === undefined) {
+    return null;
+  }


Not sure we should do this now, it's a breaking change (currently, undefined value is treated as false)

I added it to avoid this:

For client-side row grouping we have a concept of autogenerated group nodes and we handle it like this:

mui-x/packages/x-data-grid/src/components/cell/GridBooleanCell.tsx

Lines 145 to 147 in ab4823d

if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) {

return '';

}

In server-side row grouping, all the rows are regular group rows and not marked as auto generated, so the above check doesn't work. Did a hacky'ish solution, let me know how does it feel.

joserodolfofreitas

Solid feature! Great work!

joserodolfofreitas · 2024-10-24T16:01:08Z

docs/data/data-grid/row-grouping/row-grouping.md

@@ -252,6 +256,10 @@ Use the `setRowChildrenExpansion` method on `apiRef` to programmatically set the

 {{"demo": "RowGroupingSetChildrenExpansion.js", "bg": "inline", "defaultCodeOpen": false}}

+:::warning
+The `apiRef.current.setRowChildrenExpansion` method is not compatible with the [server-side tree data](/x/react-data-grid/server-side-data/tree-data/) and [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/). Use `apiRef.current.unstable_dataSource.fetchRows` instead.


Curious, why it is not compatible? Could it call the data source to apply the behavior or is there a strong feasibility blocker?
(Question applies to both get and set methods)

Data source changes a bit how expansion works.
When the user expands a row, fetchRows is called, which fetches the rows internally and only on success it calls setRowChildrenExpansion internally which only updates the isExpanded state of the respective rowNode.

If the user tries to call setRowChildrenExpansion there will be no rows to show, only the expand icon will shift to expanded form, thus setRowChildrenExpansion is no longer recommended to use with the data source.

Good point @joserodolfofreitas
@MBilalShafi Couldn't we potentially update setRowChildrenExpansion to fetch rows if the data source is being used?

I missed the conversation here.
Should we create an issue to make these approaches compatible?

Couldn't we potentially update setRowChildrenExpansion to fetch rows if the data source is being used?

@cherniavskii We certainly could. Mostly a DX decision. It hasn't been done in the current implementation because setRowChildrenExpansion sounds like (or anticipated as) a state setter (or a pure function), hiding the fetch part behind would be less aligned with a user's expectation as it will now have 3 possible outcomes.

Set the state right away (no data source)

Set the state after some time (waiting time of the BE API)

Never set the state (fetching failed)

Using it from within fetchRows makes sense if it's understood to be only responsible for 1, or we may have to change its current perception.

What do you think?

Co-authored-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>

docs/data/data-grid/row-grouping/row-grouping.md

tommy-wl · 2024-10-25T14:06:21Z

@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 · 2024-10-25T15:17:56Z

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.

[DataGridPremium] Server-side row grouping

ac19bcd

Lint

b83928f

MBilalShafi changed the title ~~[DataGridPremium] Server-side row grouping~~ [DataGridPremium] Server-side data source with row grouping Jul 22, 2024

MBilalShafi added the feature: data source label Jul 22, 2024

MBilalShafi mentioned this pull request Aug 15, 2024

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

Closed

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 22, 2024

This comment was marked as outdated.

Sign in to view

MBilalShafi added 2 commits September 4, 2024 14:52

Merge branch 'master' into datasource-row-grouping

222da23

Adjust according to the changes done on master

d8b762b

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 4, 2024

MBilalShafi added 12 commits September 6, 2024 15:35

Support sort and filter on normal non-grouping columns

26ed96e

Merge branch 'master' into datasource-row-grouping

bb06da1

Update documentation

ad92678

Update tag

02d1ab3

Docs update

342594a

Merge branch 'master' into datasource-row-grouping

435ecdf

Add support for groupingValueGetter

5d4220d

Merge branch 'master' into datasource-row-grouping

58daf43

Typo

d1712de

Support rows with missing groups on mock server

66ab0c8

Fix argos' regression

f072523

Lint

7580c46

arminmeh reviewed Oct 14, 2024

View reviewed changes

packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx Show resolved Hide resolved

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 16, 2024

This comment was marked as outdated.

Sign in to view

Merge branch 'master' into datasource-row-grouping

6ee149a

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 17, 2024

romgrk reviewed Oct 17, 2024

View reviewed changes

packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx Outdated Show resolved Hide resolved

romgrk reviewed Oct 17, 2024

View reviewed changes

packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx Outdated Show resolved Hide resolved

Use enums

ba0ab94

MBilalShafi force-pushed the datasource-row-grouping branch from 7b7576f to ba0ab94 Compare October 18, 2024 11:26

arminmeh approved these changes Oct 21, 2024

View reviewed changes

MBilalShafi added 2 commits October 21, 2024 18:24

Merge branch 'master' into datasource-row-grouping

d685bb4

Adjust as per mui#15013

7491df5

cherniavskii reviewed Oct 24, 2024

View reviewed changes

docs/data/data-grid/server-side-data/row-grouping.md Show resolved Hide resolved

MBilalShafi added the needs cherry-pick The PR should be cherry-picked to master after merge label Oct 24, 2024

Reduce row size in the commodity demo

d849c38

cherniavskii reviewed Oct 24, 2024

View reviewed changes

docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.js Show resolved Hide resolved

cherniavskii reviewed Oct 24, 2024

View reviewed changes

Allow grouping number fields

1b5bd36

cherniavskii approved these changes Oct 24, 2024

View reviewed changes

MBilalShafi mentioned this pull request Oct 24, 2024

[data grid] Set up a back end server with database to be used with the server side data examples #15098

Open

joserodolfofreitas approved these changes Oct 24, 2024

View reviewed changes

Remove the breaking change

10747b1

MBilalShafi merged commit ae72b8c into mui:master Oct 25, 2024
15 of 16 checks passed

MBilalShafi deleted the datasource-row-grouping branch October 25, 2024 07:37

github-actions bot pushed a commit that referenced this pull request Oct 25, 2024

[DataGridPremium] Server-side data source with row grouping (#13826)

bbe0324

Co-authored-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>

github-actions bot mentioned this pull request Oct 25, 2024

[DataGridPremium] Server-side data source with row grouping (@MBilalShafi) #15109

Merged

1 task

arminmeh mentioned this pull request Oct 25, 2024

v7.22.0 #15103

Merged

cherniavskii reviewed Oct 25, 2024

View reviewed changes

docs/data/data-grid/row-grouping/row-grouping.md Show resolved Hide resolved

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGridPremium] Server-side data source with row grouping #13826

[DataGridPremium] Server-side data source with row grouping #13826

MBilalShafi commented Jul 15, 2024 •

edited

Loading

mui-bot commented Jul 15, 2024 •

edited

Loading

tommy-wl commented Jul 18, 2024

MBilalShafi commented Jul 18, 2024

This comment was marked as outdated.

This comment was marked as outdated.

cherniavskii Oct 24, 2024

MBilalShafi Oct 24, 2024 •

edited

Loading

joserodolfofreitas left a comment

joserodolfofreitas Oct 24, 2024

MBilalShafi Oct 24, 2024

cherniavskii Oct 25, 2024

joserodolfofreitas Oct 29, 2024

MBilalShafi Oct 29, 2024 •

edited

Loading

tommy-wl commented Oct 25, 2024 •

edited

Loading

MBilalShafi commented Oct 25, 2024

	if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) {
	return '';
	}

[DataGridPremium] Server-side data source with row grouping #13826

[DataGridPremium] Server-side data source with row grouping #13826

Conversation

MBilalShafi commented Jul 15, 2024 • edited Loading

Action items

Follow-ups:

mui-bot commented Jul 15, 2024 • edited Loading

tommy-wl commented Jul 18, 2024

MBilalShafi commented Jul 18, 2024

This comment was marked as outdated.

This comment was marked as outdated.

cherniavskii Oct 24, 2024

Choose a reason for hiding this comment

MBilalShafi Oct 24, 2024 • edited Loading

Choose a reason for hiding this comment

joserodolfofreitas left a comment

Choose a reason for hiding this comment

joserodolfofreitas Oct 24, 2024

Choose a reason for hiding this comment

MBilalShafi Oct 24, 2024

Choose a reason for hiding this comment

cherniavskii Oct 25, 2024

Choose a reason for hiding this comment

joserodolfofreitas Oct 29, 2024

Choose a reason for hiding this comment

MBilalShafi Oct 29, 2024 • edited Loading

Choose a reason for hiding this comment

tommy-wl commented Oct 25, 2024 • edited Loading

MBilalShafi commented Oct 25, 2024

MBilalShafi commented Jul 15, 2024 •

edited

Loading

mui-bot commented Jul 15, 2024 •

edited

Loading

MBilalShafi Oct 24, 2024 •

edited

Loading

MBilalShafi Oct 29, 2024 •

edited

Loading

tommy-wl commented Oct 25, 2024 •

edited

Loading