4

I'm trying to accomplish a POC in my project. We are using salesforce lightning Datatable tag. I could generate a set of records to display on the component. But I need Opportunity name column to be set hyperlinked to rendered a testMethod instead of redirecting and Contact Email column to be rendered as checkbox.

Problem: 1. When i click on hyperlinked, it always redirecting to particular url.
2. Boolean type not supported.

Any advice / suggestions will be greatly appreciated.

POCLightningDataTable.app

<aura:application extends="force:slds">

    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:datatable data="{! v.mydata }" 
                         columns="{! v.mycolumns }" 
                         keyField="id"
                         hideCheckboxColumn="true"
                         />
     </aura:application>

POCLightningDataTableController.js

({
    init: function (cmp, event, helper) {
    cmp.set('v.mycolumns', [
        {label: 'Opportunity name', fieldName: 'opportunityName', type: 'url', 
         typeAttributes : {'onclick' : cmp.getReference("c.testMethod")}},
                {label: 'Confidence', fieldName: 'confidence', type: 'percent', cellAttributes:
                    { iconName: { fieldName: 'trendIcon' }, iconPosition: 'right' }},
                {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR'}},
                {label: 'Contact Email', fieldName: 'contact', type: 'Boolean'},
                {label: 'Contact Phone', fieldName: 'phone', type: 'phone'}
            ]);
        cmp.set('v.mydata', [{
                id: 'a',
                opportunityName: 'Cloudhub',
                confidence: 0.2,
                amount: 25000,
                contact: true,
                phone: '2352235235',
                trendIcon: 'utility:down'
            },
            {
                id: 'b',
                opportunityName: 'Quip',
                confidence: 0.78,
                amount: 740000,
                contact: false,
                phone: '2352235235',
                trendIcon: 'utility:up'
            }]);
    },
    testMethod : function(cmp, event, helper){
        console.log("hai:::");  
    },
})
2

You're right, what you're trying to do is not supported. You'll want to read the documentation. The list of types supported are as follows:

  • action
  • button
  • currency
  • date
  • email
  • location
  • number
  • percent
  • phone
  • text
  • url

And the only supported typeAttributes for URL are:

  • label
  • target

In other words, lightning:datatable is not the tool you want to use, as it simply doesn't support the features you need.

Instead, you're going to have to write your own component to support the logic that you need, or conform to the specifications for what lightning:datatable supports.

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.