[DataGridPremium] Server-side aggregation with data source (#15741)

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

docs/data/data-grid/aggregation/aggregation.md

@@ -12,6 +12,10 @@ The aggregated values are rendered in a footer row at the bottom of the Data Gri
 
 {{"demo": "AggregationInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
 
+:::info
+If you're looking for aggregation on the server side, see [Server-side data—Aggregation](/x/react-data-grid/server-side-data/aggregation/).
+:::
+
 ## Pass aggregation to the Data Grid
 
 ### Structure of the model

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const aggregationFunctions = {
+  sum: { columnTypes: ['number'] },
+  avg: { columnTypes: ['number'] },
+  min: { columnTypes: ['number', 'date', 'dateTime'] },
+  max: { columnTypes: ['number', 'date', 'dateTime'] },
+  size: {},
+};
+
+export default function ServerSideDataGridAggregation() {
+  const { columns, initialState, fetchRows } = useMockServer(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const dataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          paginationModel: JSON.stringify(params.paginationModel),
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          aggregationModel: JSON.stringify(params.aggregationModel),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+          aggregateRow: getRowsResponse.aggregateRow,
+        };
+      },
+      getAggregatedValue: (row, field) => {
+        return row[`${field}Aggregate`];
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+      aggregation: {
+        model: { commodity: 'size', quantity: 'sum' },
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPremium
+        columns={columns}
+        unstable_dataSource={dataSource}
+        pagination
+        initialState={initialStateWithPagination}
+        pageSizeOptions={[10, 20, 50]}
+        aggregationFunctions={aggregationFunctions}
+      />
+    </div>
+  );
+}

docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const aggregationFunctions = {
+  sum: { columnTypes: ['number'] },
+  avg: { columnTypes: ['number'] },
+  min: { columnTypes: ['number', 'date', 'dateTime'] },
+  max: { columnTypes: ['number', 'date', 'dateTime'] },
+  size: {},
+};
+
+export default function ServerSideDataGridAggregation() {
+  const { columns, initialState, fetchRows } = useMockServer(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const dataSource: GridDataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          paginationModel: JSON.stringify(params.paginationModel),
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          aggregationModel: JSON.stringify(params.aggregationModel),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+          aggregateRow: getRowsResponse.aggregateRow,
+        };
+      },
+      getAggregatedValue: (row, field) => {
+        return row[`${field}Aggregate`];
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+      aggregation: {
+        model: { commodity: 'size', quantity: 'sum' },
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPremium
+        columns={columns}
+        unstable_dataSource={dataSource}
+        pagination
+        initialState={initialStateWithPagination}
+        pageSizeOptions={[10, 20, 50]}
+        aggregationFunctions={aggregationFunctions}
+      />
+    </div>
+  );
+}

docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPremium
+  columns={columns}
+  unstable_dataSource={dataSource}
+  pagination
+  initialState={initialStateWithPagination}
+  pageSizeOptions={[10, 20, 50]}
+  aggregationFunctions={aggregationFunctions}
+/>

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

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const aggregationFunctions = {
+  sum: { columnTypes: ['number'] },
+  avg: { columnTypes: ['number'] },
+  min: { columnTypes: ['number', 'date', 'dateTime'] },
+  max: { columnTypes: ['number', 'date', 'dateTime'] },
+  size: {},
+};
+
+export default function ServerSideDataGridAggregationLazyLoading() {
+  const {
+    columns,
+    initialState: initState,
+    fetchRows,
+  } = useMockServer({}, { useCursorPagination: false });
+
+  const dataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          aggregationModel: JSON.stringify(params.aggregationModel),
+          start: `${params.start}`,
+          end: `${params.end}`,
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+          aggregateRow: getRowsResponse.aggregateRow,
+        };
+      },
+      getAggregatedValue: (row, field) => {
+        return row[`${field}Aggregate`];
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialState = React.useMemo(
+    () => ({
+      ...initState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+      aggregation: {
+        model: { commodity: 'size', quantity: 'sum' },
+      },
+    }),
+    [initState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPremium
+        columns={columns}
+        unstable_dataSource={dataSource}
+        initialState={initialState}
+        unstable_lazyLoading
+        aggregationFunctions={aggregationFunctions}
+      />
+    </div>
+  );
+}

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const aggregationFunctions = {
+  sum: { columnTypes: ['number'] },
+  avg: { columnTypes: ['number'] },
+  min: { columnTypes: ['number', 'date', 'dateTime'] },
+  max: { columnTypes: ['number', 'date', 'dateTime'] },
+  size: {},
+};
+
+export default function ServerSideDataGridAggregationLazyLoading() {
+  const {
+    columns,
+    initialState: initState,
+    fetchRows,
+  } = useMockServer({}, { useCursorPagination: false });
+
+  const dataSource: GridDataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          aggregationModel: JSON.stringify(params.aggregationModel),
+          start: `${params.start}`,
+          end: `${params.end}`,
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+          aggregateRow: getRowsResponse.aggregateRow,
+        };
+      },
+      getAggregatedValue: (row, field) => {
+        return row[`${field}Aggregate`];
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialState = React.useMemo(
+    () => ({
+      ...initState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+      aggregation: {
+        model: { commodity: 'size', quantity: 'sum' },
+      },
+    }),
+    [initState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPremium
+        columns={columns}
+        unstable_dataSource={dataSource}
+        initialState={initialState}
+        unstable_lazyLoading
+        aggregationFunctions={aggregationFunctions}
+      />
+    </div>
+  );
+}

docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.tsx.preview

@@ -0,0 +1,7 @@
+<DataGridPremium
+  columns={columns}
+  unstable_dataSource={dataSource}
+  initialState={initialState}
+  unstable_lazyLoading
+  aggregationFunctions={aggregationFunctions}
+/>

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useKeepGroupedColumnsHidden,
+  useGridApiRef,
+} from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const aggregationFunctions = {
+  sum: { columnTypes: ['number'] },
+  avg: { columnTypes: ['number'] },
+  min: { columnTypes: ['number', 'date', 'dateTime'] },
+  max: { columnTypes: ['number', 'date', 'dateTime'] },
+  size: {},
+};
+
+export default function ServerSideDataGridAggregationRowGrouping() {
+  const apiRef = useGridApiRef();
+  const {
+    columns,
+    initialState: initState,
+    fetchRows,
+  } = useMockServer({ rowGrouping: true });
+
+  const dataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          paginationModel: JSON.stringify(params.paginationModel),
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          groupKeys: JSON.stringify(params.groupKeys),
+          groupFields: JSON.stringify(params.groupFields),
+          aggregationModel: JSON.stringify(params.aggregationModel),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+          aggregateRow: getRowsResponse.aggregateRow,
+        };
+      },
+      getGroupKey: (row) => row.group,
+      getChildrenCount: (row) => row.descendantCount,
+      getAggregatedValue: (row, field) => row[`${field}Aggregate`],
+    }),
+    [fetchRows],
+  );
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      ...initState,
+      rowGrouping: {
+        model: ['company', 'director'],
+      },
+      aggregation: {
+        model: { title: 'size', gross: 'sum', year: 'max' },
+      },
+    },
+  });
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPremium
+        apiRef={apiRef}
+        columns={columns}
+        unstable_dataSource={dataSource}
+        initialState={initialState}
+        aggregationFunctions={aggregationFunctions}
+      />
+    </div>
+  );
+}