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%2Fexample%2Ftable-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.

UPDATE: my co-worker also found an alternative solution which works as well. So in his solution, he is leveraging index position and we needed to update the template like this:

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

  <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="columns[i].field">
      <th mat-header-cell *matHeaderCellDef> {{columns[i].header}} </th>
      <td mat-cell *matCellDef="let element"> {{element[columns[i].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>

So instead of using "column", we are using columns[index] instead.

Your scenario is mentioned in this GitHub issue: Table with dynamic columns - footer / header does not update after context change #13030.

You need to trigger the removeHeaderRowDef to update the table header.

import { Component, ViewChild } from '@angular/core';
import { MatHeaderRowDef, MatTable, MatTableDataSource, MatTableModule, } from '@angular/material/table';

@ViewChild(MatTable) table: MatTable<any>;
@ViewChild(MatHeaderRowDef, {static: true}) headerDef: MatHeaderRowDef;

test() {
  ...

  this.table.removeHeaderRowDef(this.headerDef);
}

Demo @ StackBlitz