Drag And Drop Table Columns In Angular 10 Application

Introduction

 
In this article, we will learn how to drag and drop table columns Angular 10 applications.
 
Prerequisites
  • Basic Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Node and NPM installed
  • Bootstrap
Create an Angular project by using the following command.
  1. ng new sdemo 
 Open this project in Visual Studio Code and install bootstrap by using the  following command.
  1. npm install bootstrap --save     
Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line. 
  1. @import '~bootstrap/dist/css/bootstrap.min.css';    
Now install Table-dragger library using the following command.
  1. npm install table-dragger --save  
Now create a new component by using the following command.
  1. ng g c dragtable  
 Now open dragtable.component.html file and add the following code:
  1. <div>        
  2.   <div class="row" style="margin-top:10px;margin-bottom: 10px;">        
  3.     <div class="col-sm-12 btn btn-success">        
  4.       Drag and drop table Columns in Angular application  
  5.     </div>        
  6.   </div>       
  7. <div class="container">  
  8.   <div class="row">  
  9.       <div class="col-md-12">  
  10.           <table class="table" id="table">  
  11.               <thead class="thead-dark">  
  12.                   <tr>  
  13.                       <th>Id</th>  
  14.                       <th>Name</th>  
  15.                       <th>Age</th>  
  16.                       <th>Address</th>  
  17.                       <th>City</th>  
  18.                       <th>Salary</th>  
  19.                       <th>Department</th>  
  20.                   </tr>  
  21.               </thead>  
  22.               <tbody>  
  23.                   <tr *ngFor="let data of rowData">  
  24.                       <td>{{data.Id}}</td>  
  25.                       <td>{{data.Name}}</td>  
  26.                       <td>{{data.Age}}</td>  
  27.                       <td>{{data.Address}}</td>  
  28.                       <td>{{data.City}}</td>  
  29.                       <td>{{data.Salary}}</td>  
  30.                       <td>{{data.Department}}</td>  
  31.                   </tr>  
  32.               </tbody>  
  33.           </table>  
  34.       </div>  
  35.   </div>  
  36. </div>  
  37. <br/>  
Open dragtable.component.ts file and add the following lines
  1. import { Component, OnInit } from '@angular/core';  
  2. import tableDragger from 'table-dragger'  
  3. @Component({  
  4.   selector: 'app-dragtable',  
  5.   templateUrl: './dragtable.component.html',  
  6.   styleUrls: ['./dragtable.component.css']  
  7. })  
  8. export class DragtableComponent implements OnInit {  
  9.    
  10.   constructor() { }  
  11.  public rowData= [    
  12.     {    
  13.         Id: "1",    
  14.         Name: "Sanwar",    
  15.         Age: "25",    
  16.         Address: "Jaipur",    
  17.         City: "Jaipur",    
  18.         Salary: "500000",    
  19.         Department: "IT",    
  20.            
  21.     },    
  22.     {    
  23.         Id: "2",    
  24.         Name: "Nisha",    
  25.         Age: "25",    
  26.         Address: "C-Scheme",    
  27.         City: "Jaipur",    
  28.         Salary: "500000",    
  29.         Department: "IT",    
  30.     },    
  31.     {    
  32.         Id: "3",    
  33.         Name: "David",    
  34.         Age: "25",    
  35.         Address: "C-Scheme",    
  36.         City: "Jaipur",    
  37.         Salary: "500000",    
  38.         Department: "IT",    
  39.     },    
  40.     {    
  41.         Id: "4",    
  42.         Name: "Sam",    
  43.         Age: "25",    
  44.         Address: "C-Scheme",    
  45.         City: "Jaipur",    
  46.         Salary: "500000",    
  47.         Department: "IT",    
  48.     },    
  49.     {    
  50.         Id: "5",    
  51.         Name: "Jyotsna",    
  52.         Age: "25",    
  53.         Address: "C-Scheme",    
  54.         City: "Mumbai",    
  55.         Salary: "500000",    
  56.         Department: "IT",    
  57.     },    
  58.     {    
  59.         Id: "6",    
  60.         Name: "Sid",    
  61.         Age: "25",    
  62.         Address: "C-Scheme",    
  63.         City: "Bangalore",    
  64.         Salary: "500000",    
  65.         Department: "IT",    
  66.     }  
  67. ]    
  68.   
  69.   ngOnInit(): void {  
  70.     var id = document.getElementById('table');  
  71.     console.log(id)  
  72.     var dragger = tableDragger(id, {  
  73.     mode: 'column',  
  74.     onlyBody: true,  
  75.     animation: 300  
  76.   });  
  77.   dragger.on('drop',function(from, to){  
  78.   });  
  79.   }  
  80.     
  81. }  
 Now open app.component.html file and add the following code:
  1. <app-dragtable></app-dragtable>  
 Now open app.module.ts file and add the following code.
  1. import { BrowserModule } from '@angular/platform-browser';      
  2. import { NgModule } from '@angular/core';      
  3. import { HttpClientModule } from "@angular/common/http";       
  4. import { AppComponent } from './app.component';      
  5. import { DragtableComponent } from './dragtable/dragtable.component';      
  6.       
  7. @NgModule({      
  8.   declarations: [      
  9.     AppComponent,      
  10.     DragtableComponent   
  11.   ],      
  12.   imports: [      
  13.     BrowserModule,      
  14.     HttpClientModule      
  15.   ],      
  16.   providers: [],      
  17.   bootstrap: [AppComponent]      
  18. })      
  19. export class AppModule { }   
Now, run the application using the 'npm start' command and check the result. 
 
Now click on header,drag and column and drop on another column.Its reorder columns.
 
 
We also drag and drop rows of the table. We need to change mode column to row.
 

Summary

 
In this article, we learned how to create drag and drop table columns Angular 10 application.