URL in

I’m playing around with the new <lightning:datatable>. Looking at the documentation, it says that it supports type url for the column data. However, that renders the value of the field as both label and URL.

Component Markup:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="testData" type="Object"/>
    <aura:attribute name="testColumns" type="List"/>

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <lightning:datatable data="{!v.testData}"
                         columns="{!v.testColumns}"
                         keyField="Id" />
</aura:component>

Controller Code:

({
    init : function(cmp, event, helper)
    {
        cmp.set('v.testColumns', [{label: 'Link', fieldName: 'link', type: 'url'}]);
        cmp.set('v.testData', [{
            id: '1',
            link: 'http://google.com'
        }]);
    }
})

Output:

enter image description here

Question:

Is there a way to specify a different label? This is nothing more than an anchor tag <a href="http://google.com">http://google.com</a>, but here I can put whatever I want as a label while keeping the anchor. I really don’t want to ditch this and rebuild my own table, but this is a crucial missing functionality. A good example is outputting a record Name and you want to link it to the actual record by setting /recordId.

Answer

You are absolutely right that URLs should be able to have individual labels and the good news it is already completed to be shipped in Spring ’18 release.

In Spring, you will be able to use type attributes to set the same label for all rows:

typeAttributes: {
           label: 'Company website'
       }

Or use another field to set the label:

typeAttributes: {
           label: { fieldName: 'urlLabel' }
       }

Obviously we wanted this in Winter but we wanted to make typeAttributes extensible for all types.

Attribution
Source : Link , Question Author : Boris Bachovski , Answer Author : Fabien Taillon

Leave a Comment