Angular CDK Drag/Drop List with table-body / rows distorting width (without Material)

Question

I'm using a plain (Bootstrap) table which I want to have sortable rows on. I'm using the Angular CDK (DragDropModule) to implement sorting / ordering. However, when the row gets dragged, it distorts the width, as the cdkDragPreview (tr element) is now outside the table, appended to the body, so it has a different display style and the column widths wouldn't match with the original table even if it was display:table.

Here's the rough html:

  <table>
    <thead>
      <tr>
        <th><i class="fas fa-sort mt-1"></i></th>
        <th>Code</th>
        <th>Name</th>
        <th>Date Type</th>
      </tr>
    </thead>
    <tbody cdkDropList (cdkDropListDropped)="drop($event)">
      <tr *ngFor="let date of dates" cdkDrag>
        <td cdkDragHandle><i class="fas fa-sort mt-1"></i></td>
        <td>{{ date.code }}</td>
        <td>{{ date.name }}</td>
        <td>{{ date.dateType }}</td>
      </tr>
    </tbody>
  </table>

How do I get the dragging/ordering to 'look good'?

Answer 1

I've ended up NOT using a drag preview (cdkDragPreview) as that's too difficult to get the columns widths right. Instead, I simply set the cdkDragPreview to an empty element so nothing shows, and let the user see the actual (underlying) sort, rather than the preview.

So, simply:

  <table>
    <thead>
      <tr>
        <th><i class="fas fa-sort mt-1"></i></th>
        <th>Code</th>
        <th>Name</th>
        <th>Date Type</th>
      </tr>
    </thead>
    <tbody cdkDropList (cdkDropListDropped)="drop($event)">
      <tr *ngFor="let date of dates" cdkDrag>
        <td cdkDragHandle><i class="fas fa-sort mt-1"></i><span *cdkDragPreview></span></td>
        <td>{{ date.code }}</td>
        <td>{{ date.name }}</td>
        <td>{{ date.dateType }}</td>
      </tr>
    </tbody>
  </table>

If anyone can find a good, easy way of getting the column widths right, that would be ideal...

Answer 2

I ended up to set the column width manually.

See the working example: https://angular-cdk-drag-drop-bootstrap-table.stackblitz.io

Result

.col-xs {
  width: 2%;  
}

.col-sm {
  width: 10%;  
}

.col-md {
  width: 20%;  
}

<tbody cdkDropList
        (cdkDropListDropped)="onDrop($event)">
    <tr *ngFor="let user of users"
        cdkDrag
        cdkDragLockAxis="y">
        <th class="col-xs">
            <div class="drag-handle">
                <ng-container [ngTemplateOutlet]="dragHandleTmpl">
                </ng-container>
                {{ user.order }}
            </div>
        </th>
        <td class="col-md">{{ user.first }}</td>
        <td class="col-md">{{ user.last }}</td>
        <td class="col-md">{{ user.email }}</td>
        <td class="col-md">{{ user.address }}</td>
    </tr>
</tbody>