[DataGrid] Add columnGroupingModel (#5133)

Co-authored-by: Flavien DELANGLE <[email protected]> Co-authored-by: Danail Hadjiatanasov <[email protected]> Co-authored-by: Matheus Wichman <[email protected]> Co-authored-by: Andrew Cherniavskii <[email protected]> Co-authored-by: José Rodolfo Freitas <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]>
mui · Aug 23, 2022 · 81bc636 · 81bc636
1 parent 0e87735
commit 81bc636
Show file tree

Hide file tree

Showing 74 changed files with 2,975 additions and 174 deletions.
diff --git a/docs/data/data-grid/column-groups/BasicGroupingDemo.js b/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>
+  );
+}
diff --git a/docs/data/data-grid/column-groups/BasicGroupingDemo.tsx b/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>
+  );
+}
diff --git a/docs/data/data-grid/column-groups/BasicGroupingDemo.tsx.preview b/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}
+/>
diff --git a/docs/data/data-grid/column-groups/BreakingGroupDemo.js b/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>
+  );
+}
diff --git a/docs/data/data-grid/column-groups/BreakingGroupDemo.tsx b/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>
+  );
+}
diff --git a/docs/data/data-grid/column-groups/BreakingGroupDemo.tsx.preview b/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}
+/>