mat-table laggy behavior with large number of elements
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### 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?
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and compare checkbox interactions for 100, 1,000, and 10,000 rows, varying the number of columns. Profile the mat-table selection behavior to identify the source of the lag. Done means selecting individual rows and all rows remains responsive for large tables.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100