Apex Code Development You need to sign in to do that
Don't have an account?
How to add onclick functionality in lightning web component data table URL column
I have created a lightning-datatable in LWC and added a custom column that display 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 hadnle the click event with a function in LWC datatable.
Regards,
Rajneesh
////// test.html
<div class="" style="height:420px">
<lightning-datatable key-field="Id"
data={lstAllRows}
columns={columns}
onrowaction={handleRowAction}
enable-infinite-loading
load-more-offset={intLoadLabelOffset}
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.labelTableHeaderNAME, 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 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.
Regards,
Rajneesh