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 :)

Post a Comment

4 Comments

  1. Hi,
    Really informative video...
    Is there a way we can reorder Table Columns so that respective column data is also re-rendered ?

    Thanks
    Neeraj

    ReplyDelete
    Replies
    1. Thanks, glad you like the video. Not sure about columns but as far I am aware we can do it using custom JS.

      Delete
  2. Thanks for this article... much helpful

    ReplyDelete