Activity Forums Salesforce® Discussions How to use hyperlink in lightning datatable in salesforce?

  • Nikita

    Member
    November 11, 2019 at 3:56 pm

    Hi Prachi,

    Following is a sample Code to add hyperlink in Lightning DataTable, please make changes as per your need.

    Apex Controller

    public class TestClass111 {
        @AuraEnabled
        public static List<Account> getAccounts(){
            List<Account> acList = new List<Account>();
            acList = [Select Id, Name, Website From Account Where Website != NULL LIMIT 10];
            return acList;
        }
    }

    Lightning Component

    <aura:component controller="TestClass111" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
        <aura:attribute name="accountList" type="Account[]"/>
        <aura:attribute name="columns" type="List"/>
        <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
        <h4>Lightning Data Table</h4>
        <lightning:datatable
        	data="{!v.accountList}"
            columns="{!v.columns}"
            keyField="Id"
            hideCheckboxColumn="true"
        />
    </aura:component>

    Lightning Controller

    ({
    	onInit : function(component, event, helper) {
            var action = component.get("c.getAccounts");
            action.setCallback(this, function(response){
                if(response.getState() === 'SUCCESS'){
                    component.set("v.accountList", response.getReturnValue());
                    var columns = [
                        {label:'Id', fieldName:'Id', type:'String'},
                        {label:'Name', fieldName:'Name', type:'String'},
                        {label:'Website', fieldName:'Website', type: 'url', typeAttributes: { label: 'My Website Name', target:'_blank'}}
                    ];
                    component.set("v.columns", columns);
                }
                else{
                    alert(response.getState());
                }
            });
            $A.enqueueAction(action);
    	}
    })

     

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos