/
App.js
126 lines (119 loc) · 3.47 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-material.css';
import 'ag-grid-enterprise';
import {LicenseManager} from "ag-grid-enterprise/main";
// The tree view from ag-Grid requires an enterprise license and a product key
// Pricing: https://www.ag-grid.com/license-pricing.php
// Trial: https://www.ag-grid.com/start-trial.php
LicenseManager.setLicenseKey("your license key");
const data = [
{
orgHierarchy: ['Erica Rogers'],
jobTitle: 'CEO',
employmentType: 'Permanent',
email: 'erica.rogers@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett'],
jobTitle: 'Exec. Vice President',
employmentType: 'Permanent',
email: 'malcolm.barrett@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker'],
jobTitle: 'Director of Operations',
employmentType: 'Permanent',
email: 'esther.baker@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker', 'Brittany Hanson'],
jobTitle: 'Fleet Coordinator',
employmentType: 'Permanent',
email: 'brittany.hanson@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker', 'Brittany Hanson', 'Leah Flowers'],
jobTitle: 'Parts Technician',
employmentType: 'Contract',
email: 'leah.flowers@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker', 'Brittany Hanson', 'Tammy Sutton'],
jobTitle: 'Service Technician',
employmentType: 'Contract',
email: 'tammy.sutton@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker', 'Derek Paul'],
jobTitle: 'Inventory Control',
employmentType: 'Permanent',
email: 'derek.paul@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland'],
jobTitle: 'VP Sales',
employmentType: 'Permanent',
email: 'francis.strickland@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland', 'Morris Hanson'],
jobTitle: 'Sales Manager',
employmentType: 'Permanent',
email: 'morris.hanson@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland', 'Todd Tyler'],
jobTitle: 'Sales Executive',
employmentType: 'Contract',
email: 'todd.tyler@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland', 'Bennie Wise'],
jobTitle: 'Sales Executive',
employmentType: 'Contract',
email: 'bennie.wise@acme.com'
},
{
orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland', 'Joel Cooper'],
jobTitle: 'Sales Executive',
employmentType: 'Permanent',
email: 'joel.cooper@acme.com'
}
];
class App extends Component {
columns = [
{
field: 'jobTitle'
},
{
field: 'employmentType'
}
]
getDataPath = (data) => {
return data.orgHierarchy;
}
autoGroupColumnDef = {
headerName: 'Organisation Hierarchy',
width: 300,
cellRendererParams: {
suppressCount: true
}
}
render () {
return (
<div className="ag-theme-material">
<AgGridReact
containerStyle={{height: '400px'}}
columnDefs={this.columns}
rowData={data}
treeData={true}
getDataPath={this.getDataPath}
autoGroupColumnDef={this.autoGroupColumnDef}
/>
</div>
);
}
}
export default App;