Reorder mat-table rows with angular material's drag-and-drop

Question

Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples

The documentation deals with rearranging items

Answer 1

If you are still using table to render a table instead of mat-table. You can consider the approach to manually set width of each td column on your table.

See the full explanation and stackblitz on https://trungk18.com/experience/angular-cdk-drag-drop-list-table/

.col-xs {
  width: 2%;
}

.col-sm {
  width: 10%;
}

.col-md {
  width: 20%;
}

This is the final result