angular / angular/components

[cdk-virtual-scroll-viewport][mat-table] - sticky headers is not working properly when combining mat-table with cdk-virtual-scroll-viewport

Open
#18,240 3 comments 9 reactions 0 assignees View on GitHub
area: cdk/scrolling P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue
https://stackblitz.com/edit/virtual-scroll-table-sticky-headers

Steps to reproduce:
1. wrap mat-table within a cdk-virtual-scroll-viewport element
2. add sticky: true property to *matHeaderRowDef directive as stated in documentation
3. observe sticky header slide down the viewport after about 10 rows.

#### Expected Behavior
Expect when adding the sticky:true; property to mat-table *matHeaderRowDef directive wrapped within a cdk-virtual-scroll-viewport that the headers remain positioned at the top of the viewport.

#### Actual Behavior
As you scroll the cdk-virtual-scroll-viewport slides the entire mat-table instead of just the row contents wrapped in the tbody element.

#### Environment

- Angular: >= 7
- CDK/Material: >= 7
- Browser(s): chrome, firefox, opera, safari
- Operating System (e.g. Windows, macOS, Ubuntu): all

Contributor guide

Open the contributing guide

Research direction

Reproduce the problem using the linked StackBlitz examples with mat-table wrapped in cdk-virtual-scroll-viewport and sticky set on matHeaderRowDef. Investigate the interaction between the virtual scroll viewport and table header positioning; done means the header remains at the top while the table contents scroll across the listed browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.