Add Hyperlink Column in LWC Datatable

Hello friends, today we will discuss How to Add Hyperlink Column in LWC Datatable. When the type of column for the data table is URL, Fields with Datatype URL are displayed as Links by default. However, if the field is not of type URL, we need to customize it to make it clickable in Datatable.

Also, check this: Use createRecord in LWC Salesforce

Key Highlights :

1. Can make clickable record name column.
2. Navigate to a particular record when clicking the link.

Code :

AccountDataController.cls :

public class AccountDataController {
    @AuraEnabled(Cacheable = true)
    public static List<Account> getAccounts(){
      return [SELECT Id, Name, Industry, Type, Phone, Rating, AccountNumber FROM Account ORDER BY Name LIMIT 10];
    }
}

linkLWCDatatable.HTML :

<template>
	<lightning-card title="Add Hyperlink Column in LWC Datatable" icon-name="standard:account">
		<div class="slds-p-horizontal_small">
			<div if:true={data}>
				<lightning-datatable data={data} columns={columns} key-field="Id"></lightning-datatable>
			</div>
		</div>
	</lightning-card>
</template>

linkLWCDatatable.JS:

import { LightningElement, wire, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountDataController.getAccounts';

const columns = [
    {
        label: 'Name',
        fieldName: 'accLink',
        type: 'url',
        typeAttributes: { label: { fieldName: 'Name' }, target: '_blank' }
    }, {
        label: 'Type',
        fieldName: 'Type',
        type: 'text',
    }, {
        label: 'Phone',
        fieldName: 'Phone',
        type: 'Phone',
    }, {
        label: 'AccountNumber',
        fieldName: 'AccountNumber',
        type: 'text'
    }
];

export default class LinkLWCDatatable extends LightningElement {
    data = [];
    columns = columns;

    @wire(getAccounts)
    wireAccounts({ error, data }) {
        if (data) {
            data = JSON.parse(JSON.stringify(data));

            data.forEach(res => {
                res.accLink = '/' + res.Id;
            });

            this.data = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
        }
    }
}

linkLWCDatatable.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. LWC Datatable