Angular + Material Table - How to drag & drop row if I use un Pipe filter

Question

If all rows is display, my code drag & drop works without issues but if my pipeFilter hide deleted element my drag & drop does not work (reality work but not display). If I use my toggle 2 time, my display is right.

My template:

<table mat-table #table [dataSource]="dataSource | periodicElementFilter:periodicElementFilter" class="mat-elevation-z8"
  cdkDropList
  [cdkDropListData]="dataSource"
  (cdkDropListDropped)="dropTable($event)">

....
</table>

If you want reproduce the problem, you can find a Demo online HERE. You drag & drop with toggle to ON => Succes and you drag & drop with toggle to OFF => KO

Note: in my sample Lithium is deleted.

Answer 1

First I would remove the [cdkDropListData]="dataSource" as you already have the data available from [dataSource].

For some odd reason this.table.renderRows(); is not detecting the changes even though your array is modified correctly after drag and drop is done. In order to force that change to happen, you can do something like this:

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

Stackblitz