Open utterances-bot opened 2 years ago
thanks
thanks
Thanks. It's perfect!!
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:
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);
}
}
<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>
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);
}
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/