Delete Multiple Records in Datatable in Lightning Web Component

Hello guys, In today's post you will see an example, that will helps you to understand, how you can delete multiple records in lightning datatable in LWC. So let's begin,

Delete multiple records in datatable in lightning web component

In this example, I will use contact records to achieve this requirement, but you can use any salesforce sobject to perform this action.

DeleteMultipleRecordHandler.apxc

 public class DeleteMultipleRecordHandler {
    @AuraEnabled(cacheable = true)
    public static List<Contact> fetchContacts() {
        return [ SELECT Id, Name, Email, Phone FROM Contact order by Name asc limit 15];    
    }
    
    @AuraEnabled
    public static void deleteSelectedContacts(List<Contact> contactLst) {
        delete contactLst;
    }
 }

DeleteMultipleRecordLWC.html

 <template>
	<lightning-card title="Delete Selected Rows in Datatable" icon-name="utility:recycle_bin_full">
		<div style="width: auto;">
			<template if:true={data}>
				<lightning-layout>
					<lightning-layout-Item padding="around-small" size="5">
						<span><p>&nbsp;<b><i>Selected Records: {recordsCount}</i></b></p></span>
					</lightning-layout-Item>
					<lightning-layout-Item padding="around-small" size="7">
						<lightning-button label={buttonLabel} icon-name="utility:delete" disabled={isTrue}
							variant="destructive" onclick={deleteRecords}>
						</lightning-button>
					</lightning-layout-Item>
				</lightning-layout>
				<lightning-datatable data={data} columns={columns} key-field="id" onrowselection={getSelectedRecords}>
				</lightning-datatable><br/>
				<div class="slds-align_absolute-center">
					<lightning-button label={buttonLabel} icon-name="utility:delete" disabled={isTrue}
						variant="destructive" onclick={deleteRecords}>
					</lightning-button>
				</div>
			</template>
		</div>
	</lightning-card>
 </template>

DeleteMultipleRecordLWC.js

 import { LightningElement, track, wire } from 'lwc';
 import fetchContacts from '@salesforce/apex/DeleteMultipleRecordHandler.fetchContacts';
 import deleteSelectedContacts from '@salesforce/apex/DeleteMultipleRecordHandler.deleteSelectedContacts';
 import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 import { refreshApex } from '@salesforce/apex';
 const columns = [
    {
        label: 'Name',
        fieldName: 'Name'
    }, {
        label: 'Email',
        fieldName: 'Email'
    }, {
        label: 'Phone',
        fieldName: 'Phone',
        type: 'phone'
    }
 ];
 export default class DeleteMultipleRecordLWC extends LightningElement {
    @track data;
    @track columns = columns;
    @track buttonLabel = 'Delete Records';
    @track isTrue = false;
    @track recordsCount = 0;

    // non-reactive variables
    selectedRecords = [];
    refreshTable;
    error;
    
    @wire(fetchContacts)
    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;
        }
    }
    
    getSelectedRecords(event) {        
        const selectedRows = event.detail.selectedRows;
        this.recordsCount = event.detail.selectedRows.length;
        this.selectedRecords=new Array();
        for (let i = 0; i < selectedRows.length; i++) {
            this.selectedRecords.push(selectedRows[i]);
        }        
    }

    deleteRecords() {
        if (this.selectedRecords) {
            this.buttonLabel = 'Processing....';
            this.isTrue = true;
            deleteSelectedContacts({contactLst: this.selectedRecords }).then(result => {
                window.console.log('result ====> ' + result);
                this.buttonLabel = 'Delete Records';
                this.isTrue = false;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success!!',
                        message: this.recordsCount + ' records are deleted.',
                        variant: 'success'
                    }),
                );
                this.template.querySelector('lightning-datatable').selectedRows = [];
                this.recordsCount = 0;
                return refreshApex(this.refreshTable);
            }).catch(error => {
                this.buttonLabel = 'Delete Records';
                this.isTrue = false;                
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error while getting Contacts',
                        message: JSON.stringify(error),
                        variant: 'error'
                    }),
                );
            });
        }
    }
 }

DeleteMultipleRecordLWC.js-meta.xml

 <?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<masterLabel>DeleteMultipleRecords</masterLabel>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__HomePage</target>
	</targets>
 </LightningComponentBundle>

Output: Now add this component to your salesforce org home page or any other records detail page to see the output.

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.