Search code examples
angularangular-materialangular-material2angular-cdk

Angular 6 MatTable Performance in 1000 rows


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

enter image description here


Solution

  • I had solved this issue and I improved the performance by wrapping 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()