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.

ng new sdemo

 Open this project in Visual Studio Code and install bootstrap by using the  following command.

npm install bootstrap --save

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line. 

@import '~bootstrap/dist/css/bootstrap.min.css';

Now install Table-dragger library using the following command.

npm install table-dragger --save

Now create a new component by using the following command.

ng g c dragtable

 Now open dragtable.component.html file and add the following code:

<div>
  <div class="row" style="margin-top:10px;margin-bottom: 10px;">
    <div class="col-sm-12 btn btn-success">
      Drag and drop table Columns in Angular application
    </div>
  </div>
<div class="container">
  <div class="row">
      <div class="col-md-12">
          <table class="table" id="table">
              <thead class="thead-dark">
                  <tr>
                      <th>Id</th>
                      <th>Name</th>
                      <th>Age</th>
                      <th>Address</th>
                      <th>City</th>
                      <th>Salary</th>
                      <th>Department</th>
                  </tr>
              </thead>
              <tbody>
                  <tr *ngFor="let data of rowData">
                      <td>{{data.Id}}</td>
                      <td>{{data.Name}}</td>
                      <td>{{data.Age}}</td>
                      <td>{{data.Address}}</td>
                      <td>{{data.City}}</td>
                      <td>{{data.Salary}}</td>
                      <td>{{data.Department}}</td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>
</div>
<br/>

Open dragtable.component.ts file and add the following lines

import { Component, OnInit } from '@angular/core';
import tableDragger from 'table-dragger'
@Component({
  selector: 'app-dragtable',
  templateUrl: './dragtable.component.html',
  styleUrls: ['./dragtable.component.css']
})
export class DragtableComponent implements OnInit {

  constructor() { }
 public rowData= [
    {
        Id: "1",
        Name: "Sanwar",
        Age: "25",
        Address: "Jaipur",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",

    },
    {
        Id: "2",
        Name: "Nisha",
        Age: "25",
        Address: "C-Scheme",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "3",
        Name: "David",
        Age: "25",
        Address: "C-Scheme",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "4",
        Name: "Sam",
        Age: "25",
        Address: "C-Scheme",
        City: "Jaipur",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "5",
        Name: "Jyotsna",
        Age: "25",
        Address: "C-Scheme",
        City: "Mumbai",
        Salary: "500000",
        Department: "IT",
    },
    {
        Id: "6",
        Name: "Sid",
        Age: "25",
        Address: "C-Scheme",
        City: "Bangalore",
        Salary: "500000",
        Department: "IT",
    }
]

  ngOnInit(): void {
    var id = document.getElementById('table');
    console.log(id)
    var dragger = tableDragger(id, {
    mode: 'column',
    onlyBody: true,
    animation: 300
  });
  dragger.on('drop',function(from, to){
  });
  }

}

 Now open app.component.html file and add the following code:

<app-dragtable></app-dragtable>

 Now open app.module.ts file and add the following code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { DragtableComponent } from './dragtable/dragtable.component';

@NgModule({
  declarations: [
    AppComponent,
    DragtableComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
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.