angular / angular/components

bug(MatTable): Flex tables do not correctly expand height of footer row

Open
#27,387 1 comment 0 reactions 1 assignee Claimed by @andrewseguin 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

V14

### Description

When using footer rows with flex tables, the footer row height will not expand like the header rows do.

Suspect this is because of an [incorrect CSS selector in material/table/table.scss](https://github.com/angular/components/blob/de7c3dbd084f84cc6601830e3639c679a91bbbd3/src/material/table/table.scss#L135).

Selector:

```css
.mat-mdc-table mat-footer-row.mat-mdc-footer-cell {
...
}
```

Should be:

```css
.mat-mdc-table mat-footer-row.mat-mdc-footer-row {
...
}
```

### Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-dqhwvz?file=src%2Fapp%2Ftable-flex-basic-example.css

Steps to reproduce:

1. Angular Material table example should have X in second column for both header and footer
2. X in footer is clipped top and bottom
3. Uncomment CSS selector in table-flex-basic-example.css to fix problem

### Expected Behavior

Expect footer row to auto expand height in a similar way to header row.

### Actual Behavior

Footer does not auto expand height.

### Environment

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.