Change table columns order using drag drop in Angular

Reorder table columns order using the drag drop feature in angular 16, 13,12, 11, 10, 9, 8, 7. This is very good user interface feature introduce by the angular material.

Angular Mat-table and column reordering

I will teach you how to change column reordering to an angular material 9 mat-table. If you would like to check features of mat-table, please see my other articles.

It can be achieve using angular cdk. This library provides several drag-and-drop features also.

As above demo of changing table columns order using drag & drop. I have added the code below how to do it using the angular7, 8 or 9+ version.

You need some module to install module @angular/material, and @angular/cdk check the package.json

{
   ....
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/material": "^9.2.4",
   ...
}

Import these module in app.module.js

....
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import {MatIconModule} from '@angular/material/icon';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {CommonModule} from '@angular/common';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkTableModule } from '@angular/cdk/table';
import { ScrollingModule } from '@angular/cdk/scrolling';
.......
........
const appRoutes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  {path: 'home', component: DragdropcolumnComponent},
];

@NgModule({
  declarations: [AppComponent,DragdropcolumnComponent],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(
      appRoutes
      //{ enableTracing: true } // <-- debugging purposes only
    ),
    BrowserAnimationsModule,
    MatPaginatorModule,
    MatTableModule,
    MatSortModule,
    MatIconModule,
    DragDropModule,
    CommonModule,
    A11yModule,
    CdkTableModule,
    CdkTreeModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    .......
  ],
  providers: [],
  exports: [RouterModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Create a component using the command, it will create .ts, .html, .css file.

ng g component dragdropcolumn

1. dragdropcolumn.component.ts copy and paste the code below

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

@Component({
  selector: 'app-dragdropcolumn',
  templateUrl: './dragdropcolumn.component.html',
  styleUrls: ['./dragdropcolumn.component.css']
})
export class DragdropcolumnComponent implements OnInit {
  dataSource: any;
  
  displayedColumns = ['id', 'name', 'age', 'gender', 'country'];
  rows = [
    {
      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'
    }
   ];
  
  columns: any[] = [
    {
      name: 'id',
      title: 'No.'
    },
    {
      name: 'name',
      title: 'Name'
    },
    {
      name: 'age',
      title: 'Age'
    },
    {
      name: 'gender',
      title: 'Gender'
    },
    {
      name: 'country',
      title: 'Country'
    }
  ];

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.rows);
  }
    tableDrop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex);
  }
}

2. dragdropcolumn.component.html copy & paste the code below

<mat-table cdkDropList 
           cdkDropListOrientation="horizontal"
           (cdkDropListDropped)="tableDrop($event)"
           [dataSource]="dataSource">

  <ng-container *ngFor="let column of columns; let i = index"
                [matColumnDef]="column.name">

    <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x">
      {{ column.title }}
    </mat-header-cell>

    <mat-cell *matCellDef="let element">{{ element[column.name] }}</mat-cell>

  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"
                  class="tableHeaderRow"
                  #tableHeaderRow></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

3. dragdropcolumn.component.css add below css code

.cdk-drag-preview {
  box-sizing: border-box;
  padding: 0 15px;
  position: relative;
}

.cdk-drag-preview::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  right: 5px;
  border-radius: 4px;
  border: solid 1px rgba(0,0,0,0.4);
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  color: transparent;
  position: relative;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-placeholder::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  right: 5px;
  border-radius: 4px;
  background: rgba(0,0,0,0.1);
  border: dashed 1px rgba(0,0,0,0.4);
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.mat-header-cell {
  cursor: pointer;
  border: dotted 3px transparent;
}

After adding these code install npm module and then start.

npm install

npm start

Open the browser and run http://localhost:4200/ . you should see the table with reorder feature.

Hello friends, this is my working example, I have added. If anything missing or you require some code. Comment in the comment section for more information of Reorder mat-table columns with angular material’s drag-and-drop.

You can find the code on git also https://github.com/infotechseo/angular-dragdrop-column

FAQs

Q1. How do you change the order of columns in angular table?

Ans: check above

Q2. How to drag and drop using Angular?

Q3. How do I drag and drop a column in a table?

Read also How to build API using Node, Express, MongoDb and Mongoose