[data grid] Implement Aggregation (#4208)

docs/data/data-grid/aggregation/AggregationColDefAggregable.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS = [
+  {
+    field: 'title',
+    headerName: 'Title',
+    width: 200,
+    groupable: false,
+    private_aggregable: false,
+  },
+  {
+    field: 'gross',
+    headerName: 'Gross',
+    type: 'number',
+    width: 150,
+    groupable: false,
+    valueFormatter: ({ value }) => {
+      if (!value) {
+        return value;
+      }
+      return currencyFormatter.format(value);
+    },
+  },
+  {
+    field: 'year',
+    headerName: 'Year',
+    type: 'number',
+    private_aggregable: false,
+  },
+];
+
+export default function AggregationColDefAggregable() {
+  const data = useMovieData();
+
+  return (
+    <DataGridPremium
+      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
+      rows={data.rows.slice(0, 3)}
+      autoHeight
+      columns={COLUMNS}
+      initialState={{
+        private_aggregation: {
+          model: {
+            gross: 'sum',
+            year: 'sum',
+          },
+        },
+      }}
+      experimentalFeatures={{
+        private_aggregation: true,
+      }}
+    />
+  );
+}

docs/data/data-grid/aggregation/AggregationColDefAggregable.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: GridColDef[] = [
+  {
+    field: 'title',
+    headerName: 'Title',
+    width: 200,
+    groupable: false,
+    private_aggregable: false,
+  },
+  {
+    field: 'gross',
+    headerName: 'Gross',
+    type: 'number',
+    width: 150,
+    groupable: false,
+    valueFormatter: ({ value }) => {
+      if (!value) {
+        return value;
+      }
+      return currencyFormatter.format(value);
+    },
+  },
+  {
+    field: 'year',
+    headerName: 'Year',
+    type: 'number',
+    private_aggregable: false,
+  },
+];
+
+export default function AggregationColDefAggregable() {
+  const data = useMovieData();
+
+  return (
+    <DataGridPremium
+      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
+      rows={data.rows.slice(0, 3)}
+      autoHeight
+      columns={COLUMNS}
+      initialState={{
+        private_aggregation: {
+          model: {
+            gross: 'sum',
+            year: 'sum',
+          },
+        },
+      }}
+      experimentalFeatures={{
+        private_aggregation: true,
+      }}
+    />
+  );
+}

docs/data/data-grid/aggregation/AggregationControlled.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS = [
+  { field: 'title', headerName: 'Title', width: 200, groupable: false },
+  {
+    field: 'gross',
+    headerName: 'Gross',
+    type: 'number',
+    width: 150,
+    groupable: false,
+    valueFormatter: ({ value }) => {
+      if (!value) {
+        return value;
+      }
+      return currencyFormatter.format(value);
+    },
+  },
+];
+
+export default function AggregationControlled() {
+  const data = useMovieData();
+
+  const [aggregationModel, setAggregationModel] = React.useState({
+    gross: 'sum',
+  });
+
+  return (
+    <DataGridPremium
+      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
+      rows={data.rows.slice(0, 3)}
+      autoHeight
+      columns={COLUMNS}
+      private_aggregationModel={aggregationModel}
+      private_onAggregationModelChange={(newModel) => setAggregationModel(newModel)}
+      experimentalFeatures={{
+        private_aggregation: true,
+      }}
+    />
+  );
+}

docs/data/data-grid/aggregation/AggregationControlled.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  GridAggregationModel,
+  GridColDef,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: GridColDef[] = [
+  { field: 'title', headerName: 'Title', width: 200, groupable: false },
+  {
+    field: 'gross',
+    headerName: 'Gross',
+    type: 'number',
+    width: 150,
+    groupable: false,
+    valueFormatter: ({ value }) => {
+      if (!value) {
+        return value;
+      }
+      return currencyFormatter.format(value);
+    },
+  },
+];
+
+export default function AggregationControlled() {
+  const data = useMovieData();
+
+  const [aggregationModel, setAggregationModel] =
+    React.useState<GridAggregationModel>({
+      gross: 'sum',
+    });
+
+  return (
+    <DataGridPremium
+      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
+      rows={data.rows.slice(0, 3)}
+      autoHeight
+      columns={COLUMNS}
+      private_aggregationModel={aggregationModel}
+      private_onAggregationModelChange={(newModel) => setAggregationModel(newModel)}
+      experimentalFeatures={{
+        private_aggregation: true,
+      }}
+    />
+  );
+}

docs/data/data-grid/aggregation/AggregationControlled.tsx.preview

@@ -0,0 +1,11 @@
+<DataGridPremium
+  // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
+  rows={data.rows.slice(0, 3)}
+  autoHeight
+  columns={COLUMNS}
+  private_aggregationModel={aggregationModel}
+  private_onAggregationModelChange={(newModel) => setAggregationModel(newModel)}
+  experimentalFeatures={{
+    private_aggregation: true,
+  }}
+/>

docs/data/data-grid/aggregation/AggregationCustomFunction.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  PRIVATE_GRID_AGGREGATION_FUNCTIONS,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS = [
+  {
+    field: 'title',
+    headerName: 'Title',
+    width: 200,
+    groupable: false,
+    private_aggregable: false,
+  },
+  {
+    field: 'director',
+    headerName: 'Director',
+    width: 200,
+  },
+  {
+    field: 'gross',
+    headerName: 'Gross',
+    type: 'number',
+    width: 150,
+    groupable: false,
+    valueFormatter: ({ value }) => {
+      if (!value) {
+        return value;
+      }
+      return currencyFormatter.format(value);
+    },
+  },
+];
+
+const firstAlphabeticalAggregation = {
+  apply: (params) => {
+    if (params.values.length === 0) {
+      return null;
+    }
+
+    const sortedValue = params.values.sort((a = '', b = '') => a.localeCompare(b));
+
+    return sortedValue[0];
+  },
+  label: 'first alphabetical',
+  columnTypes: ['string'],
+};
+
+const lastAlphabeticalAggregation = {
+  apply: (params) => {
+    if (params.values.length === 0) {
+      return null;
+    }
+
+    const sortedValue = params.values.sort((a = '', b = '') => a.localeCompare(b));
+
+    return sortedValue[sortedValue.length - 1];
+  },
+  label: 'last alphabetical',
+  columnTypes: ['string'],
+};
+
+export default function AggregationCustomFunction() {
+  const data = useMovieData();
+
+  return (
+    <DataGridPremium
+      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
+      rows={data.rows.slice(0, 3)}
+      autoHeight
+      columns={COLUMNS}
+      private_aggregationFunctions={{
+        ...PRIVATE_GRID_AGGREGATION_FUNCTIONS,
+        firstAlphabetical: firstAlphabeticalAggregation,
+        lastAlphabetical: lastAlphabeticalAggregation,
+      }}
+      initialState={{
+        private_aggregation: {
+          model: {
+            director: 'firstAlphabetical',
+          },
+        },
+      }}
+      experimentalFeatures={{
+        private_aggregation: true,
+      }}
+    />
+  );
+}