lightning tree

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

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"  />    
            <lightning:treeGrid columns="{! v.accountColumns }" 
                                data="{! v.accountList' }"
                                hideCheckboxColumn  = "true"/>


  init : function(component, event, helper) {


    queryAccountFieldsMethod : function(component) {       
        // Call class's method 'accountResults' to get accounts
        var action = component.get("c.getAccountList");        
            var state  = response.getState();            
            if(state == "SUCCESS"){                
                // 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',
                         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);
                                // alert("ERROR");
                console.log("Failed with state: " + state);

dont miss out iconCheck out another amazing blog by Krati here: Application Events In Salesforce Lightning Framework

Apex Class:

public class AccountContactTreeGridClass {    
    //Method for TreeGrid
    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;

Popular Salesforce Blogs