I am trying to insert a link in a result column of lightning:datatable

Below is the code snippet :

Datatable Code:

    <lightning:datatable data="{! v.contactList }" 
                 columns="{! v.mycolumns }" 
                 onrowselection = "{!c.checkboxFetch}"

Controller Code:

{label: 'Customer Name', fieldName: 'CustomerName__c', type: 'url', 
                        typeAttributes: {
                        label: 'Customer Name',
                        fieldName: 'CustomerName__c',
                        title: 'View',
                        disabled: false,
                        value: 'view',
                        iconPosition: 'left',
                        url: 'www.google.com',
                    }, },

However, in the result I am not able to link the column with the mentioned url and when clicking on the hyperlink it is redirecting to a localhost url like (something like this)

Any idea on how to redirect to the url : www.google.com ? Also, the customer result from the variable iteration component.set('v.mycolumns' is not displaying the result. Rather it displaying the static value : Customer Name


1 Answer 1


Your Type Attributes, and likely the underlying data, aren't set up properly for a url type entry.

Your url item should correspond to the column in your data that contains a URL value (not the link's title or the column title). You can use the typeAttributes map to supply three additional parameters:

  • label
  • target
  • tooltip

Your columns entry should look something like this:

    label: 'Customer Name', 
    fieldName: 'CustomerName__c', // This field should have the actual URL in it.
    type: 'url', 
    sortable: "false", 
    typeAttributes: {
        label: {
            fieldName: 'UserReadableName__c' 
            // whatever field contains the actual label of the link
        target: '_blank', // or as desired
        tooltip: 'Open the customer page' // or as desired

Then, your CustomerName__c column in your data must contain an actual URL (not a Salesforce Id or anything else). If it doesn't, you can add a synthetic column to your data, such as

contactsList.forEach(function(contact) {
    contact.SearchURL = 'https://google.com/search?q=' + contact.CustomerName__c;
  • Thanks for the reply I am still not able to populate the url and getting the below error when tired the foreach approach : This page has an error. You might just need to refresh it. Action failed: c:dataTableCmp$controller$doInit [contactList is not defined] Failing descriptor: {c:dataTableCmp$controller$doInit} Adding the label, target, tooltip to the datatable typeAttributes does not work as it is showing blank value on the UI. Sep 17, 2018 at 9:32
  • 1
    Well, you can't paste my code into a location where contactList is not defined. You may need to adapt this to fit the architecture of your component, and you certainly will need to wait to execute it until your server callback returns, if you're executing a query in an Apex controller.
    – David Reed
    Sep 17, 2018 at 13:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .