How to Add Hyperlink in lightning:datatable

Below are the Sample Code to add hyperlink in Lightning DataTable:-
{label:’Website’, fieldName:’Website’, type: ‘url’, typeAttributes: { label: ‘My Website Name’, target:’_blank’}}

Apex Class:-

public class AccountController {
    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="AccountController" 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 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);
Sample Output:
Use Case by Nathan Solis (Insert HTML into Lightning Datatable Column)
please watch video for reference: – How to Add Hyperlink in lightning:datatable


Reference of Lightning Datatable” 

Written by 

3x Salesforce MVP | Platform Champion | 18x Salesforce Certified | MuleSoft Certified | 8x Trailhead Ranger | TechForce Services | Sydney | Australia

Leave a Reply

Your email address will not be published.