[DataGrid] Add columnGroupingModel

docs/data/data-grid/column-groups/BasicGroupingDemo.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+
+const columns = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+  },
+];
+
+const rows = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+const columnGroupingModel = [
+  {
+    groupId: 'Internal',
+    description: '',
+    children: [{ field: 'id' }],
+  },
+  {
+    groupId: 'Basic info',
+    children: [
+      {
+        groupId: 'Full name',
+        children: [{ field: 'lastName' }, { field: 'firstName' }],
+      },
+      { field: 'age' },
+    ],
+  },
+];
+
+export default function BasicGroupingDemo() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        experimentalFeatures={{ columnGrouping: true }}
+        rows={rows}
+        columns={columns}
+        checkboxSelection
+        disableSelectionOnClick
+        columnGroupingModel={columnGroupingModel}
+      />
+    </div>
+  );
+}

docs/data/data-grid/column-groups/BasicGroupingDemo.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  GridColDef,
+  GridColumnGroupingModel,
+} from '@mui/x-data-grid-pro';
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+  },
+];
+
+const rows = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+const columnGroupingModel: GridColumnGroupingModel = [
+  {
+    groupId: 'Internal',
+    description: '',
+    children: [{ field: 'id' }],
+  },
+  {
+    groupId: 'Basic info',
+    children: [
+      {
+        groupId: 'Full name',
+        children: [{ field: 'lastName' }, { field: 'firstName' }],
+      },
+      { field: 'age' },
+    ],
+  },
+];
+
+export default function BasicGroupingDemo() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        experimentalFeatures={{ columnGrouping: true }}
+        rows={rows}
+        columns={columns}
+        checkboxSelection
+        disableSelectionOnClick
+        columnGroupingModel={columnGroupingModel}
+      />
+    </div>
+  );
+}

docs/data/data-grid/column-groups/BasicGroupingDemo.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPro
+  experimentalFeatures={{ columnGrouping: true }}
+  rows={rows}
+  columns={columns}
+  checkboxSelection
+  disableSelectionOnClick
+  columnGroupingModel={columnGroupingModel}
+/>

docs/data/data-grid/column-groups/BreakingGroupDemo.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+
+const columns = [
+  { field: 'id', headerName: 'ID', width: 100 },
+  { field: 'isAdmin', type: 'boolean', headerName: 'is admin', width: 100 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+  },
+];
+
+const rows = [
+  { id: 1, isAdmin: false, lastName: 'Snow', firstName: 'Jon', age: 35 },
+  { id: 2, isAdmin: true, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+  { id: 3, isAdmin: false, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+  { id: 4, isAdmin: false, lastName: 'Stark', firstName: 'Arya', age: 16 },
+  { id: 5, isAdmin: true, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, isAdmin: true, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, isAdmin: false, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, isAdmin: false, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, isAdmin: false, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+const columnGroupingModel = [
+  {
+    groupId: 'internal_data',
+    headerName: 'Internal (not freeReordering)',
+    description: '',
+    children: [{ field: 'id' }, { field: 'isAdmin' }],
+  },
+  {
+    groupId: 'naming',
+    headerName: 'Full name (freeReordering)',
+    freeReordering: true,
+    children: [{ field: 'lastName' }, { field: 'firstName' }],
+  },
+];
+
+export default function BreakingGroupDemo() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        rows={rows}
+        columns={columns}
+        experimentalFeatures={{ columnGrouping: true }}
+        checkboxSelection
+        disableSelectionOnClick
+        columnGroupingModel={columnGroupingModel}
+      />
+    </div>
+  );
+}

docs/data/data-grid/column-groups/BreakingGroupDemo.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  GridColDef,
+  GridColumnGroupingModel,
+} from '@mui/x-data-grid-pro';
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 100 },
+  { field: 'isAdmin', type: 'boolean', headerName: 'is admin', width: 100 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+  },
+];
+
+const rows = [
+  { id: 1, isAdmin: false, lastName: 'Snow', firstName: 'Jon', age: 35 },
+  { id: 2, isAdmin: true, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+  { id: 3, isAdmin: false, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+  { id: 4, isAdmin: false, lastName: 'Stark', firstName: 'Arya', age: 16 },
+  { id: 5, isAdmin: true, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, isAdmin: true, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, isAdmin: false, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, isAdmin: false, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, isAdmin: false, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+const columnGroupingModel: GridColumnGroupingModel = [
+  {
+    groupId: 'internal_data',
+    headerName: 'Internal (not freeReordering)',
+    description: '',
+    children: [{ field: 'id' }, { field: 'isAdmin' }],
+  },
+  {
+    groupId: 'naming',
+    headerName: 'Full name (freeReordering)',
+    freeReordering: true,
+    children: [{ field: 'lastName' }, { field: 'firstName' }],
+  },
+];
+
+export default function BreakingGroupDemo() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        rows={rows}
+        columns={columns}
+        experimentalFeatures={{ columnGrouping: true }}
+        checkboxSelection
+        disableSelectionOnClick
+        columnGroupingModel={columnGroupingModel}
+      />
+    </div>
+  );
+}

docs/data/data-grid/column-groups/BreakingGroupDemo.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPro
+  rows={rows}
+  columns={columns}
+  experimentalFeatures={{ columnGrouping: true }}
+  checkboxSelection
+  disableSelectionOnClick
+  columnGroupingModel={columnGroupingModel}
+/>