How to Hyperlink a Record in lightning:datatable?

Sample Code:

Component:

<aura:component implements="force:appHostable"
    controller="AccountListController">
                
    <aura:attribute type="Account[]" name="acctList"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
    
    <lightning:datatable data="{! v.acctList }" 
                         columns="{! v.mycolumns }" 
                         keyField="id"
                         hideCheckboxColumn="true"/>
    
</aura:component>

Component Controller:

({
    
    fetchAccounts : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Account Name', fieldName: 'linkName', type: 'url', 
            typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
            {label: 'Industry', fieldName: 'Industry', type: 'text'},
            {label: 'Type', fieldName: 'Type', type: 'Text'}
        ]);
        var action = component.get("c.fetchAccts");
        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.acctList", records);
            }
        });
        $A.enqueueAction(action);
    }


})

Apex Class:

public class AccountListController {
    
    @AuraEnabled
    public static List < Account > fetchAccts() {
        
        return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 10 ];
        
    }
    

}

Output:


11 comments:

  1. Thanks the URL functionality is working but I am getting Id's instead of Names under the Account name Column. Please Help

    ReplyDelete
    Replies
    1. you need to set the Link value and Link label.

      {label: 'Account Name', fieldName: 'linkName', type: 'url',
      typeAttributes: {label: { fieldName: 'Name' },value:{fieldName: 'linkName'}, target: '_blank'}
      },

      It Worked for me

      Delete
  2. I am using sorting along with this code. It is not working. Can you please display helper link on your sorting post. http://www.infallibletechie.com/2018/03/lighting-data-table-sorting-example.html

    ReplyDelete
  3. Hi Magulan,

    Thank You! for your reply. While using hyper link on Account name, field name you are passing account Id and in type attribues you are passing actual name of account. While sorting clicked it is taking field name as account Id not account name. So sorting functionality is behaving differently. Can you please help me to pass name instead of Id on sorting while we are using hyper link or button on name field.

    ReplyDelete
    Replies
    1. Check this - https://www.infallibletechie.com/2019/01/lighting-data-table-sorting-while-we.html

      Delete
  4. Hi Magulan,

    Thank You! For your reply. Its helped great for me. I am appreciating your reply and your dedication, hard work on salesforce.

    ReplyDelete