[DataGridPremium] Server-side pivoting

[arminmeh]

Closes #10861

Preview: https://deploy-preview-19575--material-ui-x.netlify.app/x/react-data-grid/server-side-data/pivoting/
Updated section at: https://deploy-preview-19575--material-ui-x.netlify.app/x/react-data-grid/server-side-data/aggregation/#usage-with-pivoting

[mui-bot]

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

Updated pages:

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

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+36B(+0.01%)	▼-2B(0.00%)
@mui/x-data-grid-pro	🔺+154B(+0.03%)	🔺+54B(+0.04%)
@mui/x-data-grid-premium	🔺+3.93KB(+0.62%)	🔺+1.36KB(+0.72%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-charts-premium	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against f4151e0

[mapache-salvaje]

docs review here - nicely done!

[github-actions]

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

[alelthomas]

Tiny tweaks—looking great!

[MBilalShafi]

Great work 👏

[MBilalShafi]

In this demo, adding anything to values in pivoting section breaks it as there are no default aggregation functions:

Screen.Recording.2025-10-07.at.17.44.45.mov

Should we disable pivoting configuration panel with data source unless the required props for pivoting to work are provided?

Or at least improve the error message a bit:

diff --git a/packages/x-data-grid-premium/src/components/pivotPanel/GridPivotPanelField.tsx b/packages/x-data-grid-premium/src/components/pivotPanel/GridPivotPanelField.tsx
index d0ed78ba3..76f60f721 100644
--- a/packages/x-data-grid-premium/src/components/pivotPanel/GridPivotPanelField.tsx
+++ b/packages/x-data-grid-premium/src/components/pivotPanel/GridPivotPanelField.tsx
@@ -183,6 +183,12 @@ function AggregationSelect({
     setAggregationMenuOpen(false);
   };
 
+  if (!aggFunc) {
+    throw new Error(
+      `Aggregation function \`${aggFunc}\` not found, please provide a valid aggregation function`,
+    );
+  }
+
   return (
     <React.Fragment>
       <rootProps.slots.baseChip

[arminmeh]

I don't think that there should be an error, probably just hide it and warn about this on the pivoting page
We do the same for the aggregations dropdown in the column menu.
"Manage pivoting" should also be hidden.

[arminmeh]

This can also happen without a data source if you override the default with an empty array.

[arminmeh]

I have fixed the panel from crashing.
I am thinking now, since this kind of error also occurs on other premium demos with the data source
For example
https://mui.com/x/react-data-grid/server-side-data/aggregation/
The first demo here crashes if you try to group rows, because the input params are not read correctly, and the data source is not configured for that scenario.

Instead of us covering all these cases, is it better to show demos with disabled features or data sources supporting the feature so that the user can decide what they want to implement?
Automatically hiding UI elements might be confusing for the users, and we may still miss some use cases (present or in the future).

@mui/xgrid should I create another docs issue to check all demos and adjust where necessary?

[arminmeh]

Created #19849 to cover other cases
Implemented the same for the demos that were part of this PR in 0cf8fc3 (#19575)

[arminmeh]

I will merge the PR with these changes to have it ready for the release.
If needed, this can be changed in a different PR, since it is not an issue that originated with this feature.