How to Disable and Enable button in lightning:datatable?

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}"/>

</aura:component>

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; 

}

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;
    }
        
}

Output:



No comments:

Post a Comment