experience/angular-cdk-drag-drop-list-table/

[utterances-bot]

Angular CDK Drag/Drop List inside a table (not Material Table) - Handle rows distorting width - Trung Vo - JavaScript and more

A seasoned front-end engineer with 7 years of passion in creating experience-driven products. I am proficient in Angular, React and TypeScript development.

https://trungk18.com/experience/angular-cdk-drag-drop-list-table/

[marccalixto]

thanks

[jangkyavn]

thanks

[alexbrigido]

Thanks. It's perfect!!

[jasonstringify]

Another option is to create a custom "cdkDragPreview" for only one of the cells to be visible. That way you do not have to have a fixed with for the columns. I created a stackblitz for this below and will also paste in the code. The code also contains code for re-ordering columns, which can be deleted if you do not want to use that:

https://stackblitz.com/edit/angular-wiqzro-xar8wb?file=src%2Fapp%2Fcdk-drag-drop-example.html,src%2Fapp%2Fcdk-drag-drop-example.ts,src%2Fapp%2Fcdk-drag-drop-example.css

TYPESCRIPT FILE

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

/**
 * @title Drag&Drop horizontal sorting
 */
@Component({
  selector: 'cdk-drag-drop-example',
  templateUrl: 'cdk-drag-drop-example.html',
  styleUrls: ['cdk-drag-drop-example.css'],
})
export class CdkDragDropExample {
  columns = [
    {key: 'id', text: 'id'},
    {key: 'item_name', text: 'Item Name', isName:true},
    {key: 'c3', text: 'Column3'},
    {key: 'c4', text: 'Column4'},
    {key: 'c5', text: 'Column5'},

  ];

  get nameColumn(): any {
    let nameColumn = null;
    this.columns.forEach(column => {
      if (column.isName) {
        nameColumn = column;
      }
    });
    return nameColumn;
  }

  rows:any = [
    {id:'1',item_name:'Name Field a2',c3:'a3',c4:'a4',c5:'a5'},
    {id:'2',item_name:'Name Field b2',c3:'b3',c4:'b4',c5:'b5'},
    {id:'3',item_name:'Name Field c2',c3:'c3',c4:'c4',c5:'c5'},
    {id:'4',item_name:'Name Field d2',c3:'d3',c4:'d4',c5:'d5'},
    {id:'5',item_name:'Name Field e2',c3:'e3',c4:'e4',c5:'e5'},
  ];

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

  dropRow(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.rows, event.previousIndex, event.currentIndex);
  }

}

HTML FILE

<table>
  <thead>
    <tr
      cdkDropList
      cdkDropListOrientation="horizontal"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
      cdkDropListAutoScrollStep="10"
    >
      <th *ngFor="let column of columns" cdkDrag cdkDragLockAxis="x">
        {{column.text}}
      </th>
    </tr>
  </thead>
  <tbody
    cdkDropList
    cdkDropListOrientation="vertical"
    (cdkDropListDropped)="dropRow($event)"
    cdkDropListAutoScrollStep="10"
  >
    <tr cdkDrag *ngFor="let row of rows" cdkDragLockAxis="y">
      <div *cdkDragPreview class="my-custom-cdk-drag">
        <div *ngIf="nameColumn">
          {{row[nameColumn.key]}}
        </div>
        <div *ngIf="!nameColumn">
          {{row[columns[0].key]}}
      </div>
      </div>
      <td *ngFor="let column of columns">{{row[column.key]}}</td>
    </tr>
  </tbody>
</table>

CSS FILE

table thead tr th, table tbody tr td {
  cursor: move; 
}

.cdk-drag-preview,.my-custom-cdk-drag {
  box-sizing: border-box;
  background-color: rgba(255,255,255,.9);
  border-radius: 4px;
  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);
}

.my-custom-cdk-drag {
  padding: 10px 20px;
}

.cdk-drag-placeholder {
  opacity: 0;
}

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