Drag and Drop to reorder table rows in Lightning Web Component Salesforce ☁️⚡️

  In this blog you will learn how to use Drag and Drop functionality in Lightning Web Component. We will use the Lightning Design System to create the UI and using the drag and drop functionality we will reorder rows in a table.

Please check the reference links below : 

#DragAndDrop #LWC #salesforce 

Please check complete code below : 

HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<template> <div class="slds-grid slds-grid_vertical"> <div class="slds-scrollable slds-grow"> <div class="slds-scrollable_none"> <table aria-multiselectable="true" class=" slds-table slds-no-row-hover slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols " role="grid" > <thead> <tr class="slds-line-height_reset"> <th>Account Name</th> <th>Account Phone</th> </tr> </thead> <tbody> <template for:each={ElementList} for:item="acc" for:index="index"> <tr key={acc.Id} onchange={Change} draggable="true" ondrop={Drop} ondragstart={DragStart} ondragover={DragOver} title={index} > <td role="gridcell"> <div class="slds-cell-wrap" title={index}>{acc.Name}</div> </td> <td role="gridcell"> <div class="slds-cell-wrap" title="Phone">{acc.Phone}</div> </td> </tr> </template> </tbody> </table> </div> </div> </div> </template>

JS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

import { LightningElement, wire, track } from "lwc"; import getAccountList from "@salesforce/apex/AccountController.getAccList"; export default class DragandDropTable extends LightningElement { @track dragStart; @track ElementList = []; connectedCallback() { getAccountList() .then((result) => { for (let i = 0; i < result.length; i++) { this.ElementList.push(result[i]); } }) .catch((error) => { console.log("###Error : " + error.body.message); }); } DragStart(event) { this.dragStart = event.target.title; event.target.classList.add("drag"); } DragOver(event) { event.preventDefault(); return false; } Drop(event) { event.stopPropagation(); const DragValName = this.dragStart; const DropValName = event.target.title; if (DragValName === DropValName) { return false; } const index = DropValName; const currentIndex = DragValName; const newIndex = DropValName; Array.prototype.move = function (from, to) { this.splice(to, 0, this.splice(from, 1)[0]); }; this.ElementList.move(currentIndex, newIndex); } }

Output

Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)