2

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)

enter image description here

Thanks 

6
  • do you want it in VF page or lightning component? Oct 19 '18 at 12:57
  • Lightning, I've found the treeGrid component, Now i just have to have the columns work with multiple fieldNames Oct 19 '18 at 12:59
  • @TimChadwick - Seems you have already found the component. You are on right track here, and that's the component that you will require to achieve your use case.
    – Jayant Das
    Oct 19 '18 at 13:32
  • @JayantDas, Any tips on dynamiclly replacing (Or hiding) the column header so you can have two different feilds in the same column. I.E. Parent.Name -> Child.Description Oct 19 '18 at 13:34
  • 1
    I haven't tried it out myself, but will provide some pointers as an answer (as will run out with character limits here), if that helps.
    – Jayant Das
    Oct 19 '18 at 13:41
3

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.

1
  • Ah I see; So Create a wrapper for the colums based on logical, So the feild name would always be the same However the value under that can change. Thank you, Oct 19 '18 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.