lightning:treeGrid Conditional Action(button) column

Question

We are trying to build a Hierarchical view of records using lightning:treeGrid and based on value from a field in each record, the button in action(button) column should change.

Let's Say we are passing a list of custom Object records with a field as status__c to treeGrid. In each row, if the status__c of record is "Completed", the button column should display a button as "Proceed", if the status__c of record not "Completed", the button column should display a button as "Redo".

Is it possible with lightning:treeGrid?

Any ideas or solution on this?

Answer 1

I had a need to do the same thing and found a solution based on another answer dealing with datatables

The same method happens to work with treeGrid and not just to change attributes, but you can also use it to change the actions placed on click. I have a working dynamic action list for each type of row on my treeGrid component. Here's a simplified bit of code to get you started for your specific use case:

Component

<!-- ATTRIBUTES -->
<aura:attribute name="gridCols" type="Object[]" />
<aura:attribute name="gridData" type="Object[]" />

<!-- HANDLERS -->
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>

<!-- DISPLAY -->
<lightning:layout>
  <lightning:treeGrid columns="{! v.gridCols }"
                      data="{! v.gridData }"
                      hideCheckboxColumn="true"
                      keyField="id"
                      onrowaction="{!c.onRowSelect}" />
</lightning:layout>  

Controller

({
  doInit: function(cmp,event,helper){
    //call actions from handler function
    var actions = helper.getRowActions.bind(this, cmp);

    var gridCols = [
        {label: 'Name', fieldName: 'Name', type: 'text'},
        {type: 'action', typeAttributes: { rowActions: actions} }
    ];
    cmp.set('v.gridCols',gridCols);

    /*
    var gridData = [];
    ...data building (however you get your data)...
    cmp.set('v.gridData',gridData);
    */
  },
  onRowSelect: function(cmp,event,helper){
    var action = event.getParam('action');
    var row = event.getParam('row');
    switch (action.name) {
        case 'proceed_action':
        //proceed action things to do goes here
          break;
        case 'redo_action':
        //redo action things to do goes here
          break;
    }
})

Helper

({
  getRowActions: function(cmp,row,cb){
    //handler function to build actions dynamically
    var actions = [];                        
    if(row.status__c == "Completed"){
        actions = [{label:'Proceed',name:'proceed_action'}];
    }else{
        actions = [{label:'Redo', name:'redo_action'}];
    }
    cb(actions);
  },
})

Using this code you can pass in different action lists to different rows based on each row.