In Salesforce Lightning data tables, we can add row-level actions to perform actions specific to a single row in the data table, such as edit, view, or delete the record directly from the data table using the concept of navigation.
In this Salesforce tutorial, we will learn how to add row-level actions in LWC datatable in Salesforce.
What are Row-level actions in Salesforce Lightning data table?
In Salesforce LWC data tables, row-level actions allow us to perform specific actions on rows, such as edit, view, or delete, by providing action buttons or a dropdown menu within each row.
When we perform any row action, such as deleting the row, it will ultimately delete the object record. The edit action will open the record in edit mode, and the view action will open the record in view mode.
For the view and edit action the record should open in the edit window or view mode, so for that, we will use the ‘NavigationMixin.Navigate’ method to navigate on the record page.
Add Row-Level Actions in LWC Datatable
In the steps below, we will create an LWC data table with implemented row actions: edit, view, and delete.
- We will fetch the opportunity data dynamically for the data table, so first, we will create a controller class that we will call in the LWC component.
public with sharing class OpportunityController {
@AuraEnabled(cacheable=true)
public static List<Opportunity> getOpportunities() {
return [SELECT Id, Name, StageName, Amount FROM Opportunity LIMIT 10];
}
}- Now, create an LWC component and enter the code below in the HTML template.
<template>
<lightning-card title="LWC Table with Row Actions">
<lightning-datatable
key-field="Id"
data={tableData}
columns={columns}
onrowaction={handleRowAction}>
</lightning-datatable>
</lightning-card>
</template>In the above HTML template, the parameter key-field=”Id” ensures each row has a unique ID. Then the data={tableData} binds the table to the tableData variable containing Opportunity records. The onrowaction={handleRowAction} triggers an event handler from the JS file when a user selects actions like edit or delete.
- After this, enter the code below in the JS file to define the navigation logic to redirect to the edit and view page when the user selects a view or edit action. In the same event handler, we have defined the logic for the row action of deleting the record.
import { LightningElement, track, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';
const columns = [
{ label: 'Name', fieldName: 'Name', type: 'text' },
{ label: 'Stage', fieldName: 'StageName', type: 'text' },
{ label: 'Amount', fieldName: 'Amount', type: 'currency' },
{
type: 'action',
typeAttributes: {
rowActions: [
{ label: 'View', name: 'view' },
{ label: 'Edit', name: 'edit' },
{ label: 'Delete', name: 'delete' }
]
}
}
];
export default class DatatableRowActions extends NavigationMixin(LightningElement) {
@track tableData = [];
columns = columns;
@wire(getOpportunities)
wiredOpportunities({ error, data }) {
if (data) {
this.tableData = data;
} else if (error) {
console.error(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: 'Opportunity',
actionName: 'view'
}
});
break;
case 'edit':
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: row.Id,
objectApiName: 'Opportunity',
actionName: 'edit'
}
});
break;
case 'delete':
this.deleteRecord(row);
break;
default:
break;
}
}
deleteRecord(row) {
this.tableData = this.tableData.filter(item => item.Id !== row.Id);
alert('Deleted Record: ${row.Name}');
}
}In the above code, first, we have fetched the records from the controller class. We have used row-level actions to view and edit, which will navigate to standard pages when selecting view or edit by using the navigation function NavigationMixin.
The row action delete will delete the record using the deleteRecord(row) method, which will fetch the record ID to delete the record.
The function @wire(getOpportunities) will assign the fetched apex class data to the data table. The event handleRowAction will process the selected row action, then navigate to the View/Edit page or delete the record.
- Enter the code below in the meta.xml file to make the LWC component available for the Lightning pages.
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>- Now, deploy the LWC component on the Lightning app page where you want to see the LWC data table.
After deploying the LWC component, you will see that the LWC data table is deployed with row-level actions: edit, view, and delete.
When we select the view action, it will navigate to the object standard record page.
When we select the edit action from the row actions, it will navigate to the edit window of the record.
When we select the row action to delete, an alert message will appear on the screen that we have defined using “alert(‘Deleted Record: ${row.Name}’“. Here, click the OK button to confirm and delete the record.
This way, we can add row actions in the Salesforce Lightning data table in LWC, such as view, edit, and delete. We can also add actions like enabling inline editing in the Salesforce Lightning data tables, through which we can edit the record values directly from the data table.
Then, we defined the deleteRecord(row) function that will delete the record from the LWC table row when the “Delete” action is triggered.
Conclusion
In this Salesforce tutorial, we have learned to add row actions to the Lightning LWC data table. We have added the row actions edit, view, and delete, respectively, to each row in the data table. We also used the navigation function ‘NavigationMixin.Navigate’ for the edit and view action to navigate to the view and edit window of a specific record.
You may also like to read:
- Infinite Loading in Data Table in Salesforce LWC
- Pagination in Salesforce LWC Data Table
- Salesforce Lightning Datatable Sorting in LWC
- Add Buttons in Salesforce LWC Datatable
- Fix or Freeze a Column in Salesforce Lightning Data Table
Abhijeet is a skilled Salesforce developer with experience in developing and integrating dashboards, data reports, and Salesforce applications. He is also skilled at optimizing processes and flow automation processes, coding, and executing complex project architecture. Read more about us | LinkedIn Profile.
