Merge pull request #7 from ModusCreateOrg/tree-2

Modified example to sync with the tree article

Author: mschwartz

11-tree/a-basic-tree/package-lock.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "ag-grid": "^15.0.0",
+    "ag-grid-enterprise": "^15.0.0",
     "ag-grid-react": "^15.0.0",
     "autoprefixer": "7.1.6",
     "babel-core": "6.26.0",

11-tree/a-basic-tree/package.json

@@ -1,11 +1,124 @@
 import React, { Component } from 'react';
-import Tree from './Tree';
-import './App.css';
+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: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett'],
+    jobTitle: 'Exec. Vice President',
+    employmentType: 'Permanent',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker'],
+    jobTitle: 'Director of Operations',
+    employmentType: 'Permanent',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker', 'Brittany Hanson'],
+    jobTitle: 'Fleet Coordinator',
+    employmentType: 'Permanent',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker', 'Brittany Hanson', 'Leah Flowers'],
+    jobTitle: 'Parts Technician',
+    employmentType: 'Contract',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker', 'Brittany Hanson', 'Tammy Sutton'],
+    jobTitle: 'Service Technician',
+    employmentType: 'Contract',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker', 'Derek Paul'],
+    jobTitle: 'Inventory Control',
+    employmentType: 'Permanent',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland'],
+    jobTitle: 'VP Sales',
+    employmentType: 'Permanent',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland', 'Morris Hanson'],
+    jobTitle: 'Sales Manager',
+    employmentType: 'Permanent',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland', 'Todd Tyler'],
+    jobTitle: 'Sales Executive',
+    employmentType: 'Contract',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland', 'Bennie Wise'],
+    jobTitle: 'Sales Executive',
+    employmentType: 'Contract',
+    email: '[email protected]'
+  },
+  {
+    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Francis Strickland', 'Joel Cooper'],
+    jobTitle: 'Sales Executive',
+    employmentType: 'Permanent',
+    email: '[email protected]'
+  }
+];
 
 class App extends Component {
-  render() {
+  columns = [
+    {
+      field: 'jobTitle'
+    },
+    {
+      field: 'employmentType'
+    }
+  ]
+
+  getDataPath = (data) => {
+    return data.orgHierarchy;
+  }
+
+  autoGroupColumnDef = {
+    headerName: 'Organisation Hierarchy',
+    width: 300,
+    cellRendererParams: {
+      suppressCount: true
+    }
+  }
+
+  render () {
     return (
-      <Tree/>
+      <div className="ag-theme-material">
+        <AgGridReact
+          containerStyle={{height: '400px'}}
+          columnDefs={this.columns}
+          rowData={data}
+          treeData={true}
+          getDataPath={this.getDataPath}
+          autoGroupColumnDef={this.autoGroupColumnDef}
+        />
+      </div>
     );
   }
 }

11-tree/a-basic-tree/src/App.js

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "ag-grid": "^15.0.0",
+    "ag-grid-enterprise": "^15.0.0",
     "ag-grid-react": "^15.0.0",
     "autoprefixer": "7.1.6",
     "babel-core": "6.26.0",