<mat-table> pagination runs into conflict with sticky when deleting row

Question

I have a problem, can not find anything online that was helpful to me and therefore hope that someone can help me here.

I am building a table which is dynamically filled. The user has the possibility to delete single rows of the table after the dynamic filling. The has a sticky column (the very first one) and pagination. These two features have caused me a number of problems and one of them I cannot solve.

The following scenario (see in gif): I have 10 rows in the table and because of the paginator, I only display for example 5. If I now delete one of the 5 displayed rows, the sixth row "slips in" and fills the space of the deleted row. Exactly here is the problem. With this "new" line the sticky element simply does not work. But only for this line, the other 4 are working perfectly fine. The strange thing is that as soon as I click on the edit button or just hover over the paginator, the row is somehow "updated" and the sticky column works again.

If there are any questions please feel free to respond - I'm happy about any help 🙂

Stackblitz: https://stackblitz.com/edit/angular-editable-table-part-1-sticky-column-atdm3y?file=src/app/app.component.ts (You have to click a delete button once, in order to "start the real bug" which concerns me.. something with the initialization does not work in this stackblitz example, but that's not important in this situation)

Answer 1

You need to use trackBy, lucky MatTable provides that as Input https://material.angular.io/components/table/api#MatTable

NgForOf needs to uniquely identify items in the iterable to correctly perform DOM updates when items in the iterable are reordered, new items are added, or existing items are removed.

Ref: https://angular.io/api/core/TrackByFunction#description

So basically simple fix:

HTML template:

<table mat-table [dataSource]="dataSource" [trackBy]="trackByIdentity">

Where trackByIdentity can be as simple as:

trackByIdentity(index, item) {
   return item.id;
}