angular / angular/components

bug(MatTable MatSort MatPaginator): Wrong display of sticky columns after sorting

Ouverte
#24,977 2 commentaires 4 réactions 0 personnes assignées Voir sur GitHub
area: cdk/table P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Example project: https://stackblitz.com/edit/angular-ivy-fojmnq?file=src/app/app.component.ts

A MatTable with sticky columns, MatSort and MatPaginator are created. After scrolling the table horizontally and clicking on sort header, some cells of sticky columns are rendered with offsets. After moving a cursor or tapping (on touch devices) the view is refreshed and looks as expected.

This issue appears only when not all of data present in MatTableSource.data is displayed. When page size of paginator is set that is show all the data, everything works fine.

### Reproduction

Steps to reproduce in example project:
1. Move horizontal scroll
2. Click on any sort header 2 times - try not to move cursor much
3. Sticky columns cells should display with offset or not display at all
4. After moving cursor, view is back to normal

### Expected Behavior

Sticky columns shouldn't change position after sorting data

### Actual Behavior

Sticky columns change position

### Environment

- Angular: 13.2.2
- CDK/Material: 13.2.2
- Browser(s): Chrome (v101.0.4951.64), Firefox(v100.0.2), Safari (v15.1)
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’exemple StackBlitz lié dans src/app/app.component.ts et reproduisez le problème en faisant défiler horizontalement, en triant deux fois et en utilisant un ensemble de données paginé. Comparez le rendu de la colonne sticky avant et après le tri ; c’est terminé lorsque les cellules sticky conservent leur position sans nécessiter de mouvement du curseur ni d’événement tactile.

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é
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.