angular / angular/components

mat-table laggy behavior with large number of elements

Ouverte
#13,460 8 commentaires 18 réactions 0 personnes assignées Voir sur GitHub
area: cdk/table P4 perf
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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?

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et comparez les interactions avec les cases à cocher pour 100, 1 000 et 10 000 lignes, en faisant varier le nombre de colonnes. Profilez le comportement de sélection de mat-table afin d’identifier la source du ralentissement. C’est terminé lorsque la sélection de lignes individuelles et de toutes les lignes reste réactive pour les grandes tables.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend, performance
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.