angular / angular/components

feat(DataTable): Dynamic Recalculation of Sticky Header Column Position on Resize

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

描述

#### Feature Description

If the columns of a table that uses sticky headers fit within the container, then the sticky header scrolling is not applied, as it should be.

If the containing element is smaller than the data table, the sticky columns are rendered correctly.

However if we start with a container that fits the data table, and then resize the browser such that the containing container is now smaller, the sticky columns don't rerender properly. Scrolling is there, but usually when there's more than one column, it will be rendered too far to the right, and when the other columns are scrolled they will "Bleed" through the area where the sticky header column has left space.

I'm attaching a screenshot of this.
![8D5E7E94-BE64-46C9-A280-9A3E69982927_4_5005_c](https://user-images.githubusercontent.com/25155787/126391993-d656c2d7-d084-49e4-ae79-ca16265405ff.jpeg)

Notice that the "Type" column, which is scrolled behind SKU bleeds through where the table is "Missing" because the SKU column is rendered too far to the right.

#### Use Case

Correct rendering of the Sticky Columns when the table is resized.

贡献指南

打开贡献指南

调研方向

使用带有 sticky headers 的 Angular DataTable 重现该问题,先将浏览器从表格能够容纳在其中的容器调整到表格无法容纳在其中的容器。完成的标准是:调整大小后 sticky columns 能够正确重新定位,不出现间隙,也没有其他列穿入其预留区域。

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

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
功能
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
需要澄清
新手友好度
35/100

把新 issue 发到你的邮箱

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