-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DataGridPro] Allow to automatically group the rows in a Tree Data (#…
- Loading branch information
1 parent
adc27db
commit 21d3a75
Showing
88 changed files
with
3,792 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
120 changes: 120 additions & 0 deletions
120
docs/src/pages/components/data-grid/group-pivot/BasicTreeData.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
120 changes: 120 additions & 0 deletions
120
docs/src/pages/components/data-grid/group-pivot/BasicTreeData.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
6 changes: 6 additions & 0 deletions
6
docs/src/pages/components/data-grid/group-pivot/BasicTreeData.tsx.preview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <DataGridPro | ||
| treeData | ||
| rows={rows} | ||
| columns={columns} | ||
| getTreeDataPath={getTreeDataPath} | ||
| /> |
Oops, something went wrong.