When using mat-table (not classic html table), how to apply cdkDropList to tbody?

Question

I am currently using mat-table as this simple example from documentation:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  ...

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

In order to be able to change the order of the rows, I then use cdk drag and drop using the cdkDrag directive on the right of mat-row and cdkDropList on the right of mat-table. I also needed to use other properties like cdkDropListSortPredicate, but I'll keep it simple to explain my problem : I have observed several problems with events and predicates. While inspecting the html code while doing my manipulations, I saw that the placeholder was sometimes placed outside the tbody because the element attached to CdkDropList is the table and not the tbody where the rows to be reordered are located.

So, as mentioned in the topic, have you ever successfully applied the cdkDropList directive to the tbody generated by an angular table (mat-table)? Or can you think of a solution? (I tried to create my own directive that modifies the element attached to the CdkDropList but without success)

UPDATED 1: I observe these problems especially in the situation where the dragged element comes from another list. It's the placeholder that is generated outsite of tbody. So, the problem can't be resolved with CdkDropListDropped.

UPDATED 2: Here is the stackblitz link to understand my problem. In the example, one of the problems is that I don't want the placeholder to appear in the first position in the list if you go over the header. Because visually it might look like you can drop the element here. PS : Once I have solved this problem, another difficulty for me will be to hide the placeholder based on a condition. If you drag the element to the wrong position before dragging it to the correct position, the placeholder appears in the last position. I don't want that.

Answer 1

The following solution will help you. You can render the table rows within the body using cdkDropList

stackblits solution

 dropTable(event: CdkDragDrop<PeriodicElement[]>) {
    const prevIndex = this.dataSource.findIndex(d => d === event.item.data);
    moveItemInArray(this.dataSource, prevIndex, event.currentIndex);
    this.table.renderRows();
}