• How To Add Hyper Link For Name Column In lightning-datatable in LWC

    Published By: Venu Gutta
    Published on: Tuesday 23 June 2020
    A- A+

    Lightning Web Component (LWC) Examples: Add Hyper Link Url For Name Column/Field In lightning Data Table Example

    Hello guys, in this post we are  going to see how to add hyper link url for lwc data table. As we know that if we use lightning-datatable tag we can show list of records data in table. But for name field if we use type:"text" we can't show clickable hyper link for record name on lightning Data Table. If we want display any field or column with link we need to make some tweaks on data what we are going to display on table. So that we can show link and once we click on that it will takes you to respective record page. Check below example code.

    Hyper Link For Name field In lightning-datatable in LWC:



    Create apex class: OpportunityController

     public with sharing class OpportunityController {  
       @AuraEnabled(cacheable=true)  
       public static List<opportunity> fetchOpportunityList(){  
         return [SELECT Id, Name, StageName,Amount From Opportunity LIMIT 100];  
       }  
     }  
    

    Create Lightning Web Component with name lwcDataTableHyperLink:

    lwcDataTableHyperLink.js

     import { LightningElement, wire, track } from "lwc";  
     import getOpportunities from "@salesforce/apex/OpportunityController.fetchOpportunityList";  
     const COLS = [  
      {  
       label: "Name",  
       fieldName: "recordLink",  
       type: "url",  
       typeAttributes: { label: { fieldName: "Name" }, tooltip:"Name", target: "_blank" }  
      },  
      { label: "Stage", fieldName: "StageName", type: "text" },  
      { label: "Amount", fieldName: "Amount", type: "currency" }  
     ];  
     export default class LwcDataTableHyperLink extends LightningElement {  
      cols = COLS;  
      error;  
      @track oppList = [];  
      @wire(getOpportunities)  
      getOppList({ error, data }) {  
       if (data) {  
        var tempOppList = [];  
        for (var i = 0; i < data.length; i++) {  
         let tempRecord = Object.assign({}, data[i]); //cloning object  
         tempRecord.recordLink = "/" + tempRecord.Id;  
         tempOppList.push(tempRecord);  
        }  
        this.oppList = tempOppList;  
        this.error = undefined;  
       } else if (error) {  
        this.error = error;  
        this.oppList = undefined;  
       }  
      }  
     }  
    
    If we see above code we are not assigning wire function data directly to oppList property, instead we are modifying every record to assign link for Name column (tempRecord.recordLink = "/" + tempRecord.Id;).

    lwcDataTableHyperLink.html

     <template>  
       <lightning-card title="Data Table In LWC">  
         <div class="slds-box">  
           <lightning-datatable  
           data={oppList} columns={cols} key-field="Id">  
           </lightning-datatable>  
         </div>  
       </lightning-card>  
     </template>  
    

    Output:

     <aura:application extends="force:slds">  
       <c:lwcDataTableHyperLink/>  
     </aura:application>  
    


  • 3 comments to ''How To Add Hyper Link For Name Column In lightning-datatable in LWC"

    ADD COMMENT
    1. Hi I had looked for a custom url example at many places for LWC. This blog helped me to resolve the issue.
      Thanks!!

      ReplyDelete
    2. Hey!How can we shoe contact related list on clicking over these contact names?

      ReplyDelete