mat-table header content not updating even when underlying data is changed

I am using angular material(ver 16) to render a table, but I am unable to update the table header even though the data that has been bound has been updated.

Here is what my component looks like:

import { CommonModule } from '@angular/common';
import {Component} from '@angular/core';
import {MatTableModule} from '@angular/material/table';

/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
standalone: true,
imports: [MatTableModule, CommonModule],
})
export class TableBasicExample {

columns = [
{field: 'position', header: 'No'},
{field: 'name', header: 'Name'},
{field: 'weight', header: 'Weight'},
{field: 'symbol', header: 'Symbol'},
];
displayedColumns: string[] = this.columns.map(col => col.field);
dataSource = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

test() {
this.columns = [
{field: 'position', header: 'Position'},
{field: 'name', header: 'Element Name'},
{field: 'weight', header: 'Mass'},
{field: 'symbol', header: 'Symbol'},
];
this.displayedColumns = [...this.columns.map(col => col.field)];
this.dataSource = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
];
}


}



and the template:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<ng-container *ngFor="let column of columns" [matColumnDef]="column.field">
<th mat-header-cell *matHeaderCellDef> {{column.header}} </th>
<td mat-cell *matCellDef="let element"> {{element[column.field]}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<button (click)="test()">Button to update data and header</button>


stackblitz link here to demo same issue : https://stackblitz.com/edit/vnd2caeh?file=src/example/table-basic-example.ts

As you can see when I click the button "Button to update data and header", I change the underlying data for both header and content. It has no issue updating the data but for some reason the table header is not updating.

I have tried manually triggering the change detection and also re-render the table but nothing worked.

Not sure what I am missing, but your help will be much appreciated.

Continue reading...