angular / angular/components

bug(MatTable): Vertical languages rotated and sticky columns

Open
#30,542 1 comment 0 reactions 0 assignees View on GitHub
area: material/table P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

18

### Description

When there are multiple sticky columns and a column has the `writing-mode: vertical-lr` CSS rule applied (and assuming it is not the _last_ sticky column), the table does not calculate the width of the column correctly. It uses the default `horizontal-tb` mode to calculate the width and uses that instead, causing subsequent sticky columns to overlap with non-sticky columns and creates a blank space between the column with the `vertical-lr` rule and the next sticky column.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-6mfsadjh?file=src%2Fmain.ts,package.json
Steps to reproduce:
1. First two columns are sticky
2. One non-sticky column has `width: 100%` to force column compression

### Expected Behavior

The second column should have a `left` value that matches the width of the first column.

### Actual Behavior

The second column uses unrotated column width as its `left` value

![Image](https://github.com/user-attachments/assets/aeff30fd-dec3-4aa3-b40b-4fba4534d0a3)

### Environment

- Angular: 19
- CDK/Material: 19
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and compare the first two sticky columns when the non-last sticky column uses writing-mode: vertical-lr. Verify the second column's left value against the first column's rendered width; done means the values match without overlap or blank space in the reproduced table.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.