function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mohan Reddy 80Mohan Reddy 80 

how to append hyperlink in lightning:datatable?

Ramakrishna Reddy GouniRamakrishna Reddy Gouni
there is no possibilty to append hyperlink in datatable in lighting but, we can do row level action with onrowaction
mritzimritzi
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);
	}
})

​​

Result:

lightning datatable with hyperlinks


Mark this as BEST ANSWER, if it solves your issue.
NagendraNagendra (Salesforce Developers) 
Hi Mohan,

Assuming that you want to hyperlink a record in lightning.

May I suggest you please check with below link from the stack exchange community with a similar discussion which might help you further. Hope this helps.

Kindly mark this as solved if the reply was helpful so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thanks,
Nagendra
 
Aditya Kaushal 6Aditya Kaushal 6
Hi Mohan,

Kindly check this link:
It solved my problem.

Hope this helps.
 
 
Thanks, 
Aditya
Chris Baker 25Chris Baker 25

Aditya Kaushal 6, that link solved my problem too. Thanks
Josué PeixotoJosué Peixoto
Just add this code:

  {label:'yourField', fieldName:'Website', type: 'url', typeAttributes: { label: 'My Website Name', target:'_blank'}}

Click to be the best answer if it works.

Att,.
Josué Peixoto
aarti garg 6aarti garg 6
Helper.js
({
    doinit: function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Name', fieldName: 'linkName', type: 'url',
typeAttributes: {label: { fieldName: 'Name' },value:{fieldName: 'linkName'}, target: '_blank'}
},
                {label: 'Phone', fieldName: 'Phone__c', type: 'text'},
                {label: 'Email', fieldName: 'Email__c', type: 'text'}
               
            ]);
            var action = component.get("c.fetchFamilyContacts");
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                 var records =response.getReturnValue();
                records.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
                component.set("v.lstFC", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})
Fatima ParveenFatima Parveen
Hello Everyone,

Follow below link for the solution,
https://developer.salesforce.com/forums/?id=9062I000000XuIjQAK

Hope this helps.