You need to sign in to do that
Don't have an account?
Akash 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
lightningDataTable.js
lightningDataTable.js-meta.xml
Apex Class
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]; } }
I would rather suggest you to use html table and use <a> tags for hyperlinks.
Greetings to you!
You can hyperlink record in LWC datatable:
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