使用material的cdk实现拖拽mat-table的列名改变列顺序

最近遇到这样一个需求，要拖拽表格列名改变表格顺序，本文使用material的cdk和mat-tabble实现；

table-view.component.html：

<div class="content">

  <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>
</div>

table-view.component.css：

.content {
    display: flex;
    flex-direction: column;

    table {
        width: 100%;
    }
}
.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;
  }
  

table-view.component.ts：

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

@Component({
  selector: 'app-table-view',
  templateUrl: './table-view.component.html',
  styleUrls: ['./table-view.component.scss']
})
export class TableViewComponent implements OnInit, OnChanges {

  @Input() terminals;
  @Input() tableLists;

  constructor() { }

  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'
    }
  ];
  timePeriods = [
    'Bronze age',
    'Iron age',
    'Middle ages',
    'Early modern period',
    'Long nineteenth century',
  ];

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

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.timePeriods, event.previousIndex, event.currentIndex);
    console.log(event);
    
  }
}