Custom Link in LWC Datatable

This post will walk you through the implementation to create Custom Link In LWC Datatable. Usually, the 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.

You can check the same implementation using Aura Components here. Let’s get into the implementation.

Implementation

In this 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.

This is how our implementation of Custom Link in LWC Datatable will look:

First, create Lightning Web Component customLink and add a markup to display datatable using lightning-datatable.

This is how our HTML file would look:

customLink.html

<template>
    <lightning-card title="Account List with Custom Link">
        <div class="slds-p-around_xx-small">
            <lightning-datatable
                key-field="Id"
                data={lstAccounts}
                columns={lstColumns}>
        </lightning-datatable>
        </div>
    </lightning-card>
</template>

The lstAccounts will have the list of Accounts that will be displayed in Datatable and lstColumns contains the list of Columns.

In the JavaScript file, first import the Apex Class @AuraEnabled method that fetches the Accounts.

import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';

This is how our AccountController looks:

AccountController.cls

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

Also Read:

• Call Apex Method in LWC (Imperatively and Wire Service)
• Drag and Drop between LWC (Multiple)

In the connectedCallback(), we will call this method to get the list of Accounts.

We have to provide a list of columns to COLUMNS property. 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.

Ideally, it should look something like this:

const COLUMNS = [
    {label: 'Name', fieldName: 'Name', type: 'text'},
    {label: 'Type', fieldName: 'Type', type: 'text'},
    {label: 'Phone', fieldName: 'Phone', type: 'phone', 
        cellAttributes: { 
            iconName: 'utility:phone_portrait' 
        }
    }
];

Add Custom Link in LWC Datatable

In order to add custom link in LWC 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.

if(this.lstAccounts){
                this.lstAccounts.forEach(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.

This is how our COLUMN for Name would look:

{
    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. This is how we can add custom link in LWC datatable.

This is how our complete JavaScript would look:

customLink.js

import { LightningElement, track } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';
const COLUMNS = [
    {
        label: 'Name', fieldName: 'AccountURL', type: 'url',
        typeAttributes: {
            label: {
                fieldName: 'Name'
            }
        }
    },
    {label: 'Type', fieldName: 'Type', type: 'text'},
    {label: 'Phone', fieldName: 'Phone', type: 'phone', 
        cellAttributes: { 
            iconName: 'utility:phone_portrait' 
        }
    }
];

export default class CustomLink extends LightningElement {
    @track lstAccounts;
    lstColumns = COLUMNS;

    connectedCallback(){
        fetchAccounts().then(response => {
            this.lstAccounts = response;
            if(this.lstAccounts){
                this.lstAccounts.forEach(item => item['AccountURL'] = '/lightning/r/Account/' +item['Id'] +'/view');
                
            }
        }).catch(error => {
            console.log('Error: ' +error);
        });
    }
}

Below is the meta.xml file to add this component on the Lightning App page for testing.

customLink.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Also Read:

• Lightning Message Service (LMS) – Future of Communication
• Difference between Var, Let, and Const in JavaScript

That is all from this post. This is how we can add custom link in LWC datatable. If you don’t want to miss new implementations, please Subscribe here.

You can check more implementations using Lightning Web Components here.

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

See you in the next implementation, Thank you.