How to add onclick functionality in lightning web component data table URL column

Question

I have created a lightning-datatable in LWC and added a custom column that displays a URL. Now, I would like to add onclick event in the URL field and want to pass row information to the javascript method.

The idea is to render the component markup that will display all the information about the item that was clicked (within the same LWC).

Can anyone please help me on this; how I can add an onclick event in URL and handle the click event with a function in LWC datatable?

test.html

<div class="" style="height:420px">
    <lightning-datatable key-field="Id" 
        data={lstAllRows} 
        columns={columns}
        onrowaction={handleRowAction} 
        enable-infinite-loading
        load-more-offset={intLoadOffset}
        onloadmore={handleLoadMoreData}
        hide-checkbox-column>
    </lightning-datatable>
</div>

test.js

getRequiredList(){
    getTabelData({
        strName: this.strName
        }).then(response =>{
            this.lstTmp = response.lstExistingData;
            this.lstTmp.forEach(function(record){
                record.linkName = '/lightning/r/'+record.Id+'/view'; 
            });
            this.lstAllRows = this.lstTmp;
        }).catch(error =>{
                this.strRecordErrorMessage = error.body.message;
                console.log('Error in getting the accounts', this.strRecordErrorMessage);
            })
}       

this.columns = [
{ label: this.label.columnName, fieldName: 'linkName', type: 'url', 
    typeAttributes: {label: { fieldName: 'Name' }, target: '' },
    cellAttributes: { } 
}]

Where I am adding url:

record.linkName = '/lightning/r/'+record.Id+'/view';

I would like to add an onclick event here and stop the URL redirect behaviour. Any click on the URL should not redirect user to the new page; instead of that, a piece of markup should render the record details on the same LWC.

i'm also trying to do something similar. and also, possibly, add a `data-` attribute to the anchor tag — LVS, Jan 31 '20 at 22:08

score 0 · Answer 1 · answered Aug 20 '20 at 12:39

You can probably achieve what you need by two means :

Create a Static Row-Level Action
Create a Custom Data Type

For more information you can go there: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

P.S: here are some basic javascript improvements

async getRequiredList () {
    try {
        const response = await getTabelData({
            strName: this.strName
        });

        this.lstAllRows = response.lstExistingData.map(record => ({
            ...record,
            linkName: `/lightning/r/${record.Id}/view`,
        }));
    } catch (error) {
        this.strRecordErrorMessage = error.body.message;
        console.log('Error in getting the accounts', this.strRecordErrorMessage);
    })
}

score -1 · Answer 2 · answered Mar 17 '20 at 21:48

-1

I suppose the record is an object and not an HTML element.

What you could probably do is:

const records = querySelectorAll('.record') // add a class to your records

records.forEach(record => {
  record.addEventListener('click', function(e){
    e.preventDefault(); // you don't want the default behavior
    // your code goes here
    console.log({ e })
  });
});

answered Mar 17 '20 at 21:48

pakman198

123
6

Adding event listener through JS is not a recommended approach in Salesforce LWC and user wants to get input not click. – Bartheleway Aug 21 '20 at 07:33

How to add onclick functionality in lightning web component data table URL column

2 Answers2