function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
meghna nmeghna n 

lightning datatable columns issue

I have a lightning datatable as follows. I have given piece of code which I have done.

 <aura:attribute name="mydata" type="Object"/>
 <aura:attribute name="mycolumns" type="List"/>
  <aura:attribute name="openEOBLink" type="String" default=""/>

 <lightning:datatable
                             keyField="id"
                             data="{!v.mydata }"
                             coumns="{!v.mycolumns }"
                             hideCheckboxColumn="true"/>

Controller.js

doInit :  function(component, event, helper) {
 helper.bindDatatableColumns(component,event,helper);   
}
                         
Helper.js

  bindDatatableColumns : function(component,event,helper){ 
        
      component.set('v.mycolumns', [
            {   label: 'Version', 
                fieldName: 'Version', 
                type: 'text', 
                sortable:true,
                cellAttributes: {alignment: 'center'}
            },
            { 
                label: 'EOB/EOP',
                fieldName: 'EOBEOP',
                sortable:false,
                type: 'text',
                cellAttributes: {alignment: 'center'}    
            }

 component.set('v.mydata', [{
                     id: 'a',
                     Version:'1',
                     EOBEOP: component.get("v.openEOBLink")
                },

    component.set("v.openEOBLink",'/lightning/n/GPS_Search_EOB?c__claimId=' + component.get("v.claimId") +
                                           '&c__dateOfService=' +  component.get("v.dateofservice") + 
                                            '&c__memberId=' + component.get("v.memberId") +    
                                            '&c__memberNameforProvider=' + component.get("v.memberName") +
                                            '&c__legalOwnerName=' + component.get("v.ownerName")); 
} //Helper class ends here
   
I am able to display the datatable values and when I click on EOB link in datatable it will take me to an app Builder page by passing the parameter values.

My requirement is as follows:

a. In datatable column value I want to separate EOB and EOP
    clickable links so when I click EOB link it will navigate to EOB
    appbuilder page similarly when I click EOP link it will navigate to
    EOP app Builder  page.

    I have provided a sample code of app builder page and the
    parameters which I need to pass

 Please help me with correct code how I can achieve my requirement.

Thanks
meghna
 
Best Answer chosen by meghna n
Ramesh DRamesh D
@meghna,
Once you get your data you can do like this 
  
{ 
                label: 'EOB',
                fieldName: 'EOB',
                sortable:false,
                type: 'text',
                cellAttributes: {alignment: 'center'}    
            },
{ 
                label: 'EOP',
                fieldName: 'EOP',
                sortable:false,
                type: 'text',
                cellAttributes: {alignment: 'center'}    
            }

var myData= []; 
//loop through Your return data 
res.getReturnValue().forEach(function (value) {

 value.EOP= '/lightning/n/GPS_Search_EOP?c__claimId=' + component.get("v.claimId") +
                                           '&c__dateOfService=' +  component.get("v.dateofservice") + 
                                            '&c__memberId=' + component.get("v.memberId") +    
                                            '&c__memberNameforProvider=' + component.get("v.memberName") +
                                            '&c__legalOwnerName=' + component.get("v.ownerName"));
 value.EOB='/lightning/n/GPS_Search_EOB?c__claimId=' + component.get("v.claimId") +
                                           '&c__dateOfService=' +  component.get("v.dateofservice") + 
                                            '&c__memberId=' + component.get("v.memberId") +    
                                            '&c__memberNameforProvider=' + component.get("v.memberName") +
                                            '&c__legalOwnerName=' + component.get("v.ownerName"));
myData.push(value);
}
component.set('v.mydata', myData);

I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D

All Answers

Arun MohanArun Mohan
Hi Meghna,

Can u provide the screenshot of your data table? it would be helpfull to understand the requirement.

Thanks
Arun
meghna nmeghna n
Hi Arun

I have atatched a screen shot of the datatable. 
But is it possible in a single column to have two different clickable links?

Kindly respond at your earliest.

Datatable screen shot

thanks
meghna
Ramesh DRamesh D
@meghna,
Once you get your data you can do like this 
  
{ 
                label: 'EOB',
                fieldName: 'EOB',
                sortable:false,
                type: 'text',
                cellAttributes: {alignment: 'center'}    
            },
{ 
                label: 'EOP',
                fieldName: 'EOP',
                sortable:false,
                type: 'text',
                cellAttributes: {alignment: 'center'}    
            }

var myData= []; 
//loop through Your return data 
res.getReturnValue().forEach(function (value) {

 value.EOP= '/lightning/n/GPS_Search_EOP?c__claimId=' + component.get("v.claimId") +
                                           '&c__dateOfService=' +  component.get("v.dateofservice") + 
                                            '&c__memberId=' + component.get("v.memberId") +    
                                            '&c__memberNameforProvider=' + component.get("v.memberName") +
                                            '&c__legalOwnerName=' + component.get("v.ownerName"));
 value.EOB='/lightning/n/GPS_Search_EOB?c__claimId=' + component.get("v.claimId") +
                                           '&c__dateOfService=' +  component.get("v.dateofservice") + 
                                            '&c__memberId=' + component.get("v.memberId") +    
                                            '&c__memberNameforProvider=' + component.get("v.memberName") +
                                            '&c__legalOwnerName=' + component.get("v.ownerName"));
myData.push(value);
}
component.set('v.mydata', myData);

I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D
This was selected as the best answer
Arun MohanArun Mohan
Hi Meghna,

This is not possible with <lightning:datatable/>. The above code will give you the link in seperate columns.

Thanks
Arun Kumar
{tushar-sharma}{tushar-sharma}
You cannot create multiple links in one coliums, but you can add multiple actions in same columnUser-added image

You can find example here: https://newstechnologystuff.com/2019/01/01/lightning-datatable-lazy-loading-with-inline-editing-and-actions/ 

Thanks
Tushar 
https://newstechnologystuff.com/
meghna nmeghna n
@Ramesh

This worked.Thanks very much.

meghna