angular / angular/components

mat-table laggy behavior with large number of elements

Open
#13,460 8 comments 18 reactions 0 assignees View on GitHub
area: cdk/table P4 perf
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.