angular / angular/components

feat(DataTable): Dynamic Recalculation of Sticky Header Column Position on Resize

Aperta
#23,205 5 commenti 2 reazioni 0 assegnatari Vedi su GitHub
area: material/table P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Feature Description

If the columns of a table that uses sticky headers fit within the container, then the sticky header scrolling is not applied, as it should be.

If the containing element is smaller than the data table, the sticky columns are rendered correctly.

However if we start with a container that fits the data table, and then resize the browser such that the containing container is now smaller, the sticky columns don't rerender properly. Scrolling is there, but usually when there's more than one column, it will be rendered too far to the right, and when the other columns are scrolled they will "Bleed" through the area where the sticky header column has left space.

I'm attaching a screenshot of this.
![8D5E7E94-BE64-46C9-A280-9A3E69982927_4_5005_c](https://user-images.githubusercontent.com/25155787/126391993-d656c2d7-d084-49e4-ae79-ca16265405ff.jpeg)

Notice that the "Type" column, which is scrolled behind SKU bleeds through where the table is "Missing" because the SKU column is rendered too far to the right.

#### Use Case

Correct rendering of the Sticky Columns when the table is resized.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci il problema con una Angular DataTable che usa sticky headers, ridimensionando prima il browser da un contenitore in cui la tabella entra a uno in cui non entra. Il lavoro è completato quando le sticky columns vengono riposizionate correttamente dopo il ridimensionamento, senza spazi vuoti né altre colonne che traspaiano nella loro area riservata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.