19

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.

  • 2
    I'm guessing from the docs that you can't. After all, if the docs say nothing about it, it usually can't be done. Hopefully I'm wrong, though. – sfdcfox Oct 19 '17 at 3:17
14

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.

  • Awesome! Looking forward to it! – Boris Bachovski Oct 19 '17 at 4:23
  • This seems to impact sorting. After detecting that the sortedBy column == 'link' (or whatever you're using) and then setting sortedBy correctly it seems the sort function does not return successfully. I'm observing in winter19 that the sortDirection is always asc and a sort by arrow is added to the last col in my table. – Rick Schmidt Oct 9 '18 at 15:58
6

Forgive me for my previous answer,which didn't explained anything. Actually we have to pass typeAttributes key "label" as an object which help to set which key of our data object will be displayed as label.

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',
                  typeAttributes: {
                    label: { fieldName: 'linkLabel' }
                  }
                }]);
        cmp.set('v.testData', [{
            id: '1',
            link: 'http://google.com',
            linkLable:'Google'
        }]);
    }
})

Result

enter image description here

0

Corrected code added below. WARNING- be mindful of any other server calls you have included in your Apex Controller. I accidently broke my code because it was trying to update that Lookup field on the record with the URL that I manipulated in the lightning table. I had to add another condition to leave that field alone in the Update action. In this case I'm not sure it's worth all the trouble (when I can create another Formula URL field for this specific purpose), but IMO it's still useful knowledge.

I'm trying to do something very similar but can't figure out how to manipulate the field Label / Value within a lightning datatable.

I have the columns set fine, and the field is set to "url" type and I have the label set in the typeAttributes (see below).

The field itself is a lookup field. It returns the Record Id, but I want to be able to alter the URL path (ie- field value) as well as the label. I was able to do it in another scenario when I created a Formula field that returned the relative URL path to the Record Id but I want to avoid adding another field. I'm new to JavaScript so I wanted to see if I could do this in my Init function after it returns the data from the Apex Controller. Any ideas?

WORKING CODE

Helper (sets datatable columns)

{label: 'My Link', fieldName: 'MyLookup__c', type: 'url', typeAttributes: {
                label: 'View Record'
            }, sortable: true},

Controller (loops through rows during Init function after returning records)

var rows = response.getReturnValue();
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
if(row.MyLookup__c != null){
//Be careful here if you make database calls that will throw errors with 
//improperly formatted field value
row.MyLookup__c = '/' + row.MyLookup__c;
  • Thanks for the updates @Sebastian Kessel. I ended up realizing the same issue and changed my code later on in our development. I should have came back and updated my post to clarify- next time I'll be on top of that. – Captain Hindsight Dec 6 '18 at 19:21

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.