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 thru 16, 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

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