Angular material table renderRows() does not work with matSort

Question

I'm implementing sorting and deletion/addition to a mat-table.

I have been reading this, which works fine without sorting.

When I use mat-table and matSort attributes on a table, renderRows() stops working.

As soon as I remove the sorting attributes it works again.

I found an alternative solution but it would be good to know if I did something wrong, has someone else made it work, is it a bug or intended behaviour?

Doesn't work:

delete(index: number): void {
  this.dataSource.data.splice(index, 1);
  this.table.renderRows();
}

Does work:

delete(id: number): void {
  this.dataSource.data = this.dataSource.data.filter( (item: any) => item.id !== id);
}

neilnikkunilesh · Accepted Answer · 2021-08-02 10:34:07Z

7

after splice() by index of item, you should update the datasource.

delete(id: number, index: number): void {
    this.dataSource.data.splice(index, 1);
    this.table.renderRows();
    this.dataSource._updateChangeSubscription();  // <-- Refresh the datasource
  }

Working example link Stackblitz

answered Aug 2, 2021 at 10:34

neilnikkunilesh

3833 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roland Be Over a year ago

Thanks! This works and the table.renderRows() is not even needed anymore.

Collectives™ on Stack Overflow

Angular material table renderRows() does not work with matSort

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related