angular / angular/components

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

未关闭
#24,977 2 条评论 4 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/table P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

贡献指南

打开贡献指南

调研方向

从 src/app/app.component.ts 中链接的 StackBlitz 示例开始,通过水平滚动、排序两次并使用分页数据集来重现该问题。比较排序前后的 sticky 列渲染;当 sticky 单元格无需移动光标或触发触摸事件即可保持其位置时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。