Angular 6 MatTable Performance in 1000 rows.

Question

I'm using angular material in my project and I'm using Mat-Table to render 1000 Product/row per table. When Change pagination (we use backend pagination) of table to 1000 rows the performance become very slow I even can't write in textboxes.

I tried to debug the issue so I put logs on one column template so I can see how's render works.

I see it's Rerender all rows even if I hover on the table headers. Is there's any possibilities to control the change detection to be like ChangeDetectionStrategy.OnPush

Answer 1

Not sure if this will help your situation as there's no code but we've found that the MatTable loads very slowly if a large data set is set before you set the datasource paginator.

For example - this takes several seconds to render...

dataSource: MatTableDataSource<LocationItem> = new MatTableDataSource();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  this.dataSource.data = [GetLargeDataSet];
}

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}

...but this is fast

ngOnInit() {
  // data loaded after view init 
}

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;

  /* now it's okay to set large data source... */
  this.dataSource.data = [GetLargeDataSet];
}

Incidentally, we were only finding this issue the second time we access the component as the large dataset from server was being cached and was immediately available the second time component was accessed. Another option is to add .delay(100) to your observable if you want to leave that code in the ngOnInit function.

Anyway, this may or may not help your situation.

Answer 2

I had solved this issue and i improved the performance by wrap the table in custom (grid) component and Control the changeDetection of the component to be ChangeDetectionStrategy.OnPush and when i want to render update i used ChangeDetectorRef.detectChanges()

Answer 3

I have found the paginator and sort to sometimes not work.

What has worked for me with over 2000 rows was:

 ngAfterViewInit() {
      setTimeout(() => {
          this.getLargeDataSet.subscribe(largeDataSet => {
              this.dataSource.paginator = this.paginator;
              this.dataSource.sort = this.sort;
              this.dataSource.data = largeDataSet;
          });
      });
 }

Supper fast, from 10+sec to 2sec :0