Add Hyperlinks to Columns in LWC Lightning Data Table

In the Salesforce LWC Lightning data table, you might be required to add a hyperlink to a record name or links to a URL in a table column to navigate to the record detail page or an external URL.

In this Salesforce tutorial, we will learn how to add hyperlinks to columns in the LWC Lightning datatable.

In the examples below, we will see the method to add hyperlinks for the following scenarios.

• Add hyperlink to record name in LWC data table
• Add a hyperlink in the LWC data table for an external URL
• Add a hyperlink to view the parent records in the LWC data table

Hyperlinks in Salesforce LWC Lightning data tables

In Salesforce Lightning data tables, to make a column clickable as a hyperlink and direct users to a record detail page, external URL, or custom destination, we configure the record’s values with a URL link using the “type: url” configuration.

With this URL, the click action will navigate to the record page using the attribute target: ‘_self,’ and for the external source URL, we use the recordLink: ‘https://www.example.com‘ attribute to navigate to that external site instead of a Salesforce page.

Add Hyperlink to Record name in LWC data table

In the example below, we will create a Lightning Web Component (LWC) data table with hyperlinks to record names, dynamically fetching contact records.

1. First, we will create a controller class to fetch and display Contact object records.

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [SELECT Id, Name, Email, Phone FROM Contact LIMIT 10];
    }
}

2. Create an LWC component and enter the code below in the HTML file.

<template>
    <lightning-card title="LWC table with hyperlink">
        <div class="slds-m-around_medium">
            <lightning-datatable
                key-field="Id"
                data={contacts}
                columns={columns}
                hide-checkbox-column>
          </lightning-datatable>
        </div>
    </lightning-card>
</template>

3. After this, enter the code below in the JS file of the LWC component, defining the logic of adding hyperlinks to the contact names in the data table.

import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactsController.getContactList';

export default class DynamicDataTable extends LightningElement {
    contacts;
    error;

    columns = [
        {
            label: 'Contact Name',
            fieldName: 'link',
            type: 'url',
            typeAttributes: { label: { fieldName: 'Name' }, target: '_blank' }
        },
        { label: 'Email', fieldName: 'Email'},
        { label: 'Phone', fieldName: 'Phone'}
    ];

    @wire(getContactList)
    wiredContacts({ error, data }) {
        if (data) {
            this.contacts = data.map(contact => ({
                ...contact,
                link: '/lightning/r/Contact/${contact.Id}/view'
            }));
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
            console.error('Error fetching contacts:', error);
        }
    }
}

In the above code, we first fetched contacts from the controller class using getContacts. After this, we defined the array of table columns in which we added hyperlinks to the contact name.

We used type: ‘url’ for the contact name column with a link field, meaning it’ll display a clickable URL. The typeAttributes map the contact’s name to the link’s label and sets it to open in a new tab with target: ‘_blank’. The other columns (Email and Phone) are mapped as text values without links.

To hyperlink the email and phone columns, you have to modify the code as follows.

{ label: 'Email', fieldName: 'Email', type: ' email'},
 { label: 'Phone', fieldName: 'Phone', type: 'phone'}

4. To make the LWC component available for the Lightning pages, enter the code below into the meta.xml file inside the <LightningComponentBundle> tag.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

5. Now navigate to the lightning page, and to deploy the LWC component, click on the settings icon and select Edit page.

Then, in the lighting app builder, drag and drop the data table component to the page region and save the changes.

On the lightning page, you will see the LWC data table with hyperlinks added to the contact name column.

As we click on the hyperlink, it will navigate to the contact record page with the reference to the contact ID.

This way, we can add a hyperlink to the record name column in the Salesforce LWC lightning data table.

Add a Hyperlink in the LWC data table for an External URL

In the example below, we will create a column in the LWC data table with the URL links that will navigate to the external source.

For this, ensure that you have a URL field in the object and that each record has the URL link stored in the URL field.

In this example, I will create the LWC data table for the Opportunity records, and the column field External_source__C will display external URL hyperlinks.

1. First, we will create a controller class that will fetch the Opportunity records using the code below.

public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities() {
        return [SELECT Id, Name, Amount, StageName, External_source__C 
                FROM Opportunity 
                WHERE Opportunity_External_URL__c != null 
                LIMIT 10];
    }
}

2. After this, create the LWC component and enter the code below in the HTML file to render the data in the LWC data table.

<template>
    <lightning-card title="LWC table with exteral Hyperlink">
        <div class="slds-m-around_medium">
            <template if:true={opportunities}>
                <lightning-datatable
                    key-field="Id"
                    data={opportunities}
                    columns={columns}
                    hide-checkbox-column
                ></lightning-datatable>
            </template>
        </div>
    </lightning-card>
</template>

3. After this, enter the code below in the JS file, defining the logic to fetch the records from the controller class and display an external hyperlink to the URL field.

import { LightningElement, wire } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';

export default class OpportunityTable extends LightningElement {
    opportunities;
    error;

    columns = [
        { label: 'Opportunity Name', fieldName: 'Name', type: 'text' },
        { label: 'Amount', fieldName: 'Amount', type: 'currency' },
        { label: 'Stage', fieldName: 'StageName', type: 'text' },
        {
            label: 'External Link',
            fieldName: 'External_source__c', 
            type: 'url',
            typeAttributes: {
                label: 'Web Source', 
                target: '_blank'
            }
        }
    ];

    @wire(getOpportunities)
    wiredOpportunities({ error, data }) {
        if (data) {
            this.opportunities = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.opportunities = undefined;
            console.error('Error fetching opportunities:', error);
        }
    }
}

In the above code, we created an array of all column fields that will be displayed in the table, and a hyperlink is added for the URL field column External_source__c labeled as External Link, and using type: URL, it will be treated as a hyperlink.

The label “Web source” will display it as hyperlink text instead of a raw URL. The target: ‘_blank’ will redirect to the URL link to the source as we click on it.

4. At last, enter the code below in the meta.xml file to make the component visible to the Lightning pages.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

5. Now, deploy the LWC component to the Lightning page and save the changes.

In the LWC lighting data table, we will see the hyperlinks redirecting to the external URL are displayed in the custom field column External_source__c that we have labeled as External Link.

This way, we can add hyperlinks for the external URL field values in the Salesforce LWC data table by following the above steps.

Add a Hyperlink to view the parent records in the LWC data table

In the LWC data table, we also display records that have parent-child relationships between them. Let’s take an example of the contact data table where we displayed the parent Account name specific to each contact in the data table row.

As we added a hyperlink to the contact record in the above example, we can also add a hyperlink to the parent record’s name in the data table.

Follow the steps below to add a parent record column with the Salesforce LWC data table hyperlink.

1. To get the contacts with the parent account names in the data table, create the controller class using the code below.

public with sharing class ContactsController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [SELECT Id, Name, Email, AccountId, Account.Name 
                FROM Contact 
                WHERE AccountId != null 
                LIMIT 10];
    }
}

In the above controller class, we have included the account name and account ID because we need the account ID to navigate the record page when the user clicks on the hyperlink.

2. Now, create an LWC component and enter the below code in the HTML file.

<template>
    <lightning-card title="Contacts with Parent Account Links">
        <div class="slds-m-around_medium">
            <lightning-datatable
                key-field="Id"
                data={data}
                columns={columns}
                hide-checkbox-column
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

3. Enter the code below in the JS file of the LWC component

import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import getContactList from '@salesforce/apex/ContactsController.getContactList'; 

export default class ParentRecordHyperlinkTable extends NavigationMixin(LightningElement) {
    columns = [
        { label: 'Contact Name', fieldName: 'Name', type: 'text' },
        {
            label: 'Account Name',
            fieldName: 'accountLink', 
            type: 'url',
            typeAttributes: {
                label: { fieldName: 'AccountName' }, 
                target: '_blank'
            }
        },
        { label: 'Email', fieldName: 'Email', type: 'email' }
    ];
    data = [];

    @wire(getContactList)
    wiredContacts({ error, data }) {
        if (data) {
            
            this.data = data.map(contact => ({
                Id: contact.Id,
                Name: contact.Name,
                Email: contact.Email,
                AccountName: contact.Account?.Name || 'No Account', 
                accountLink: contact.AccountId ? '/lightning/r/Account/${contact.AccountId}/view' : '' 
            }));
        } else if (error) {
            console.error('Error fetching contacts:', error);
        }
    }
}

In the above code, we have used the logic to get the account ID from the fetched records, adding a hyperlink to the account name and navigating to the account record page.

After fetching the records from the controller class, we used the NavigationMixin to add a navigation feature. Then, in the columns, we have defined ‘Account Name‘ column, set as “type: ‘url'” with ‘fieldName: ‘accountLink”, this will add the URL to the parent account name.

The ‘typeAttributes‘ make it clickable, using ‘AccountName‘ as the label and opening links in a new tab with “target: ‘_blank.'”

The “/lightning/r/Account/${contact.AccountId}/view’” is the view URL to the account record page.

Navigation using Event handler:

Using the code below, we can create an event handler to programmatically handle navigation.

handleRowClick(event) {
       const row = event.detail.row;
      if (row.accountLink) {
      this.navigateToRecord(row.AccountId); 
    }
}

An alternate method to define NavigationMixin:

In the above code, we have defined the navigation logic in the columns using “type attributes”; instead, we can define the navigation logic in a separate code block for code reusability.

navigateToRecord(recordId) {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
            recordId: recordId,
            objectApiName: 'Account',
             actionName: 'view'
           }
       });
    }

4. Enter the code below in the meta.xml file to make the component available for the Lightning pages.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

5. After deploying the LWC component to the Lightning page, we can see the parent account specific to each contact displayed with a hyperlink in the table column.

This way, we can add hyperlinks to the parent records in the Salesforce LWC lightning data table, following the above steps.

Change the Colour of Hyperlinks Columns in the LWC data table

In the Salesforce LWC data table, adding CSS using cellAttributes with class or style doesn’t directly apply to the hyperlink text due to how the Lightning data table renders URLs.

The best approach is to create a static CSS file and refer to it in your LWC component.

For example, having an LWC table with opportunities records where we have added hyperlinks to the record names. To change the hyperlink color in this LWC table, follow the steps below.

1. Create a static CSS file with the code below. Here, I have added logic to change the hyperlink colour to red.

.red-link lightning-formatted-url a {
    color: #ff0000 !important;
}

:host {
    --slds-c-link-color: #ff0000;
}

2. After creating the CSS file, upload it to the static resource; for that, navigate to setup > Static resources > New.

Enter the label for the static resource and upload the CSS file.

3. In the JS file, ensure you imported the static CSS file and refer to the CSS style for the hyperlink column and the {loadStyle} as shown in the code below.

import { LightningElement, wire, track } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';
import { loadStyle } from 'lightning/platformResourceLoader';
import COLORS from '@salesforce/resourceUrl/colors'; 
const columns = [
    { 
        label: 'Opportunity Name', 
        fieldName: 'link', 
        type: 'url',
        typeAttributes: { 
            label: { fieldName: 'Name' },
            target: '_blank'
        },
        cellAttributes: { 
            class: 'red-link' 
        }
    },

In the columns, we have referenced the static CSS using CellAttributes.

4. Apply the changes, and for this, you might need to redeploy the LWC component to the Lightning page to reflect the changes.

After making the changes, we will see that the hyperlink column text colour is changed to the default blue colour.

This way, we can change the hyperlink column’s colour in the Salesforce LWC data table using a static CSS file.

Conclusion

In this Salesforce tutorial, we learned how to add hyperlinks to the columns in the LWC Lightning data table. We used pagination with NavigationMixin and type attributes to define a column as a hyperlink.

In the above examples, we have added hyperlinks to the record name, external URLs, and parent records in the LWC Lightning data table. Following the above steps, we can efficiently add hyperlinks to the column values in the LWC data table.

You may also like to read:

• Row-Level Actions in LWC Datatable in Salesforce
• Pagination in Salesforce LWC Data Table
• Display Checkbox fields in the LWC Data Table
• Show Image in Salesforce LWC Data Table

Bijay Kumar

I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.