Angular 在具有角度的表格中拖放列

我需要移动表的列，但我不知道要使用哪个组件或如何实现它，您能推荐一个组件和如何实现它吗

基本上这是我的component.html

<form>
<table class="table-fixed">
<thead>
  <tr>
    <th *ngIf="selectionMode == 'multi'" class="checkbox">
      <mat-checkbox (change)="onChangeSelectionAll($event)">
      </mat-checkbox>
    </th>
    <th *ngFor="let column of columns" class="pointer" (click)="sort(column)">{{column.label}}
    </th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let node of data">
    <td>
      <mat-checkbox [checked]="node.isSelected" name="node.id" (change)="onChangeSelection($event, node)" [ngClass]="node.isFiltered ? 'filtered' : ''">
      </mat-checkbox>

    </td>
    <td *ngIf="showIcon" class="icon" (click)="onClicked($event, node)">
      <i class="icon-{{node.data.iconname ? node.data.iconname.toLowerCase().replace('.png', '') : ''}}" height="24"></i>
    </td>
    <td *ngIf="showStatus" class="icon">
      <i *ngIf="node.tooltip !== '<ul></ul>'" tooltip-delay="300" tooltip='{{ node.tooltip }}' tooltip-position="right" class="material-icons {{node.icon_class}}"
        height="24">{{node.icon}}</i>
      <i *ngIf="node.tooltip === '<ul></ul>'" class="material-icons {{node.icon_class}}" height="24">{{node.icon}}</i>
    </td>
    <td *ngFor="let column of columns" class="{{(node.normalizedError && node.normalizedError[column.id]) ? 'error' : 'normal'}}"
      tooltip="{{(node.normalizedError && node.normalizedError[column.id]) ? node.normalizedError[column.id] : false}}"
      tooltip-delay="300" tooltip-position="below" tooltipDisabled="{{(node.normalizedError && node.normalizedError[column.id]) ? false : true}}"
      (click)="onClicked($event, node)" [innerHTML]="node.normalizedData[column.name.toLowerCase()] ? node.normalizedData[column.name.toLowerCase()] : ''"></td>
  </tr>
</tbody>
<!--</div>-->
</table>
</form>

{{column.label}}
{{node.icon}
{{node.icon}

---

如何移动这些列

您可以对datatable使用Priming组件，它具有对列重新排序的功能

据我所知，您可以通过以下任一方式实现此目的-

参考此 您可以使用此角度材质框架，并通过使用CDKDROPLISTDROPED事件

2.如@Gaurav所述，您可以使用

3.如果你不想使用任何额外的框架，你可以如下实现-

//在html中

   <th *ngFor="let t of tableHeader;index as i" draggable="true" (dragstart)="dragStartColumn(i)"
          (dragover)="allowDrop($event)" (drop)="dropColumn(i)""></th>

//还有拖拽事件

  public dragStartColumn(index) {
    this.draggedColumnIndex = index;
  }

  public allowDrop(event) {
    event.preventDefault();
  }

  public dropColumn(index) {
    this.arrayMove(this.tableHeader, this.draggedColumnIndex, index);
  }

就这样！现在，你的专栏可以拖拉了。

我在这里找到了答案：给男人一些爱。

  public dragStartColumn(index) {
    this.draggedColumnIndex = index;
  }

  public allowDrop(event) {
    event.preventDefault();
  }

  public dropColumn(index) {
    this.arrayMove(this.tableHeader, this.draggedColumnIndex, index);
  }