0

I have an angular material data table with around 200 records. I have used mat-paginator and mat-sort on the data table. When I click on the sort icon or change the paginator number from 25 to 50 or 100, it freezes for 4-5 seconds. It should not happen for such small number of records, should it?

Here's the code:

@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

changeDetection: ChangeDetectionStrategy.OnPush,

ngOnInit(): void {
  this._sleeve.getPublishedSleeves().subscribe((sleeves: Sleeve[]) => {
    this.dataSource = new MatTableDataSource(sleeves);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.dataSource.filterPredicate = this.createFilter();
    this.dataSource.filter = JSON.stringify(this.filterValues); // applying filters if any
  });
}

It works the same when I put the above logic in ngAfterViewInit instead of ngOnInit

Pritam Bohra
  • 3,912
  • 8
  • 41
  • 72
  • No this really shouldn’t happen. Issue might be in your template.. can you post that? – MikeOne Dec 23 '20 at 21:54
  • 200 records are not so much. If you're using pipes to show one or more columns try transform the data before create the dataSource. Another way more complex is has an API that return the results paginated like this SO:https://stackoverflow.com/questions/63780213/connect-method-datasource-is-not-emitting-all-paginated-rows-for-mattable/63783274#63783274, but it's should not be necesary – Eliseo Dec 23 '20 at 21:57

0 Answers0