Salesforce 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. Here is an example of lightning:datatable.

Note: This component requires API version 42.0 and later.

Apex Controller:

public class SampleAuraController {
    public static List <Account> getAccountList() {
        List<Account> accList = new List<Account>();
        accList = [SELECT Id, Name, NumberOfEmployees, Phone,
                   (SELECT FirstName, LastName, Email FROM Contacts)
                   FROM Account LIMIT 10];
        return accList;

Lightning Component:

<aura:component controller="SampleAuraController" implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute type="Account[]" name="acctList"/>
    <aura:attribute name="gridColumns" type="List" />
    <aura:attribute name="gridData" type="Object" />
    <aura:attribute name="gridExpandedRows" type="Object" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-m-around_xx-large">
        <lightning:treeGrid aura:id="accTree" columns="{!v.gridColumns}" data="{!v.gridData}" keyField="Id"/>

Lightning Component JS Controller:

    doInit : function(component, event, helper) {
        var columns = [
                type: 'text',
                fieldName: 'Name',
                label: 'Account Name'
                type: 'number',
                fieldName: 'NumberOfEmployees',
                label: 'Employees'
                type: 'phone',
                fieldName: 'Phone',
                label: 'Phone Number'
                type: 'text',
                fieldName: 'FirstName',
                label: 'First Name'
                type: 'text',
                fieldName: 'LastName',
                label: 'Last Name'
                type: 'email',
                fieldName: 'Email',
                label: 'Email'
        component.set('v.gridColumns', columns);
        var action = component.get("c.getAccountList");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS" ) {
                var resultData = response.getReturnValue();
                for (var i=0; i<resultData.length; i++ ) {
                    resultData[i]._children = resultData[i]['Contacts'];
                    delete resultData[i].Contacts; 
                component.set('v.gridData', resultData);


Reference: lightning:treeGrid

  • Sweta Dey

    How do I pass the lookup field in columns? I am trying to display Product Name in the column.
    I am doing this fieldName: ‘Product2.Name’ but the name is not displaying. Also in controller I have queried with (SELECT Id, Product2.Name,Product2.ProductCode, Quantity,UnitPrice FROM OrderItems)
    Basically I am showing the relation of Order and OrderItems.
    Please let me know how to show the lookup field.

  • Damon Eckert

    Doesn’t the following have the same result?

    var resultData = JSON.parse(JSON.stringify(response.getReturnValue()).split(‘Contacts’).join(‘_children’));

  • Deepika

    Hi, Is there anyway we can remove expand icon if the contact don’t have any child contact?

    • You can create custom tree grid using slds

    • MarcinDev

      Just try this code:
      cleanEmptyArrayOrItem(items) {
      const clearEmptyChildren = (arr) => {
      arr.forEach(ele => {
      if(!ele._children || ele._children.length < 1) delete ele._children
      else clearEmptyChildren(ele._children)
      return items;

  • Dharmendra Bhuva

    Hi, Is there any way we can select child rows on selecting parent row? For example, We have a requirement where once user select parent account, it should select all contacts specific to that account.

    • Yes we can

      • Dharmendra Bhuva

        Thanks for reply, But can you please elaborate how we can achieve that?