Search code examples
salesforcesalesforce-lightning

Hide button inside Lightning Datatable based on row value

I need to hide the View button inside Lightning Datatable based on Team Group Name in that same row enter image description here

If team Group name is blank then view button must be hidden and if team group name is not blank then i need to show view button

Here is my code:

columns: [
    {label: "Course Title", fieldName: "CourseTitle", type: "text"},
    {label: "Team Group Name", fieldName: "TeamGroupName", type: "text"},
    {label: "Campus Name", fieldName: "CampusName", type: "text"},
    {label: "Course", fieldName: "Course", type: "text"},
    {label: "Section ID", fieldName: "SectionID", type: "text"},
    {label: "Session", fieldName: "Session", type: "text"},
    {label: "Course Level", fieldName: "CourseLevel", type: "text"},
    {label: "Term Length", fieldName: "TermLength", type: "text"},
    {type: "button", typeAttributes: {
            label: 'View',
            name: 'View',
            title: 'View',
            disabled: false,
            value: 'view',
            iconPosition: 'left'
        }}
]

Component:

<aura:component implements="force:appHostable"
controller="Teams_Controller">

<aura:attribute type="Account[]" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>

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

<lightning:datatable data="{! v.acctList }" 
                     columns="{! v.mycolumns }" 
                     keyField="id"
                     hideCheckboxColumn="false"
                     onrowaction="{!c.viewRecord}"/>

Solution

  • I've had the same issue as yours.
    I managed to solve it by following the solution here.

    Edit: I'm posting also here the solution. It should be similar to your case.

    Component:

    <aura:component implements="force:appHostable"
   controller="AccountListController">

<aura:attribute type="AccountWrapper[]" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>

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

<lightning:datatable data="{! v.acctList }" 
                     columns="{! v.mycolumns }" 
                     keyField="id"
                     hideCheckboxColumn="true"
                     onrowaction="{!c.viewRecord}"/>

    Component Controller:

    ({

fetchAccounts : function(component, event, helper) {
    component.set('v.mycolumns', [
        {label: 'Account Name', fieldName: 'accName', type: 'text'},
        {label: 'Industry', fieldName: 'accIndustry', type: 'text'},
        {label: 'Type', fieldName: 'accType', type: 'text'},
        {label: 'Active?', fieldName: 'accActive', type: 'text'},
        {type: "button", typeAttributes: {
            label: 'View',
            name: 'View',
            title: 'View',
            disabled: { fieldName: 'isActive'},
            value: 'view',
            iconPosition: 'left'
        }}
    ]);
    var action = component.get("c.fetchAccts");
    action.setParams({
    });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            component.set("v.acctList", response.getReturnValue());
        }
    });
    $A.enqueueAction(action);
},
viewRecord : function(component, event, helper) {
    var recId = event.getParam('row').accId;
    var actionName = event.getParam('action').name;
    if ( actionName == 'View') {
        var viewRecordEvent = $A.get("e.force:navigateToURL");
        viewRecordEvent.setParams({
            "url": "/" + recId
        });
        viewRecordEvent.fire();
    }
}
})

    Apex Classes:

    public class AccountWrapper {

@AuraEnabled
public String accName;
@AuraEnabled
public Boolean isActive;
@AuraEnabled
public String accIndustry;
@AuraEnabled
public String accType;
@AuraEnabled
public String accActive;   
@AuraEnabled
public String accId;
}

    AccountListController:

    public class AccountListController {

@AuraEnabled
public static List < AccountWrapper > fetchAccts() {
    List < AccountWrapper > listAcctWrapper = new List < AccountWrapper >();
    for ( Account acc : [ SELECT Id, Name, Industry, Type, Active__c FROM Account LIMIT 10 ] ) {
        AccountWrapper AccountWrap = new AccountWrapper();
        AccountWrap.accName = acc.Name;
        AccountWrap.isActive = acc.Active__c == 'Yes' ? true : false;
        AccountWrap.accIndustry = acc.Industry;
        AccountWrap.accType = acc.Type;
        AccountWrap.accActive = acc.Active__c;
        AccountWrap.accId = acc.Id;
        listAcctWrapper.add(AccountWrap);
    }
    return listAcctWrapper;
  }
}

    Hope it helps you.