bug(MatTable MatSort MatPaginator): Wrong display of sticky columns after sorting
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
### 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
Guía de contribución
Línea de trabajo
Comienza con el ejemplo vinculado de StackBlitz en src/app/app.component.ts y reproduce el problema desplazándote horizontalmente, ordenando dos veces y usando un conjunto de datos paginado. Compara la renderización de la columna sticky antes y después de ordenar; estará listo cuando las celdas sticky conserven sus posiciones sin requerir movimiento del cursor ni un evento táctil.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bien especificado
- Aptitud para principiantes
- 38/100