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.

Answer 1

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);
    })
}

Answer 2

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 })
  });
});