I am trying to build a datatable in lwc and one of the column's datatype is url. When I provide URL it shows as https://www.google.com , what I want is just label "Google.com".

I can see from the docs of the data table , i can use typeAttributes for url and provide "label", "target" and it should be good to go.

But when I try that I get cell as http://[object Object] which is a bit weird.

enter image description here

Template.html :

    <div class="slds-m-top_medium slds-m-bottom_x-large">
        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
            A data table that fetches content during initialization.

        <!-- Simple -->
        <div class="slds-p-around_medium lgc-bg" style="height: 300px;">

JS :

import { LightningElement, track } from 'lwc';

const columns = [
    { label: 'Date', fieldName: 'createdDate' , type: 'date-local',typeAttributes :{ month: "2-digit",day: "2-digit"}},
    { label: 'Duplicate Website', fieldName: 'duplicateWebsite', type: 'url'  },
    { label: 'Person Detail Match', fieldName: 'personDetailMatch', type: 'boolean' }


export default class DatatableBasic extends LightningElement {
    @track data = [];
    @track columns = columns;
    @track tableLoadingState = true;

     connectedCallback() {
        const data =  [{createdDate : "1479944705000" , duplicateWebsite : { label : 'Google' , target : 'www.google.com'}   , personDetailMatch : true }];
        this.data = data;
        this.tableLoadingState = false;

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/vi7rAWnIH/5/edit

Update: I managed to update label by providing label fieldName in column definition

 const columns = [
        { label: 'Date', fieldName: 'createdDate' , type: 'date-local',typeAttributes :{ month: "2-digit",day: "2-digit"}},
        { label: 'Duplicate Website', fieldName: 'duplicateWebsite', type: 'url',typeAttributes: { label: {fieldName:'duplicateWebsite'}, value: {fieldName:'urlTarget'}  }  },
        { label: 'Person Detail Match', fieldName: 'personDetailMatch', type: 'boolean' }


And rowData as

const data =  [{personName:"url name", createdDate : "1479944705000" , duplicateWebsite : "Google"  ,urlTarget : "www.google.com",  personDetailMatch : true }];

Now the issue is it takes label value as href value, thus making links dead.

Updated Playground Link: https://developer.salesforce.com/docs/component-library/tools/playground/vi7rAWnIH/16/edit

  • Probably due to the fact that datatable accepts single level JSON, the title and target should be on root level. Such that column.fieldName maps directly with data.fieldName
    – Raul
    Commented May 21, 2019 at 8:54
  • @Raul can you give an example? or update the playground code snippet? Commented May 21, 2019 at 9:00
  • Here is an example: playground link
    – Raul
    Commented May 21, 2019 at 9:14
  • Hi @Raul , Am sorry if my question was not clear. It's showing the whole URL (http://www.google.com ), all i want is to show just the label as google. anc hyperlink to actual url Commented May 21, 2019 at 9:16
  • My fault, had not read properly, didn't start with a coffee today :)
    – Raul
    Commented May 21, 2019 at 9:19

1 Answer 1


You have to use typeAttribute object in URL column. I tried to use JS object but couldn't use JS object in typeAttribute in datatable. So, my finding was that your label should be a field in each entry in data list. Try this playground version of your code: https://developer.salesforce.com/docs/component-library/tools/playground/vi7rAWnIH/20/edit

Issue with your version of code which is rendering label as target is there is no value attribute in typeAttribute object. It's correct name is target. Screenshot from lightning-datatable documentation: enter image description here

Codet snippet in case playground is not available:

JS data array:

const data =  [{createdDate : "1479944705000" , duplicateWebsite : "www.google.com", websiteLabel:"google", personDetailMatch : true }];

datatable column definition:

const columns = [
    { label: 'Date', fieldName: 'createdDate' , type: 'date-local',typeAttributes :{ month: "2-digit",day: "2-digit"}},
    { label: 'Duplicate Website', fieldName: 'duplicateWebsite', type: 'url' , typeAttributes:{label: { fieldName: 'websiteLabel' }}},
    { label: 'Person Detail Match', fieldName: 'personDetailMatch', type: 'boolean' } 
  • Amazing. Can you add relevant code snippets in the answer in case the playground link dies? Commented May 21, 2019 at 10:23
  • 1
    If you want to open the link in new window you can use the below : { label: 'Duplicate Website', fieldName: 'urlTarget', type: "url",typeAttributes: {label: { fieldName: 'duplicateWebsite' }, target: '_blank'}} Commented May 22, 2019 at 13:22

You must log in to answer this question.

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