[DataGridPremium] Pivoting PoC

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

@@ -88,7 +88,7 @@ The following snippets build on the demo above to show various use cases for the
 // Aggregate the root group in the top-level footer
 // and the other groups in their grouping row
 // (default behavior)
-getAggregationPosition=(groupNode) => (groupNode == null ? 'footer' : 'inline'),
+getAggregationPosition={(groupNode) => (groupNode.depth === -1 ? 'footer' : 'inline')}
 
 // Aggregate all the groups in their grouping row;
 // the root will not be aggregated

docs/data/data-grid/pivoting/GridPivotingBasic.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  unstable_useGridPivoting,
+} from '@mui/x-data-grid-premium';
+
+const initialRows = [
+  { id: 1, product: 'Product 1', type: 'Type A', price: 10, quantity: 2 },
+  { id: 2, product: 'Product 2', type: 'Type A', price: 12, quantity: 3 },
+  { id: 3, product: 'Product 3', type: 'Type B', price: 8, quantity: 1 },
+  { id: 4, product: 'Product 4', type: 'Type C', price: 20, quantity: 8 },
+];
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const initialColumns = [
+  { field: 'product' },
+  { field: 'type' },
+  {
+    field: 'price',
+    valueFormatter: (value) => {
+      if (!value) {
+        return '';
+      }
+      return currencyFormatter.format(value);
+    },
+  },
+  { field: 'quantity' },
+];
+
+export default function GridPivotingBasic() {
+  const apiRef = useGridApiRef();
+
+  const [pivotModel, setPivotModel] = React.useState({
+    rows: [{ field: 'type' }],
+    columns: [],
+    values: [{ field: 'price', aggFunc: 'sum' }],
+  });
+
+  const [isPivotMode, setIsPivotMode] = React.useState(false);
+
+  const pivotParams = unstable_useGridPivoting({
+    apiRef,
+    pivotModel,
+    onPivotModelChange: setPivotModel,
+    pivotMode: isPivotMode,
+    onPivotModeChange: setIsPivotMode,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={initialRows}
+        columns={initialColumns}
+        pivotParams={pivotParams}
+        apiRef={apiRef}
+        columnGroupHeaderHeight={36}
+      />
+    </div>
+  );
+}

docs/data/data-grid/pivoting/GridPivotingBasic.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  GridColDef,
+  GridRowModel,
+  unstable_useGridPivoting,
+  Unstable_GridPivotModel as PivotModel,
+} from '@mui/x-data-grid-premium';
+
+const initialRows: GridRowModel[] = [
+  { id: 1, product: 'Product 1', type: 'Type A', price: 10, quantity: 2 },
+  { id: 2, product: 'Product 2', type: 'Type A', price: 12, quantity: 3 },
+  { id: 3, product: 'Product 3', type: 'Type B', price: 8, quantity: 1 },
+  { id: 4, product: 'Product 4', type: 'Type C', price: 20, quantity: 8 },
+];
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const initialColumns: GridColDef[] = [
+  { field: 'product' },
+  { field: 'type' },
+  {
+    field: 'price',
+    valueFormatter: (value) => {
+      if (!value) {
+        return '';
+      }
+      return currencyFormatter.format(value);
+    },
+  },
+  { field: 'quantity' },
+];
+
+export default function GridPivotingBasic() {
+  const apiRef = useGridApiRef();
+
+  const [pivotModel, setPivotModel] = React.useState<PivotModel>({
+    rows: [{ field: 'type' }],
+    columns: [],
+    values: [{ field: 'price', aggFunc: 'sum' }],
+  });
+
+  const [isPivotMode, setIsPivotMode] = React.useState(false);
+
+  const pivotParams = unstable_useGridPivoting({
+    apiRef,
+    pivotModel,
+    onPivotModelChange: setPivotModel,
+    pivotMode: isPivotMode,
+    onPivotModeChange: setIsPivotMode,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={initialRows}
+        columns={initialColumns}
+        pivotParams={pivotParams}
+        apiRef={apiRef}
+        columnGroupHeaderHeight={36}
+      />
+    </div>
+  );
+}

docs/data/data-grid/pivoting/GridPivotingBasic.tsx.preview

@@ -0,0 +1,7 @@
+<DataGridPremium
+  rows={initialRows}
+  columns={initialColumns}
+  pivotParams={pivotParams}
+  apiRef={apiRef}
+  columnGroupHeaderHeight={36}
+/>

docs/data/data-grid/pivoting/GridPivotingCommodities.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  unstable_useGridPivoting,
+  GridToolbar,
+} from '@mui/x-data-grid-premium';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function GridPivotingCommodities() {
+  const apiRef = useGridApiRef();
+
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 1_000,
+    editable: true,
+  });
+
+  const [pivotModel, setPivotModel] = React.useState({
+    rows: [{ field: 'brokerName' }],
+    columns: [{ field: 'commodity', sort: 'asc' }],
+    values: [{ field: 'quantity', aggFunc: 'sum' }],
+  });
+
+  const [isPivotMode, setIsPivotMode] = React.useState(false);
+
+  const pivotParams = unstable_useGridPivoting({
+    apiRef,
+    pivotModel,
+    onPivotModelChange: setPivotModel,
+    pivotMode: isPivotMode,
+    onPivotModeChange: setIsPivotMode,
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <div style={{ height: 600, width: '100%' }}>
+        <DataGridPremium
+          rows={data.rows}
+          columns={data.columns}
+          apiRef={apiRef}
+          slots={{ toolbar: GridToolbar }}
+          pivotParams={pivotParams}
+          loading={loading}
+          columnGroupHeaderHeight={36}
+        />
+      </div>
+    </div>
+  );
+}

docs/data/data-grid/pivoting/GridPivotingCommodities.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  unstable_useGridPivoting,
+  Unstable_GridPivotModel as PivotModel,
+  GridToolbar,
+} from '@mui/x-data-grid-premium';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function GridPivotingCommodities() {
+  const apiRef = useGridApiRef();
+
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 1_000,
+    editable: true,
+  });
+
+  const [pivotModel, setPivotModel] = React.useState<PivotModel>({
+    rows: [{ field: 'brokerName' }],
+    columns: [{ field: 'commodity', sort: 'asc' }],
+    values: [{ field: 'quantity', aggFunc: 'sum' }],
+  });
+
+  const [isPivotMode, setIsPivotMode] = React.useState(false);
+
+  const pivotParams = unstable_useGridPivoting({
+    apiRef,
+    pivotModel,
+    onPivotModelChange: setPivotModel,
+    pivotMode: isPivotMode,
+    onPivotModeChange: setIsPivotMode,
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <div style={{ height: 600, width: '100%' }}>
+        <DataGridPremium
+          rows={data.rows}
+          columns={data.columns}
+          apiRef={apiRef}
+          slots={{ toolbar: GridToolbar }}
+          pivotParams={pivotParams}
+          loading={loading}
+          columnGroupHeaderHeight={36}
+        />
+      </div>
+    </div>
+  );
+}

docs/data/data-grid/pivoting/GridPivotingCommodities.tsx.preview

@@ -0,0 +1,11 @@
+<div style={{ height: 600, width: '100%' }}>
+  <DataGridPremium
+    rows={data.rows}
+    columns={data.columns}
+    apiRef={apiRef}
+    slots={{ toolbar: GridToolbar }}
+    pivotParams={pivotParams}
+    loading={loading}
+    columnGroupHeaderHeight={36}
+  />
+</div>