angular / angular/components

help(COMPONENT): Getting Sticky to work right for Angular Material Data Table.

Offen
#19,872 6 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/table cannot reproduce P4 troubleshooting
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### What are you trying to do?

Get sticky to work right. Here's a Stackblitz that has an ID column that is sticky, and two other columns. In this case sticky works correctly because there are only two other columns:

https://stackblitz.com/edit/angular-material-minimal-sticky

However if we add 100 columns, as is done in this demo:

https://stackblitz.com/edit/angular-material-minimal-with-paging-and-sorting-and-sticky-100

The ID column disappears when scrolling horizontally.

The solution suggested on SO is to use inline-flex:

https://stackoverflow.com/questions/62562388/getting-sticky-to-always-stick-the-column-in-material-data-table

However that creates another problem, which is that the header cells no longer expand to fit the table with.

That can cause table rows to wrap inside the main table container as described here:

https://stackoverflow.com/questions/62584549/material-data-table-wraps-rows-when-table-width-allows-it

Any thoughts on how to get sticky to work right, without causing the wrapping issues?

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, das Verhalten in den beiden verlinkten StackBlitz-Demos zu reproduzieren, und vergleiche es mit dem in den verlinkten Stack-Overflow-Antworten beschriebenen inline-flex-Ansatz. Untersuche anschließend das Verhalten von Angular Material-Datentabellen mit fixierten Spalten und überprüfe dann, dass die ID-Spalte bei 100 Spalten sichtbar bleibt, während die Größenanpassung der Kopfzeile und der Zeilenumbruch weiterhin korrekt funktionieren.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
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.