function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Akash Choudhary 17Akash Choudhary 17 

Add Navigation to LWC Data Table

Hi All,

How can we make the id field in the LWC data table hyperlinked so that it can navigate to the record. 

lightningDataTable.html
<template>
<lightning-card title = "Search Employees" icon-name = "custom:custom10"> 
<div class = "slds-m-around_medium">
           <!----> <lightning-input type="search" onchange={findEmployeeResult} class = "slds-m-bottom_small" label = "Search"> </lightning-input>
            <lightning-datatable key-field="Id" data={employeeList} columns={columnList} hide-checkbox-column="true" show-row-number-column="true">

            </lightning-datatable> <template if:true= {noRecordsFound}>

                --No Employee Records Found--

            </template> </div>
   </lightning-card>
</template>

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

import searchEmployees from '@salesforce/apex/EmployeeController.searchEmployee';

 

const columnList = [

    {label: 'Id', fieldName: 'Id'},

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

    {label: 'Designation', fieldName: 'Designation__c'},

    {label: 'Address', fieldName: 'Address__c'},

    {label: 'DOB', fieldName: 'Date_Of_Birth__c'},

    {label: 'Email', fieldName: 'Email_Id__c'},

    {label: 'Phone', fieldName: 'Primary_Phone__c'}

];

 

export default class LightningDataTable extends LightningElement {

    @track employeeList;

    @track columnList = columnList;

    @track noRecordsFound = true;

 

    findEmployeeResult(event) {

        const empName = event.target.value;

 

        if(empName) {

            searchEmployees ( {empName})

            .then(result => {

                this.employeeList = result;

                this.noRecordsFound = false;

            })

        } else {

            this.employeeList = undefined;

            this.noRecordsFound = true;

        }

    }

 

}

lightningDataTable.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>

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

    <apiVersion>46.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Apex Class
public with sharing class EmployeeController {
        @AuraEnabled (cacheable = true)

    public static List<Employee__c> searchEmployee(String empName) {

        string strEmpName = '%'+ empName + '%';

        return [Select Id, Name, Designation__c, Address__c, Date_Of_Birth__c, Email_Id__c, Primary_Phone__c from Employee__c WHERE Name LIKE: strEmpName];

    }
}

 
Danish HodaDanish Hoda
Hi Akash,
I would rather suggest you to use html table and use <a> tags for hyperlinks. 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Akash,

Greetings to you!

You can hyperlink record in LWC datatable:
const columnList = [
        {
            label: 'Id',
            fieldName: 'idUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Id' }, 
            target: '_blank'}
        },
        {label: 'Name', fieldName: 'Name'},
        
        // Other Columns

    ];

Please refer to the below link which might help you further with the above requirement.

https://salesforce.stackexchange.com/questions/257065/hyperlink-record-name-lwc-datatable

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas