angular / angular/components

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

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

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con l’esempio StackBlitz collegato in src/app/app.component.ts e riproduci il problema scorrendo orizzontalmente, ordinando due volte e usando un set di dati paginato. Confronta il rendering della colonna sticky prima e dopo l’ordinamento; è completato quando le celle sticky mantengono le loro posizioni senza richiedere il movimento del cursore o un evento touch.

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

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.