Reorder data table rows using drag drop in angular

Angular Material includes a built-in drag-and-drop feature that simplifies the development process. With the introduction of DragDropModule in Angular versions 7 to 11, developers can easily implement drag-and-drop functionality in Angular applications.

In this article we will provide you information about Angular Drag and Drop Table Rows Example with Demo. Hear I will give you detail about Reorder table rows using drag drop.

As you can see in the above video that user is able to drag drop table rows using the angular mat-table. Angular 7-15 drag and drop table rows is a good feature of a user interface now a days.

Using the angular material table reorder columns can be achieved by module @angular/cdk/drag-drop and @angular/material/table

Create tabledragdrop component

create new component using the command

ng g component tabledragdrop –skipTest

This will create three files

tabledragdrop.component.ts, tabledragdrop.component.html, tabledragdrop.component.css

1 – tabledragdrop.component.ts check the code inside

import { Component, ViewChild } from '@angular/core';
import {CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import {MatTable} from '@angular/material/table';

export interface IHeaders {
  id: string | number;
  name: string;
  age: number | string;
  gender: string;
  country: string;
}

@Component({
  selector: 'app-tabledragdrop',
  templateUrl: './tabledragdrop.component.html',
  styleUrls: ['./tabledragdrop.component.css']
})
export class TabledragdropComponent {
  @ViewChild('table') table: MatTable<IHeaders>;

  displayedColumns: string[] = ['id', 'name', 'age', 'gender', 'country'];
  dataSource:IHeaders[] = [
    {
      id: '1',
      name: 'John',
      age: '21',
      gender: 'Male',
      country: 'UK'
    },
    {
      id: '2',
      name: 'Robin',
      age: '25',
      gender: 'Male',
      country: 'London'
    },
    {
      id: '3',
      name: 'Robert',
      age: '12',
      gender: 'Male',
      country: 'Dubai'
    },
    {
      id: '4',
      name: 'Neeraj',
      age: '23',
      gender: 'Male',
      country: 'India'
    },
    {
      id: '5',
      name: 'Wiliiams',
      age: '30',
      gender: 'Male',
      country: 'Ausralia'
    },
    {
      id: '6',
      name: 'ChinZee',
      age: '25',
      gender: 'Female',
      country: 'China'
    } 
  ];
 
 dropTable(event: CdkDragDrop<IHeaders[]>) {
   const prevIndex = this.dataSource.findIndex((d) => d === event.item.data);
   moveItemInArray(this.dataSource, prevIndex, event.currentIndex);
   this.table.renderRows();
 }
}

2 – tabledragdrop.component.html add html code as below

  <table mat-table #table [dataSource]="dataSource" class="mat-elevation-z8"
  cdkDropList
  [cdkDropListData]="dataSource"
  (cdkDropListDropped)="dropTable($event)">

  <!-- Position Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element">
      <mat-icon cdkDragHandle>reorder</mat-icon>
    </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="gender">
    <th mat-header-cell *matHeaderCellDef> Gender </th>
    <td mat-cell *matCellDef="let element"> {{element.gender}} </td>
  </ng-container>

  <ng-container matColumnDef="country">
    <th mat-header-cell *matHeaderCellDef> Country </th>
    <td mat-cell *matCellDef="let element"> {{element.country}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag [cdkDragData]="row"></tr>
</table>

3 – tabledragdrop.component.css

p {
    font-family: Lato;
  }

Install and run the project

npm install

npm start

Once everything is OK with no error, then after npm start open the url http://localhost:4200 in browser. you should see the table with angular 9 drag and drop table rows feature.

The working example code I have added on my github https://github.com/infotechseo/drap-drop-rows-of-table

FAQs

Q1. How to drag and drop using Angular?

Ans: Angular Data Grid Row Reordering. Row reordering allows you to rearrange rows effortlessly by dragging them with the mouse. To activate row reordering, configure the column property rowDrag on one of the columns, usually the first one

Q2. How do I make rows draggable in a table?

Ans: Check the code below to make rows draggable in a table.

Q3. How to do reordering in Angular?

Ans: In Angular, you can achieve row reordering by using the Angular Drag and Drop module (@angular/cdk/drag-drop). This module provides a set of directives for building drag-and-drop interfaces.

For any query or doubt please comment in the comment section.

Read also Containerizing Node.js applications with docker, Dockerize node web app