3

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 :

<template>
    <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.
        </h2>

        <!-- Simple -->
        <div class="slds-p-around_medium lgc-bg" style="height: 300px;">
            <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}
                is-loading={tableLoadingState}>
            </lightning-datatable>
        </div>
    </div>
</template>

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 May 21 at 8:54
  • @Raul can you give an example? or update the playground code snippet? – Pranay Jaiswal May 21 at 9:00
  • Here is an example: playground link – Raul May 21 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 – Pranay Jaiswal May 21 at 9:16
  • My fault, had not read properly, didn't start with a coffee today :) – Raul May 21 at 9:19
3

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? – Pranay Jaiswal May 21 at 10:23
  • 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'}} – Anshul Agrawal May 22 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.