angular / angular/components

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

Aperta
#19,872 6 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: material/table cannot reproduce P4 troubleshooting
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia riproducendo il comportamento nelle due demo StackBlitz collegate e confrontalo con l’approccio inline-flex descritto nelle risposte collegate di Stack Overflow. Analizza quindi il comportamento delle colonne bloccate nelle tabelle dati di Angular Material, poi verifica che la colonna ID rimanga visibile con 100 colonne, mentre il dimensionamento dell’intestazione e il ritorno a capo delle righe continuino a funzionare correttamente.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.