Lightning Web Component to Delete Multiple Records in Custom Datatable

This Post explains how to delete multiple records in LWC with custom datatable. Below is the demo of output :

DelMultipleAcc.html : 

<template>
    <lightning-button variant="destructive" onclick={DelAcc} label="Delete" title="Delete"                                      icon-name="utility:delete" class="slds-m-left_x-small"></lightning-button>
        <template if:true={AccLists.data}>           
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th></th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Name">ID</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="First Name">NAME</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Last Name">PHONE</div>
                        </th>
                        
                    </tr>
                </thead>
                <tbody>
                    <template for:each={AccLists.data} for:item="acc">
                        <tr key={acc.Id}>
                            <th scope="col">
                                    <lightning-input type="checkbox" data-id={acc.Id} onchange=                                                                 {handleChange} label="" name="input1"></lightning-input>
                            </th>
                            <th scope="col">
                                <div>{acc.Id}</div>
                            </th>
                            <th scope="col">
                                <div>{acc.Name}</div>
                            </th>
                            <th scope="col">
                                <div>{acc.Phone}</div>
                            </th>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>    
</template>

DelMultipleAcc.js :

import { LightningElement, track, api , wire} from 'lwc';

import getAccountList from '@salesforce/apex/DeleteMultipleAccounts.getAccountList';

import DelAccountList from '@salesforce/apex/DeleteMultipleAccounts.DelAccountList';

import { refreshApex } from '@salesforce/apex';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

var conIds = new Set();

export default class DelMultipleAcc extends LightningElement {

    @track AccLists;

    selectedRecords = [];

    @wire(getAccountList) AccLists

 

    handleChange(event) {

        if (event.target.checked)

        {

            conIds.add(event.target.dataset.id);

            console.log(conIds);

        }

        else

        {

            conIds.delete(event.target.dataset.id);

        }

        this.selectedRecords = Array.from(conIds);

    }

    DelAcc(){

        DelAccountList({ids : this.selectedRecords})

        .then(result => {

            this.dispatchEvent(new ShowToastEvent({

                title: 'Success',

                message: 'Record Is  Deleted',

                variant: 'success',

            }));

           return refreshApex(this.AccLists);

          })

          .catch(error => {

            this.dispatchEvent(new ShowToastEvent({

                title: 'Error While Deleting record',

                message: error.message,

                variant: 'error',

            }));

        });

    }

}

DelMultipleAcc.Meta : 

  

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>45.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

DeleteMultipleAccounts  Apex Class :

public with sharing class DeleteMultipleAccounts {

    

    @AuraEnabled(cacheable=true)

    public static List<Account> getAccountList(){  

        List<Account> acc = [select id, name, phone from Account];

        return acc;

    }

    

    @AuraEnabled

    public static void DelAccountList(list<Id> ids){  

        system.debug(ids);

        List<Account> acc = [select id, name, phone from Account where id IN :ids];

        system.debug(acc);

        delete acc;

        

    }

    

}

Output : 

Thanks, 
Lovesalesforceyes