function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
UmeShinUmeShin 

How can we click and call Javascript from icon of lightning datatable?

I wanna call Javascript when I click the icon of datatable like the attached.
How can we call Javascript from datatable icon?
User-added image
 
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component:
<aura:component controller="DatatableButtonIconC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="dataList" type="Object" />
    <aura:attribute name="columnsList" type="List" />
    
    <aura:handler name="init" value="{! this }" action="{! c.init }" />
    
    <div class="slds-is-relative">
        <lightning:datatable keyField="Id"
                             data="{! v.dataList }"
                             columns="{! v.columnsList }"
                             hideCheckboxColumn="true" 
                             onrowaction="{! c.handleRowAction }"/>
    </div>
</aura:component>

Controller:
({
    init: function (component, event, helper) {
        var columns = [
            {
                type: 'button-icon',
                fixedWidth: 40,
                typeAttributes: {
                    iconName: 'utility:description',
                    name: 'show_record', 
                    title: 'Show',
                    variant: 'border-filled',
                    alternativeText: 'show',
                    disabled: false
                }
            },
            {
                label: 'Name', 
                fieldName: 'Name', 
                type: 'text'
            }
        ];
        var action  = component.get("c.getContactsList");
        action.setCallback(this,function(response){
            var result = response.getReturnValue();
            component.set('v.columnsList', columns);
            component.set("v.dataList", result);
        });
        $A.enqueueAction(action);
    },
    
    handleRowAction :function(cmp,event,helper){
        //action gives which action performed
        var action = event.getParam('action');
        //row gives complete row information
        var row = event.getParam('row');
        console.log('*****row:'+JSON.stringify(row));
        console.log(JSON.stringify(action));
        alert('You have selected View Action for '+row.Name+'(id='+row.Id+')');
    }
})

Apex:
public class DatatableButtonIconC {
    
    @AuraEnabled
    public static List<Contact> getContactsList() {
        return [select Id,Name from Contact limit 10];
    }
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas