How to Add Hyperlink in lightning:datatable

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 {
    @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="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: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);
	}
})

Sample Output:

Use Case by Nathan Solis – https://success.salesforce.com/answers?id=9063A000000E3nfQAC (Insert HTML into Lightning Datatable Column)
please watch video for reference:
https://www.youtube.com/watch?v=gljg7gEBUbM – How to Add Hyperlink in lightning:datatable