mat-table laggy behavior with large number of elements

[sliu724]

Bug, feature request, or proposal:

The mat-table component with selection suffers in performance when the number of elements gets decently large. Selecting a single row or the select all buttons shows a lot of lag that increases as the number of columns increases.

What is the expected behavior?

mat-table should be able to support good performance for large number of rows.

What is the current behavior?

Slow, laggy animations from clicking on single row checkbox or checkbox for select all

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

https://stackblitz.com/edit/angular-vyv97t
Update table with 100 rows, click a few checkboxes.
Update table with 1,000 rows, click a few checkboxes.
Update table with 10,000 rows, click a few checkboxes.

The performance gets significantly worse.

What is the use-case or motivation for changing an existing behavior?

Creating a table which contains lot of entries from the some backend API service. The user should be able to experience smooth UI and user experience.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6, Material 6.4.7, Chrome

Is there anything else we should know?

[manklu]

Relates to #10122

[julianobrasil]

I have a similar problem with mat-select. It takes about 3 seconds to show the panel if you have a large number of options. I'm looking forward to the virtual scroll getting into place within those components in #10122.

[DanielSwiegersServian]

The order of setting up your sorting and pagination on a mat-table can have a large impact on performance.

Only including your data AfterVIewInit can speed this up significantly.

https://stackoverflow.com/questions/50283659/angular-6-mattable-performance-in-1000-rows#answer-51296374

[SinghManvir]

The order of setting up your sorting and pagination on a mat-table can have a large impact on performance.

Only including your data AfterVIewInit can speed this up significantly.

https://stackoverflow.com/questions/50283659/angular-6-mattable-performance-in-1000-rows#answer-51296374

Isn't this for only client side paging and sorting? I am using my own data source type and loading 1000 rows with server side sorting and paging. Even with ChangeDetection set to OnPush, when I hover on the table headers, it starts rendering everything again, completely freezing the app.

[FredyValstrauss]

Any update on this issue?

I'm facing the exact same issue using Angular 10, Material 10 and Chrome 96.

In my case, I use mat-table with expandable rows, and the slowness is very evident with 100 items on screen.

In addition, I noticed than in early versions of Chrome, this issue did not happened. It started to happening just a couple of months ago, with my Angular app staying the same all the time (no deployments in between). Another thing I noticed is, my exact same app does not show as much lag as with MS Edge (Chromium), which actually surprised me a lot. Even when MS Edge consume more CPU and RAM than Chrome, it feels kind of faster in comparison.

Could it be that Chrome updates are making this navigator slower and slower every time?

[andrewcorliss]

Hello,

Still facing this issue on the latest version of Angular in 2023 is there going to be any attempt for better performance of large table data (i.e. larger than 20 columns and multiple data rows)?
Seems odd this is still persistent issue.

[arodr967]

Adding to the thread here as we too are experiencing a lack of performance on large data sets.

[jycr]

Example contains function calls in template expressions (hasValue(), isAllSelected(), isSelected(), etc.) :

  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)">
      </mat-checkbox>
    </td>
  </ng-container>

Function calls in template expressions is a very bad practice for performance (cf. https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496)