How to Add Hyperlink Columns in LWC Datatable: A Practical Guide

Displaying tabular data with Salesforce Lightning Web Components (lightning-datatable) is straightforward, but users often need interactive links—such as opening record detail pages or external websites—directly from row cells. You can easily enable clickable links using either standard url column types or custom data types extended from LightningDatatable.

In plain words: A hyperlink column in an LWC Datatable turns plain text cell values into clickable links that take users directly to record pages or web links without needing manual action buttons.

Step 1: Setting Up the Component

Before implementing the code, ensure you have a standard LWC project set up using Salesforce DX or VS Code. In this pattern, we will build a data structure where the displayed label and destination URL are properly mapped.

Step 2: Defining the Hyperlink Column Configuration

The standard way to render a link in lightning-datatable is to set the column type to 'url' and pass key properties inside typeAttributes:

Standard URL Mapping: Point fieldName to the variable containing the target URL, and use typeAttributes.label to define what text displays on screen.

// myDatatableComponent.js
import { LightningElement, track } from 'lwc';

const COLUMNS = [
    { label: 'Account Name', fieldName: 'accountName' },
    {
        label: 'Website',
        fieldName: 'websiteUrl',
        type: 'url',
        typeAttributes: { 
            label: { fieldName: 'websiteLabel' }, 
            target: '_blank' 
        },
        sortable: true
    }
];

export default class MyDatatableComponent extends LightningElement {
    columns = COLUMNS;
    
    @track data = [
        {
            id: '1',
            accountName: 'Acme Corp',
            websiteUrl: 'https://www.salesforce.com',
            websiteLabel: 'Visit Salesforce'
        },
        {
            id: '2',
            accountName: 'Global Tech',
            websiteUrl: 'https://developer.salesforce.com',
            websiteLabel: 'Developer Portal'
        }
    ];
}

Developer Trap: Passing a raw Record ID directly into a url column type without prepend formatting (e.g., /001XXXXXXXXXXXX or a full path) causes broken navigation. Always format navigation URLs or use NavigationMixin pre-processing before binding data to the datatable!

Step 3: Creating a Custom Type (Advanced Extension)

If you need custom navigation handlers or special click events instead of default standard links, extend LightningDatatable and attach a custom custom-cell template:

Create a JavaScript file to define your custom type mapping:

// customDatatable.js
import LightningDatatable from 'lightning/datatable';
import customLinkTemplate from './customLinkTemplate.html';

export default class CustomDatatable extends LightningDatatable {
    static customTypes = {
        hyperlink: {
            template: customLinkTemplate,
            standardCellLayout: true,
            typeAttributes: ['linkText']
        }
    };
}

Next, define the custom template markup for your cell:

<!-- customLinkTemplate.html -->
<template>
    <a href={value} target="_blank" onclick={handleLinkClick}>
        {typeAttributes.linkText}
    </a>
</template>

Step 4: Rendering the Datatable in Markup

Finally, bind the columns and formatted rows in your component template:

<!-- myDatatableComponent.html -->
<template>
    <lightning-card title="Accounts with Hyperlinks" icon-name="standard:account">
        <div style="height: 300px;">
            <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}
                hide-checkbox-column>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

Key Summary: Hyperlinks in LWC Datatable

• Native Solution: Use column type: 'url' with typeAttributes.label for standard link needs.
• Target Option: Set target: '_blank' to open links in a new tab, or '_self' to stay in the same window.
• Advanced Flexibility: Extend LightningDatatable for custom event firing or specialized link formatting.

Conclusion

Adding clickable hyperlinks to an LWC Datatable improves usability and user workflows. By leveraging built-in URL column types or expanding custom datatable definitions, you provide seamless navigation across Salesforce records and external links.