[DataGridPro] Allow to automatically group the rows in a Tree Data

docs/pages/api-docs/data-grid/data-grid-pro.json

@@ -24,6 +24,7 @@
     "columnTypes": { "type": { "name": "object" } },
     "components": { "type": { "name": "object" } },
     "componentsProps": { "type": { "name": "object" } },
+    "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" },
     "density": {
       "type": {
         "name": "enum",
@@ -52,7 +53,7 @@
     "editRowsModel": { "type": { "name": "object" } },
     "error": { "type": { "name": "any" } },
     "filterMode": {
-      "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
+      "type": { "name": "custom", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""
     },
     "filterModel": {
@@ -64,6 +65,8 @@
     "getCellClassName": { "type": { "name": "func" } },
     "getRowClassName": { "type": { "name": "func" } },
     "getRowId": { "type": { "name": "func" } },
+    "getTreeDataPath": { "type": { "name": "func" } },
+    "groupingColDef": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;object" } },
     "headerHeight": { "type": { "name": "number" }, "default": "56" },
     "hideFooter": { "type": { "name": "bool" } },
     "hideFooterPagination": { "type": { "name": "bool" } },
@@ -169,7 +172,8 @@
         "description": "Array&lt;{ field: string, sort?: 'asc'<br>&#124;&nbsp;'desc' }&gt;"
       }
     },
-    "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }
+    "throttleRowsMs": { "type": { "name": "number" }, "default": "0" },
+    "treeData": { "type": { "name": "bool" } }
   },
   "slots": {
     "BaseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } },
@@ -217,7 +221,9 @@
     "Panel": { "default": "GridPanel", "type": { "name": "elementType" } },
     "PreferencesPanel": { "default": "GridPreferencesPanel", "type": { "name": "elementType" } },
     "Row": { "type": { "name": "elementType" } },
-    "Toolbar": { "default": "null", "type": { "name": "elementType | null" } }
+    "Toolbar": { "default": "null", "type": { "name": "elementType | null" } },
+    "TreeDataCollapseIcon": { "type": { "name": "elementType" } },
+    "TreeDataExpandIcon": { "type": { "name": "elementType" } }
   },
   "name": "DataGridPro",
   "styles": {
@@ -290,7 +296,9 @@
       "sortIcon",
       "toolbarContainer",
       "toolbarFilterList",
-      "withBorder"
+      "withBorder",
+      "treeDataGroupingCell",
+      "treeDataGroupingCellToggle"
     ],
     "globalClasses": {},
     "name": "MuiDataGrid"

docs/pages/api-docs/data-grid/data-grid.json

@@ -189,7 +189,9 @@
     "Panel": { "default": "GridPanel", "type": { "name": "elementType" } },
     "PreferencesPanel": { "default": "GridPreferencesPanel", "type": { "name": "elementType" } },
     "Row": { "type": { "name": "elementType" } },
-    "Toolbar": { "default": "null", "type": { "name": "elementType | null" } }
+    "Toolbar": { "default": "null", "type": { "name": "elementType | null" } },
+    "TreeDataCollapseIcon": { "type": { "name": "elementType" } },
+    "TreeDataExpandIcon": { "type": { "name": "elementType" } }
   },
   "name": "DataGrid",
   "styles": {
@@ -262,7 +264,9 @@
       "sortIcon",
       "toolbarContainer",
       "toolbarFilterList",
-      "withBorder"
+      "withBorder",
+      "treeDataGroupingCell",
+      "treeDataGroupingCellToggle"
     ],
     "globalClasses": {},
     "name": "MuiDataGrid"

docs/scripts/generateProptypes.ts

@@ -32,6 +32,7 @@ async function generateProptypes(program: ttp.ts.Program, sourceFile: string) {
         'csvOptions',
         'printOptions',
         'column',
+        'groupingColDef',
       ];
       if (propsToNotResolve.includes(name)) {
         return false;

docs/src/pages.js

@@ -48,7 +48,7 @@ dataGridComponent.children = [
   { pathname: '/components/data-grid/scrolling' },
   { pathname: '/components/data-grid/virtualization' },
   { pathname: '/components/data-grid/accessibility' },
-  { pathname: '/components/data-grid/group-pivot', title: '🚧 Group & Pivot' },
+  { pathname: '/components/data-grid/group-pivot', title: 'Group & Pivot' },
 ];
 
 dataGridComponentAPI.children = [

docs/src/pages/components/data-grid/getting-started/getting-started.md

@@ -190,7 +190,7 @@ The enterprise components come in two plans: Pro and Premium.
 | [Column virtualization](/components/data-grid/virtualization/#column-virtualization)      |    ✅     |              ✅               |                  ✅                   |
 | [Row virtualization > 100 rows](/components/data-grid/virtualization/#row-virtualization) |    ❌     |              ✅               |                  ✅                   |
 | **Group & Pivot**                                                                         |           |                               |                                       |
-| [Tree data](/components/data-grid/group-pivot/#tree-data)                                 |    ❌     |              🚧               |                  🚧                   |
+| [Tree data](/components/data-grid/group-pivot/#tree-data)                                 |    ❌     |              ✅               |                  ✅                   |
 | [Master detail](/components/data-grid/group-pivot/#master-detail)                         |    ❌     |              🚧               |                  🚧                   |
 | [Grouping](/components/data-grid/group-pivot/#grouping)                                   |    ❌     |              ❌               |                  🚧                   |
 | [Aggregation](/components/data-grid/group-pivot/#aggregation)                             |    ❌     |              ❌               |                  🚧                   |

docs/src/pages/components/data-grid/group-pivot/BasicTreeData.js

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+
+const rows = [
+  {
+    hierarchy: ['Sarah'],
+    jobTitle: 'Head of Human Resources',
+    recruitmentDate: new Date(2020, 8, 12),
+    id: 0,
+  },
+  {
+    hierarchy: ['Thomas'],
+    jobTitle: 'Head of Sales',
+    recruitmentDate: new Date(2017, 3, 4),
+    id: 1,
+  },
+  {
+    hierarchy: ['Thomas', 'Robert'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2020, 11, 20),
+    id: 2,
+  },
+  {
+    hierarchy: ['Thomas', 'Karen'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2020, 10, 14),
+    id: 3,
+  },
+  {
+    hierarchy: ['Thomas', 'Nancy'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2017, 10, 29),
+    id: 4,
+  },
+  {
+    hierarchy: ['Thomas', 'Daniel'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2020, 7, 21),
+    id: 5,
+  },
+  {
+    hierarchy: ['Thomas', 'Christopher'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2020, 7, 20),
+    id: 6,
+  },
+  {
+    hierarchy: ['Thomas', 'Donald'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2019, 6, 28),
+    id: 7,
+  },
+  {
+    hierarchy: ['Mary'],
+    jobTitle: 'Head of Engineering',
+    recruitmentDate: new Date(2016, 3, 14),
+    id: 8,
+  },
+  {
+    hierarchy: ['Mary', 'Jennifer'],
+    jobTitle: 'Tech lead front',
+    recruitmentDate: new Date(2016, 5, 17),
+    id: 9,
+  },
+  {
+    hierarchy: ['Mary', 'Jennifer', 'Anna'],
+    jobTitle: 'Front-end developer',
+    recruitmentDate: new Date(2019, 11, 7),
+    id: 10,
+  },
+  {
+    hierarchy: ['Mary', 'Michael'],
+    jobTitle: 'Tech lead devops',
+    recruitmentDate: new Date(2021, 7, 1),
+    id: 11,
+  },
+  {
+    hierarchy: ['Mary', 'Linda'],
+    jobTitle: 'Tech lead back',
+    recruitmentDate: new Date(2017, 0, 12),
+    id: 12,
+  },
+  {
+    hierarchy: ['Mary', 'Linda', 'Elizabeth'],
+    jobTitle: 'Back-end developer',
+    recruitmentDate: new Date(2019, 2, 22),
+    id: 13,
+  },
+  {
+    hierarchy: ['Mary', 'Linda', 'William'],
+    jobTitle: 'Back-end developer',
+    recruitmentDate: new Date(2018, 4, 19),
+    id: 14,
+  },
+];
+
+const columns = [
+  { field: 'jobTitle', headerName: 'Job Title', width: 200 },
+  {
+    field: 'recruitmentDate',
+    headerName: 'Recruitment Date',
+    type: 'date',
+    width: 150,
+  },
+];
+
+const getTreeDataPath = (row) => row.hierarchy;
+
+export default function BasicTreeData() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        treeData
+        rows={rows}
+        columns={columns}
+        getTreeDataPath={getTreeDataPath}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/group-pivot/BasicTreeData.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { DataGridPro, GridColumns, GridRowsProp } from '@mui/x-data-grid-pro';
+
+const rows: GridRowsProp = [
+  {
+    hierarchy: ['Sarah'],
+    jobTitle: 'Head of Human Resources',
+    recruitmentDate: new Date(2020, 8, 12),
+    id: 0,
+  },
+  {
+    hierarchy: ['Thomas'],
+    jobTitle: 'Head of Sales',
+    recruitmentDate: new Date(2017, 3, 4),
+    id: 1,
+  },
+  {
+    hierarchy: ['Thomas', 'Robert'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2020, 11, 20),
+    id: 2,
+  },
+  {
+    hierarchy: ['Thomas', 'Karen'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2020, 10, 14),
+    id: 3,
+  },
+  {
+    hierarchy: ['Thomas', 'Nancy'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2017, 10, 29),
+    id: 4,
+  },
+  {
+    hierarchy: ['Thomas', 'Daniel'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2020, 7, 21),
+    id: 5,
+  },
+  {
+    hierarchy: ['Thomas', 'Christopher'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2020, 7, 20),
+    id: 6,
+  },
+  {
+    hierarchy: ['Thomas', 'Donald'],
+    jobTitle: 'Sales Person',
+    recruitmentDate: new Date(2019, 6, 28),
+    id: 7,
+  },
+  {
+    hierarchy: ['Mary'],
+    jobTitle: 'Head of Engineering',
+    recruitmentDate: new Date(2016, 3, 14),
+    id: 8,
+  },
+  {
+    hierarchy: ['Mary', 'Jennifer'],
+    jobTitle: 'Tech lead front',
+    recruitmentDate: new Date(2016, 5, 17),
+    id: 9,
+  },
+  {
+    hierarchy: ['Mary', 'Jennifer', 'Anna'],
+    jobTitle: 'Front-end developer',
+    recruitmentDate: new Date(2019, 11, 7),
+    id: 10,
+  },
+  {
+    hierarchy: ['Mary', 'Michael'],
+    jobTitle: 'Tech lead devops',
+    recruitmentDate: new Date(2021, 7, 1),
+    id: 11,
+  },
+  {
+    hierarchy: ['Mary', 'Linda'],
+    jobTitle: 'Tech lead back',
+    recruitmentDate: new Date(2017, 0, 12),
+    id: 12,
+  },
+  {
+    hierarchy: ['Mary', 'Linda', 'Elizabeth'],
+    jobTitle: 'Back-end developer',
+    recruitmentDate: new Date(2019, 2, 22),
+    id: 13,
+  },
+  {
+    hierarchy: ['Mary', 'Linda', 'William'],
+    jobTitle: 'Back-end developer',
+    recruitmentDate: new Date(2018, 4, 19),
+    id: 14,
+  },
+];
+
+const columns: GridColumns = [
+  { field: 'jobTitle', headerName: 'Job Title', width: 200 },
+  {
+    field: 'recruitmentDate',
+    headerName: 'Recruitment Date',
+    type: 'date',
+    width: 150,
+  },
+];
+
+const getTreeDataPath = (row) => row.hierarchy;
+
+export default function BasicTreeData() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        treeData
+        rows={rows}
+        columns={columns}
+        getTreeDataPath={getTreeDataPath}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/group-pivot/BasicTreeData.tsx.preview

@@ -0,0 +1,6 @@
+<DataGridPro
+  treeData
+  rows={rows}
+  columns={columns}
+  getTreeDataPath={getTreeDataPath}
+/>