This post explains how to delete multiple selected records in lightning datatable in lightning web components(lwc)
Example
deleteRowsInDatatableLWC.html
Example
deleteRowsInDatatableLWC.html
<template> <lightning-card title="Delete Selected Rows in Datatable" icon-name="standard:contact" > <br/> <div style="width: auto;"> <template if:true={data}> <div class="slds-grid slds-gutters"> <div class="slds-col"> <span><p style="margin-left: 5%">Selected Records: <b style="color:red;">{recordsCount}</b></p></span> </div> <div class="slds-col"> <span> <lightning-button label={buttonLabel} icon-name="utility:delete" disabled={isTrue} variant="destructive" onclick={deleteAccounts} style="margin-left: 40%"></lightning-button> </span> </div> </div><br/> <lightning-datatable data={data} columns={columns} key-field="id" onrowselection={getSelectedRecords}></lightning-datatable> </template> </div> </lightning-card> </template>
deleteRowsInDatatableLWC.js
import {LightningElement, track, wire} from 'lwc'; // importing apex class methods import getContacts from '@salesforce/apex/LWCExampleController.getContacts'; import delSelectedCons from '@salesforce/apex/LWCExampleController.deleteContacts'; // importing to show toast notifictions import {ShowToastEvent} from 'lightning/platformShowToastEvent'; // importing to refresh the apex after delete the records. import {refreshApex} from '@salesforce/apex'; // datatable columns const columns = [ { label: 'FirstName', fieldName: 'FirstName' }, { label: 'LastName', fieldName: 'LastName' }, { label: 'Phone', fieldName: 'Phone', type: 'phone' }, { label: 'Email', fieldName: 'Email', type: 'email' } ]; export default class DeleteRowsInDatatableLWC extends LightningElement { // reactive variable @track data; @track columns = columns; @track buttonLabel = 'Delete Selected Contacts'; @track isTrue = false; @track recordsCount = 0; // non-reactive variables selectedRecords = []; refreshTable; error; // retrieving the data using wire service @wire(getContacts) contacts(result) { this.refreshTable = result; if (result.data) { this.data = result.data; this.error = undefined; } else if (result.error) { this.error = result.error; this.data = undefined; } } // Getting selected rows getSelectedRecords(event) { // getting selected rows const selectedRows = event.detail.selectedRows; this.recordsCount = event.detail.selectedRows.length; // this set elements the duplicates if any let conIds = new Set(); // getting selected record id for (let i = 0; i < selectedRows.length; i++) { conIds.add(selectedRows[i].Id); } // coverting to array this.selectedRecords = Array.from(conIds); window.console.log('selectedRecords ====> ' +this.selectedRecords); } // delete records process function deleteAccounts() { if (this.selectedRecords) { // setting values to reactive variables this.buttonLabel = 'Processing....'; this.isTrue = true; // calling apex class to delete selected records. this.deleteCons(); } } deleteCons() { delSelectedCons({lstConIds: this.selectedRecords}) .then(result => { window.console.log('result ====> ' + result); this.buttonLabel = 'Delete Selected Contacts'; this.isTrue = false; // showing success message this.dispatchEvent( new ShowToastEvent({ title: 'Success!!', message: this.recordsCount + ' Contacts are deleted.', variant: 'success' }), ); // Clearing selected row indexs this.template.querySelector('lightning-datatable').selectedRows = []; this.recordsCount = 0; // refreshing table data using refresh apex return refreshApex(this.refreshTable); }) .catch(error => { window.console.log(error); this.dispatchEvent( new ShowToastEvent({ title: 'Error while getting Contacts', message: error.message, variant: 'error' }), ); }); } }
deleteRowsInDatatableLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="DeleteRowsInDatatableLWC">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Apex Classpublic inherited sharing class LWCExampleController {
@AuraEnabled(Cacheable = true)
public static List<Contact> getContacts(){
return [SELECT Id, FirstName,LastName, Phone, Email FROM Contact ORDER BY Name limit 10];
}
@AuraEnabled
public static void deleteContacts(list<Id> lstConIds){
try {
list<Contact> lstConsToDelete = new list<Contact>();
System.debug('lstConIds ====> '+lstConIds);
for(Id idCon : lstConIds) {
lstConsToDelete.add(new Contact(Id = idCon));
}
if(!lstConsToDelete.isEmpty()) {
delete lstConsToDelete;
}
}
catch(Exception ex) {
throw new AuraHandledException(ex.getMessage());
}
}
}
Output
