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 {
  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",
  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. ]
  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. }
  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';
  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.