Salesforce lightning:treegrid - The Developer Guide

A tree grid displays structured data in a table with expandable rows. lightning:treeGrid component displays hierarchical data in a table. Suppose, you have to show Contacts just below the Account’s Name, you’ll have to use <aura:iteration> or <lightning:datatable>. But for both of these, you’ll have to use either Application Event or Component Event.

Instead of using two components, you can easily use <lightning:treeGrid>. It is neat and very simple to get the results. An example for which is as shown:

Don't forget to check out: Salesforce Lightning Dialer | Boost Sales productivity by making hassle-free calls

First create a Lightning Application:

<aura:application extends="force:slds">
   <c:AccountContactTreeGrid/>
</aura:application>

Lightning Component:

<aura:component controller='AccountContactTreeGridClass'>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="accountColumns" type="List"  />
    <aura:attribute name="accountList" type="Object" />
    <aura:attribute name="gridExpandedRows" type="List"  />    
    <form>
        <div>
            <lightning:treeGrid columns="{! v.accountColumns }" 
                                data="{! v.accountList' }"
                                keyField="Id" 
                                hideCheckboxColumn  = "true"/>
        </div>        
    </form>
</aura:component>

LightningController:

({
  init : function(component, event, helper) {
        helper.queryAccountFieldsMethod(component);
    }    
})

Helper:

({    
    queryAccountFieldsMethod : function(component) {       
        // Call class's method 'accountResults' to get accounts
        var action = component.get("c.getAccountList");        
        action.setCallback(this,function(response){           
            var state  = response.getState();            
            if(state == "SUCCESS"){                
                //alert("SUCCESS");
                //console.log(response.getReturnValue());                
                // Set the value in TreeGrid                
                //Set Account's TreeGrid Columns
                component.set('v.accountColumns', [
                    {label: 'Action', 
                     type: 'button',
                     initialWidth: 150,                    
                    },
                    {label: 'Account Name ', 
                     fieldName: 'Name', 
                     type: 'text',
                    "_children": [
                    {
                        "Name": 'Name'
                    }
                ]},                    
                    {label: 'Account Phone ', 
                     fieldName: 'Phone', 
                     type: 'text'},
                    
                    {label: 'Account Website ', 
                     fieldName: 'Website', 
                     type: 'url',
                     typeAttributes:{ 
                         target: '_blank'
                     }
                    }             
         ]);                
                var results = response.getReturnValue();
                for (var i=0; i<results.length; i++ ) {
                    results[i]._children = results[i]['Contacts'];
                    delete results[i].Contacts; 
                }                
                component.set('v.accountList', results);
                            }else{
                                // alert("ERROR");
                console.log("Failed with state: " + state);
            }
        });        
        $A.enqueueAction(action);        
    },    
})

Check out another amazing blog by Krati here: Application Events In Salesforce Lightning Framework

Apex Class:

public class AccountContactTreeGridClass {    
    //Method for TreeGrid
    @AuraEnabled
    public static List <Account> getAccountList() {
        List<Account> accountList = new List<Account>();
        accountList = [SELECT Id, Name, Phone, Website,
                       (SELECT id, Name FROM Contacts)
                       FROM Account LIMIT 500];
        return accountList;
    }
}