[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

• Add support for groupingValueGetter
• Support row grouping features on useMockServer:
  • Sorting
  • Filtering
  • Pagination
  • Support more datasets
• Rows with missing groups
• Fix Argos' regression
• 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 🚫 dangerJS against 10747b1

[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.

[cherniavskii]

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

[MBilalShafi]

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]

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)

[MBilalShafi]

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.

[cherniavskii]

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

[joserodolfofreitas]

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

[MBilalShafi]

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.

1. Set the state right away (no data source)
2. Set the state after some time (waiting time of the BE API)
3. 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?

[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.