angular / angular/components

mat-table laggy behavior with large number of elements

Offen
#13,460 8 Kommentare 18 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/table P4 perf
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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?

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verlinkten StackBlitz-Reproduktion und vergleiche die Interaktionen mit den Kontrollkästchen für 100, 1.000 und 10.000 Zeilen, wobei du die Anzahl der Spalten variierst. Profiliere das Auswahlverhalten von mat-table, um die Ursache der Verzögerung zu identifizieren. Als abgeschlossen gilt die Aufgabe, wenn das Auswählen einzelner Zeilen und aller Zeilen auch bei großen Tabellen reaktionsfähig bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend, performance
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.