Nested / multi level lighting:datable

Question

I'm looking to see (If it is even possible) to create a multi level lightning datatable.

I.E.

The parent object has a tickbox in table element 0, If selected a sublevel opens and you can see the child records with there own actions, held in there own datatable. 

Kind of like this picture (Taken from a VF page example)

Thanks 

Answer 1

As you have already figured out that you can create a nested table of data using lightning:treeGrid for your use case here. As for your comment:

Any tips on dynamically replacing (Or hiding) the column header so you can have two different fields in the same column. I.E. Parent.Name -> Child.Description

I haven't tried it out myself, but I would think this approach should work for your use case here.

The columns in the tree grid are populated using the columns attribute of the component and that the data within those columns are populated using data attribute.

<aura:attribute name="gridColumns" type="List" />
<aura:attribute name="gridData" type="Object" />
<lightning:treeGrid columns="{! v.gridColumns }"
        data="{! v.gridData }"
        keyField="Id"
        aura:id="mytree"
/>

So, if you can fetch both the attributes here from an aura apex controller, you will have the capability of fetching dynamic columns and corresponding data for those columns.

You can have methods defined in your apex as:

@AuraEnabled
public static List<String> getColumns(String condition){
    // based on your condition, create the columns here dynamically and send back to component
    return columnList;
}


@AuraEnabled
public static List<String> getColumnData(String condition){
    // based on your condition, fetch the data corresponding to your columns
    return columnData;
}

Now from your controller, you can call these methods based on the condition which helps you determine as which column and their corresponding data you need to fetch. Something as:

cmp.set("v.gridColumns", get columns from apex controller);
cmp.set("v.gridData", get column data from apex controller);

This is the simplest approach you can take, but more fine tuning can be always done as always for any code. E.g., you may want to merge both methods in one in apex, etc.

Hope this helps.