I went through many articles where the data can be displayed in tree structure using lightning:treeGrid. It works fine w.r.t dispalying the data but the columns(of parent and child) are displyed at the top. Parent is Opportunity and child is OpportunityLineItems. I want the column names of child reocrd to be displayed just above the child records and not at the top.As shown in figure. Can we write a method which would return the field name and its values ? enter image description here


<aura:component controller="OpportunityController" implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute type="Opportunity[]" name="oppList"/>
    <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="oppTree" columns="{!v.gridColumns}" data="{!v.gridData}" keyField="Id" expandedRows="{! v.gridExpandedRows}"/>


    doInit : function(component, event, helper) {
        var columns = [
                type: 'text',
                fieldName: 'Name',
                label: 'Opportunity Name'
                type: 'date',
                fieldName: 'CloseDate',
                label: 'Close Date'
                type: 'text',
                fieldName: 'StageName',
                label: 'Stage Name'
                type: 'currency',
                fieldName: 'Amount',
                label: 'Amount'
                type: 'text',
                fieldName: 'Product2Id',
                label: 'Product'
                type: 'currency',
                fieldName: 'ListPrice',
                label: 'List Price'
                type: 'number',
                fieldName: 'Quantity',
                label: 'Quantity'
                type: 'currency',
                fieldName: 'TotalPrice',
                label:'Total Price'
        component.set('v.gridColumns', columns);
        var action = component.get("c.getOpportunityList");
        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]['OpportunityLineItems'];
                    delete resultData[i].OpportunityLineItems; 
                component.set('v.gridData', resultData);

Apex Class

public class SampleAuraController {
    public static List <Opportunity> getOpportunityList() {
        List<Opportunity> oppList = new List<Opportunity>();
        oppList=[SELECT Name, CloseDate, StageName, Amount,(Select ListPrice, 
                    Quantity, Name,  TotalPrice From OpportunityLineItems) From Opportunity limit 5 ];    
       return oppList;

  • Yes we can ( hint: try using Map datastructure), have you tried to write it first? Are you stuck anywhere. Commented Nov 28, 2020 at 7:50
  • Yes Nagendra Singh can you solve this Commented Nov 28, 2020 at 9:51
  • I hope to solve this . Commented Nov 28, 2020 at 10:00
  • Well I see you have just copy pasted this example biswajeetsamal.com/blog/salesforce-lightning-treegrid, but where have you tried it? Commented Nov 28, 2020 at 10:23
  • Also the image you have provided seems to be a table inside a table and I am not sure if treegrid will be a suggestible approach here (I have never tied it), I suggest you to go with a VFPage where you can use datatables.net, this library, to build your table. And put it in an iframe within Aura or LWC. Commented Nov 28, 2020 at 10:45

1 Answer 1


lightning:treeGrid/lightning-tree-grid is meant to show hierarchical data (e.g. parent accounts and child accounts), not disparate types of data, such as your opportunity/line item example. This is why you're having problems finding a way to do it--it's not meant to be done. Strictly speaking, I'm pretty sure that Salesforce Lightning Design System doesn't even have an actual template for this data model, at least not that I've seen. Certainly not lightning:datatable/lightning-datatable, lightning:tree/lightning-tree, or lightning:treeGrid.

What you're really asking for would be a custom design from scratch, which really isn't a supported Q&A format here. It is certainly possible to design something like this, but it's going to be an assortment of elements tied together to make things happen.

I'd probably start with a lightning:accordion/lightning-accordion with corresponding lightning:accordionSection/lightning-accordion-section elements in a repeat for each Opportunity, then have a lightning:datatable/lightning-datatable within that. You will also need to massage the data to meet this new format.

It's not 100% clear what you're trying to do based on the image, as it seems a bit confused, but if you get started, we can help you with specific questions related to this design you're working on.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .