angular / angular/components

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

Ouverte
#19,872 6 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: material/table cannot reproduce P4 troubleshooting
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le comportement dans les deux démos StackBlitz liées et comparez-le avec l’approche inline-flex décrite dans les réponses Stack Overflow liées. Étudiez ensuite le comportement des colonnes sticky des tableaux de données Angular Material, puis vérifiez que la colonne ID reste visible avec 100 colonnes, tout en veillant à ce que le dimensionnement de l’en-tête et le retour à la ligne des lignes continuent de fonctionner correctement.

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

Évaluation

Stack technique
angular, typescript
Domaine
frontend
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.