Custom Link in Lightning Datatable

In this post, we will implement the functionality to add Custom Link in Lightning Datatable. Fields with Datatype URL are displayed as Link by default if the type of column is provided as URL while setting the columns for the data table. But in the case of fields that are not of type URL, we need to do some customization to make the field as a clickable link in Datatable. We will also display an icon for one of the fields. You can check the same implementation using Lightning Web Component here.

Let’s hop into the implementation.

Implementation

We will display Account details in Datatable. The Name field of Account will be displayed as a Link to navigate to the Account record. We will also display Icon for the Phone field of the Account.

Custom Link in Lightning Datatable
Custom Link in Lightning Datatable

Create Aura Component DatatableFeatures and add markup to display the Datatable using lightning:datatable. Add the init handler.

DatatableFeatures.cmp

<aura:component controller="AccountManager" implements="flexipage:availableForAllPageTypes">
    <!-- attributes -->
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <!-- handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <lightning:card title="Accounts with Custom Account Link">
    	<div class="slds-p-around_xx-small">
            <lightning:datatable keyField="id" data="{!v.data}" columns="{!v.columns}"
                    hideCheckboxColumn="true"/>
        </div>
    </lightning:card>
</aura:component>

Create JS Controller and add the init method that will call the helper method initHelper.

DatatableFeaturesController.js

({
    init: function (component, event, helper) {
        helper.initHelper(component, event, helper);
    }
});

In JS Helper, call the Apex method fetchAccounts to get the list of Accounts. We have to provide a list of columns to columns attribute. This is provided in the form of an array of JSON objects. While adding the columns for the data table, we can provide properties for columns in JSON. For column Phone, add property cellAttributes and provide iconName attribute with value utility:phone_portrait to display an icon for the Phone values in the data table. The utility is the category of icon and phone_portrait is the name of the icon.

{label: 'Phone', fieldName: 'Phone', type: 'phone', 
    cellAttributes: { iconName: 'utility:phone_portrait' }}

Add Custom Link in Lightning Datatable

In order to add custom link in lightning datatable:

  • First, we need to add one extra property to Account records on the client side that are fetched using the Apex Controller and assign a custom URL as a value.
  • Then, we need to update JSON for the Name column to display it as a Link.

So, first loop through the list of Accounts and add property AccountUrl. Assign dynamic relative URL of Account using Id of the Account.

lstAccounts.forEach(function(item){
    item['AccountUrl'] = '/lightning/r/Account/' +item['Id'] +'/view';
});

Finally, while adding Name column in columns list:

  • Assign AccountUrl to fieldName property and url to type property.
  • Provide property typeAttributes and inside label property, assign Name to fieldName property.
{label: 'Name', fieldName: 'AccountUrl', type: 'url', typeAttributes:{
    label: {
        fieldName: 'Name'
    }
}}

This will display the Name of the Account as a Link. And after clicking on Account Name, it will open the Account record in the same tab. In order to open an Account in the new tab, provide the target property with the value ‘_blank’ inside typeAttributes.

DatatableFeaturesHelper.js

({
	initHelper : function(component, event, helper) {
        
		// Call apex method to get all the Accounts
        var action = component.get("c.fetchAccounts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                
                // Set the columns for Datatable
                component.set('v.columns', [
                    {label: 'Name', fieldName: 'AccountUrl', type: 'url', typeAttributes:{
                        label: {
                            fieldName: 'Name'
                        }
                    }},
                    {label: 'Account Number', fieldName: 'AccountNumber', type: 'text'},
                    {label: 'Type', fieldName: 'Type', type: 'text'},
                    {label: 'Phone', fieldName: 'Phone', type: 'phone', 
                     	cellAttributes: { iconName: 'utility:phone_portrait' }},
                    {label: 'Website', fieldName: 'Website', type: 'url'}
                ]);
                
                // Get all the Acocunts from the response.
                var lstAccounts = response.getReturnValue();
                
                // Loop through all the Accounts and add Attribute AccountUrl for each record.
                // The value for it should be the Url of the Account
                lstAccounts.forEach(function(item){
                    item['AccountUrl'] = '/lightning/r/Account/' +item['Id'] +'/view';
                });
                
                // Set data for the Datatable
                component.set("v.data", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
	}
})

AccountManager.apxc

public class AccountManager {
    
    @AuraEnabled
    public static list<Account> fetchAccounts(){
        return [SELECT Name, AccountNumber, Type, Phone, Website FROM Account LIMIT 10];
    }
}

This is how we can add a custom Link in Lightning Datatable. If you want to check more implementations in Lightning, you can check it here.

If you want to know more about Datatable in lightning, check Salesforce’s official documentation here.

Please Subscribe here if you don’t want to miss new implementations. See you in the next post.

2 thoughts on “Custom Link in Lightning Datatable”

  1. lstAccounts.forEach(function(item){
    item[‘AccountUrl’] = ‘/lightning/r/Account/’ +item[‘Id’] +’/view’;
    });

    Can this be written as
    lstAccounts.forEach(item => item[‘AccountUrl’] = ‘lightning/r/Account/’ + item[‘Id’] + ‘/view’;

    It is my understanding that helper.js is written when same functionality (code) needs to be executed at different scenario. In this example and one more of your example, I found that code doesn’t need to called repeatedly but still helper.js is used and it is called from init method of .js controller. Any specific reason for that?

    Reply
    • To answer your first question, Yes. I used ECMAScript 5 version of forEach function whereas you used latest varsion introduced in ECMAScript 6.
      And we should ideally use Controllers to listen to user events and other events like component, application events. Helper should be used to put business logic and reusable code.
      But there is little more to it. Check this link for more information.

      Reply

Leave a Comment