Here we discuss Row Action in LWC Datatable. We use the row action in the show or edit records or perform a different types of action.
Apex Class :
public with sharing class DataController {
@AuraEnabled (cacheable=true)
public static List<Account> retrieveAccounts(){
return [SELECT Id, Name, Type, BillingCountry
FROM Account
LIMIT 2000];
}
}
NavigationLWCTechdicer.Html :
<template>
<lightning-card title="Account List" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<p class="slds-p-horizontal_medium">Display records With Row Action </p>
<br></br>
<div style="height: 180px;">
<lightning-datatable
key-field="id"
data={items}
columns={columns}
hide-checkbox-column="true"
show-row-number-column="true"
onrowaction={handleRowAction}
>
</lightning-datatable>
</div>
</div>
</lightning-card>
</template>
NavigationLWCTechdicer.Js :
import { LightningElement, wire } from 'lwc';
import retrieveAccounts from '@salesforce/apex/DataController.retrieveAccounts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
const actions = [
{ label: 'View', name: 'view' },
{ label: 'Edit', name: 'edit' },
];
const columns = [
{ label: 'Id', fieldName: 'Id' },
{ label: 'Name', fieldName: 'Name', sortable: true },
{ label: 'Type', fieldName: 'Type', sortable: true },
{ label: 'BillingCountry', fieldName: 'BillingCountry', sortable: true },
{ label: 'Action',
type: 'action',
initialWidth:'50px',
typeAttributes: { rowActions: actions },
},
];
export default class NavigationLWCTechdicer extends NavigationMixin(LightningElement) {
columns = columns;
items;
error;
@wire(retrieveAccounts)
wiredAccounts({ error, data }) {
if (data) {
this.items = data;
this.columns = columns;
this.error = undefined;
} else if (error) {
this.error = error;
this.items = undefined;
this.showToast(this.error, 'Error', 'Error'); //show toast for error
}
}
handleRowAction( event ) {
const actionName = event.detail.action.name;
const row = event.detail.row;
switch ( actionName ) {
case 'view':
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: row.Id,
actionName: 'view'
}
});
break;
case 'edit':
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: row.Id,
objectApiName: 'Account',
actionName: 'edit'
}
});
break;
default:
}
}
showToast(message, variant, title) {
const event = new ShowToastEvent({
title: title,
message: message,
variant: variant,
mode: 'dismissable'
});
this.dispatchEvent(event);
}
handleRowAction(event) {
const actionName = event.detail.action.name;
const row = event.detail.row;
switch (actionName) {
case 'view':
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: row.Id,
actionName: 'view'
}
});
break;
case 'edit':
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: row.Id,
objectApiName: 'Account',
actionName: 'edit'
}
});
break;
default:
}
}
}
NavigationLWCTechdicer.js-meta.xml :
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
What’s your Reaction?
+1
10
+1
6
+1
2
+1
4
+1
1
+1
2
13 comments
const actions = [
{ label: ‘View’, name: ‘view’ },
{ label: ‘Edit’, name: ‘edit’ },
];
Here can we add help text to label
Hi you can use below link for this
https://techdicer.com/custom-type-in-datatable-in-lwc/
Yes
Will this code work for Community portal as well?
Yes, It will work make sure portal user have proper access
The code is working properly in normal sandbox org, but when I add this component in Community Portal, The view button is not redirecting to the Record Detail page. Can you please let me know what needs to be done.
Hi Anjani, Can you please share your JS code
import { LightningElement, wire } from ‘lwc’;
import retrieveQuotes from ‘@salesforce/apex/SNP_GVC_QuoteListViewHelper.getQuotes’;
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
import { NavigationMixin } from ‘lightning/navigation’;
const actions = [
{ label: ‘View’, name: ‘view’ },
{ label: ‘Edit’, name: ‘edit’ },
];
const columns = [
{ label: ‘Name’, fieldName: ‘Name’, sortable: true },
{ label: ‘Status’, fieldName: ‘Status’, sortable: true },
{ label: ‘ExpirationDate’, fieldName: ‘ExpirationDate’, sortable: true },
{ label: ‘Action’,
type: ‘action’,
initialWidth:’50px’,
typeAttributes: { rowActions: actions },
},
];
export default class NavigationLWCTechdicer extends NavigationMixin(LightningElement) {
columns = columns;
items;
error;
@wire(retrieveQuotes)
wiredQuotes({ error, data }) {
if (data) {
this.items = data;
this.columns = columns;
this.error = undefined;
} else if (error) {
this.error = error;
this.items = undefined;
this.showToast(this.error, ‘Error’, ‘Error’); //show toast for error
}
}
handleRowAction( event ) {
const actionName = event.detail.action.name;
const row = event.detail.row;
switch ( actionName ) {
case ‘view’:
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: row.Id,
objectApiName: ‘Quote’,
actionName: ‘view’
}
});
break;
case ‘edit’:
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: row.Id,
objectApiName: ‘Quote’,
actionName: ‘edit’
}
});
break;
default:
}
}
showToast(message, variant, title) {
const event = new ShowToastEvent({
title: title,
message: message,
variant: variant,
mode: ‘dismissable’
});
this.dispatchEvent(event);
}
handleRowAction(event) {
const actionName = event.detail.action.name;
const row = event.detail.row;
switch (actionName) {
case ‘view’:
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: row.Id,
actionName: ‘view’
}
});
break;
case ‘edit’:
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: row.Id,
objectApiName: ‘Quote’,
actionName: ‘edit’
}
});
break;
default:
}
}
}
I have tried it in different ways but only the edit action takes the page to record detail, but the view option is taking it to an error page in the Community Portal, not sure whether it is issue in the portal.
Thank you in advance.
Remove objectApiName: ‘Quote’, from this
Thank you
I want to enable or disable based on a boolean. How to do that.
I want to enable or disable ROW Actions based on a boolean. How to do that.
You need to do custom Type datatable
https://techdicer.com/custom-type-in-datatable-in-lwc/