angular / angular/components

bug(mat-table): matFooterCellDef not showing updated value when changed

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

Description

### 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

When creating dynamic tables using mat-table and it's directives, I expect to pass data to the dynamic component and it to rerender everything based on data.

```html




{{ column.header }}


{{ column.cell(row) }}


{{ column.footer }}




```

### Reproduction

Reproduction: https://stackblitz.com/edit/angular-ivy-6urypw?file=src%2Fapp%2Ftest-table.component.ts

### Expected Behavior

I expect to see an updated table based on the data I pass to it, and not only stuff inside matCellDef, but also inside matFooterCellDef and matHeaderCellDef.

### Actual Behavior

Updating data for matCellDef works, but it doesn't re-render and update data inside matFooterCellDef and matHeaderCellDef.

### Environment

Angular v14 and v15

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction in src/app/test-table.component.ts and verify how dynamic mat-table data updates are rendered. Trace the matHeaderCellDef and matFooterCellDef paths, then confirm the fix by checking that changed header and footer values rerender along with matCellDef content.

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
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.