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 

public class TreeGridExamples {
    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() ; 
   =a.Name ;
            aWraper.label =a.Name ;
            List<Items> co = new List<Items>();
            for(Contact c : a.Contacts){
                Items conWrapp = new Items();
       =c.Name ;
                conWrapp.label =c.Name ;
                List<Items> wrapperOooo = new List<Items>();
                for(Opportunity o : opps.get(c.Id).Opportunities){
                    Items ooo = new Items(); 
           = o.Name ;
                    ooo.label = o.Name ;
                conWrapp.items =wrapperOooo ;
            aWraper.items = co;
        return JSON.serializePretty(aooo) ;
    public Class AccountWrapper{
        public String name {get;set;}
        public String label {get;set;}
        public List<Items> items {get;set;}
    public Class Items{
        public String name {get;set;}
        public String label {get;set;}
        public List<Items> items {get;set;}

Lightning Component 

<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 }"


    doInit: function (cmp, event, helper) {
        cmp.set('v.gridColumns', [
            {label: 'name', fieldName: 'name', type: 'text'},
            {label: 'label', fieldName: 'label', type: 'text'},


    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'));
                cmp.set('v.gridData', JSON.parse(temojson));
            // error handling when state is "INCOMPLETE" or "ERROR"

Below image shows the treegrid output.