How to add custom link in data table in LWC?

 In this blog post we will see How to add custom link in data table in LWC?

Let us display the account details using data table, we will add hyper link to Account Name so that user can click and navigate to account detail page.

The below code will display columns without hyper link as shown.

const columns=[

{label: 'Account Name', fieldName: 'Name'},

{label: 'Account Industry', fieldName: 'Industry'},

{label: 'Account Description', fieldName: 'Description'},

];

In order to add hyper link to a column we need to add the typeAttributes property as shown below and assign Name to fieldName property as highlighted in 

const columns=[

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

{label: 'Account Industry', fieldName: 'Industry'},

{label: 'Account Description', fieldName: 'Description'},

];

Assign Account_URL to fieldName and type as 'url' as highlighted in yellow.

Now, let us understand with an example,

testLWCTableExample.html

<template>

    <h1>Account Data Table</h1>

<template if:true={accList}>

    <lightning-datatable

        key-field="id"

        data={accList}

        columns={columns} >

        </lightning-datatable>

</template>

<template if:true={error}>

 Some error occured.

</template>

 </template>

testLWCTableExample.js

import { LightningElement, track, wire } from 'lwc';

import getAccountList from '@salesforce/apex/AccountDataController.getAccountList';

const columns=[

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

{label: 'Account Industry', fieldName: 'Industry'},

{label: 'Account Description', fieldName: 'Description'},

];

export default class TestLWCTableExample extends LightningElement {

    @track error;

    @track columns = columns;

    @track accList;

    @wire (getAccountList) accList({error, data})

    {

        if(data)

        {

            let accParsedData=JSON.parse(JSON.stringify(data));

            let baseUrlOfOrg= 'https://'+location.host+'/';

            accParsedData.forEach(acc => {

                if(acc.Id){

                //acc.Parent_Account_Name=acc.Parent.Name;

                acc.Account_URL=baseUrlOfOrg+acc.Id;

                }

            });

            this.accList = accParsedData;

        }

        else if(error)

        {

            this.error = error;

        }

    }

}

testLWCTableExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>55.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

AccountDataController.cls

public with sharing class AccountDataController {

    @AuraEnabled(cacheable=true)

    public static list<Account> getAccountList(){

 

        list<Account> acclist=new list<Account>();

        acclist=[SELECT id,Name,Industry,Description from Account Limit 10];

        return acclist;

    }

    public AccountDataController() {

 

    }

}

Now, Let add the component to Account Record detail page to see the output: