Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rajneesh Ranjan 23Rajneesh Ranjan 23 

Add hyperlink dynamically to the Name column in lightning-datatable in LWC

Hi,

I am trying to display a lightning-datatable with few columns in lightning web component. As I get the data from apex, I try to add new column in the JS controller dynamically with hyperlink (as we did in aura component), but it does not allow me to add this new column.

Aura Component 
component.set('v.mycolumns', [
            {label: 'Account Name', fieldName: 'linkName', type: 'url', 
            typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
            {label: 'Industry', fieldName: 'Industry', type: 'text'},
            {label: 'Type', fieldName: 'Type', type: 'Text'}
        ]);
  
action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var records =response.getReturnValue();
                records.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
                component.set("v.acctList", records);
            }
        });

I am trying to do similar implementation in LWC but no luck. Can someone please help me on this.

Thanks.
Khan AnasKhan Anas (Salesforce Developers) 
Hi Rajneesh,

Greetings to you!

Please refer to the below links which might help you further with the above requirement.

https://salesforce.stackexchange.com/questions/257065/hyperlink-record-name-lwc-datatable

http://sfdcmonkey.com/2019/04/01/lightning-datatable-lightning-web-component/

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Rajneesh Ranjan 23Rajneesh Ranjan 23
Thank you Anas,

Actually, I was trying to add 'linkname' in the response which was returned by apex method, and this was called by using Wire
adapter, where result is stored in cache which becomes read only (as apex method is defined as @AuraEnabled(cacheable=true)).

So, I tried to call the same method Imperatively (Apex method is written without @cacheable annotation) and I was later able to add additional link 'linkname' in the result.

Thanks.
Venu9999Venu9999
Same issue addressed here check it Add hyper link in lwc data table column (https://www.salesforcepoint.com/2020/06/how-to-add-hyper-link-for-name-column.html?m=1)