Usage of lightning:treeGrid
In this blog, I am going to show how to use lightning:treeGrid. A lightning:treeGrid component displays hierarchical data in a table. Its appearance resembles lightning:datatable, with the exception that each row can be expanded to reveal a nested group of items. Rows that contain nested data display a chevron icon to denote that they can be expanded or collapsed. Each column can be displayed based on the data type. In this example, I am going to show account and its contacts and opportunities as a tree grid.
Apex Class
|
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 |
public class TreeGridExamples { @AuraEnabled public static String getTreeGridData(){ List<Account> accs = [Select Id , Name,(Select Id , Name from Contacts) from Account]; Map<Id , Contact> opps =new Map<Id , Contact>( [Select Id , Name,(Select Id ,Name From Opportunities) from Contact]); List<AccountWrapper> aooo = new List<AccountWrapper>(); for(Account a : accs){ AccountWrapper aWraper = new AccountWrapper() ; aWraper.name =a.Name ; aWraper.label =a.Name ; List<Items> co = new List<Items>(); for(Contact c : a.Contacts){ Items conWrapp = new Items(); conWrapp.name =c.Name ; conWrapp.label =c.Name ; List<Items> wrapperOooo = new List<Items>(); for(Opportunity o : opps.get(c.Id).Opportunities){ Items ooo = new Items(); ooo.name = o.Name ; ooo.label = o.Name ; wrapperOooo.add(ooo); } conWrapp.items =wrapperOooo ; co.add(conWrapp); } aWraper.items = co; aooo.add(aWraper); } return JSON.serializePretty(aooo) ; } public Class AccountWrapper{ @AuraEnabled public String name {get;set;} @AuraEnabled public String label {get;set;} @AuraEnabled public List<Items> items {get;set;} } public Class Items{ @AuraEnabled public String name {get;set;} @AuraEnabled public String label {get;set;} @AuraEnabled public List<Items> items {get;set;} } } |
Lightning Component
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<aura:component controller="TreeGridExamples"> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <aura:attribute name="gridColumns" type="List" /> <aura:attribute name="gridData" type="Object" /> <aura:attribute name="gridExpandedRows" type="Object" /> <lightning:treeGrid columns="{! v.gridColumns }" data="{! v.gridData }" keyField="name" aura:id="mytree" /> </aura:component> |
|
1 2 3 4 5 6 7 8 9 10 11 |
({ doInit: function (cmp, event, helper) { cmp.set('v.gridColumns', [ {label: 'name', fieldName: 'name', type: 'text'}, {label: 'label', fieldName: 'label', type: 'text'}, ]); helper.getData(cmp); }, }) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
({ getData : function (cmp) { var action = cmp.get("c.getTreeGridData"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { var data = response.getReturnValue(); var temojson = JSON.parse(JSON.stringify(data).split('items').join('_children')); console.log(temojson); cmp.set('v.gridData', JSON.parse(temojson)); } // error handling when state is "INCOMPLETE" or "ERROR" }); $A.enqueueAction(action); } }) |
Below image shows the treegrid output.
