angular / angular/components

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

オープン
#24,977 コメント 2 件 リアクション 4 件 担当者 0 名 GitHub で見る
area: cdk/table P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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 の例から始め、水平方向にスクロールし、2 回ソートし、ページ分割されたデータセットを使用して問題を再現します。ソート前とソート後の sticky 列のレンダリングを比較します。sticky セルがカーソルの移動やタッチイベントを必要とせずに位置を維持すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
38/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。