Components: 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