Paginator works but no table, TypeError: Cannot read properties of undefined (reading 'headerCell')

Question

I've been fighting with this error preventing my mat-table from loading for a week and I'm at the end of my rope...

So this is the error that I'm seeing in console:

ERROR TypeError: Cannot read properties of undefined (reading >'headerCell') at t.extractCellTemplate (main.6123955066cd9f88.js:1:877806) at main.6123955066cd9f88.js:1:894796 at Function.from () at t._getCellTemplates (main.6123955066cd9f88.js:1:894730) at t._renderCellTemplateForItem (main.6123955066cd9f88.js:1:894222) at t._renderRow (main.6123955066cd9f88.js:1:894138) at main.6123955066cd9f88.js:1:893009 at Array.forEach () at t._forceRenderHeaderRows (main.6123955066cd9f88.js:1:892989) at t.ngAfterContentChecked (main.6123955066cd9f88.js:1:887020)

It's complaining about headerCell not being defined, but this isn't set for any of my other table so lets look my code!

Method where dataSource is set in .ts

getEvents() {
    const params = new HttpParams()
      .set('value', encodeURIComponent(this.searchTerm))
      .set('value2', encodeURIComponent(this.selectedTimeframe));

    this.subs.sink = this.http
      .get(
        this.initService.backEnd +
          '?method=' +
          'analytics_get_events&' +
          params
      )
      .subscribe((data) => {
        if (data) {
          this.events = data;

          this.dataSource = new MatTableDataSource(this.events);
          this.dataSource.paginator = this.paginator;
        } else {
          this.actionService.alert('Error! Cannot load events');
        }
      }); 
  }

My returned data looks like this:

[{"customer_id": 21, "utility_instance": "XYZ", "environment": "UAT", "event_id": 862, "ux_status": "UP", "wls_status": "UP", "event_score": 0.773, "events": "{1: 73, 2: 4, 37: 39}", "timestamp": "2022-03-22 12:33:38"}, {"customer_id": 78, "utility_instance": "AAB", "environment": "UAT", "event_id": 1176, "ux_status": "UP", "wls_status": "UP", "event_score": 0.003, "events": "{2: 3}", "timestamp": "2022-03-22 12:32:43"}]

  displayedColumns = [
    'time',
    'environment',
    'ux_status',
    'wls_status',
    'score',
    'event'
  ];

and I've tried both <mat-table> and <table mat-table> but both behave the same way, anyways here's my HTML. I'm just using element (as defined here *matCellDef="let element")

<div id="events_table" class="table-container-mat-elevation-z8">
      <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <!-- Time Column -->
        <ng-container matColumnDef="time">
          <mat-header-cell *matHeaderCellDef> Event <br> Time </mat-header-cell>
          <mat-cell *matCellDef="let element"> 
            {{ element.timestamp | date: 'EEEE' }} <br />
            {{ element.timestamp | date: 'MMM d, yy' }}<br />
            {{ element.timestamp | date: 'h:mm a' }} 
          </mat-cell>
        </ng-container>
      
        <!-- Env Column -->
        <ng-container matColumnDef="environment">
          <mat-header-cell *matHeaderCellDef> Environment </mat-header-cell>
          <mat-cell *matCellDef="let element"> 
            {{ element.utility_instance | upper }}
            <br>
            {{ element.environment }}
          </mat-cell>
        </ng-container>
      
        <!-- UX Column -->
        <ng-container matColumnDef="ux_status">
          <mat-header-cell *matHeaderCellDef> UX </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.ux_status}} </mat-cell>
        </ng-container>
      
        <!-- WLS Column -->
        <ng-container matColumnDef="wsl_status">
          <mat-header-cell *matHeaderCellDef> WLS </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.wls_status}} </mat-cell>
        </ng-container>

        <!-- Score Column -->
        <ng-container matColumnDef="score">
          <mat-header-cell *matHeaderCellDef> Score </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.event_score}} </mat-cell>
        </ng-container>

        <!-- View Column -->
        <ng-container matColumnDef="event">
          <mat-header-cell *matHeaderCellDef> View <br> Event </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.event_id}} </mat-cell>
        </ng-container>
      
        <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
</div>

The page loads but not the header, table, or paginator are populated.

However if I remove

<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

then Paginator displays the row count, but still no table or header...

Here are my Node JS versions

Angular CLI: 13.2.5
Node: 14.17.0
Package Manager: npm 6.14.13
OS: linux x64

Angular: 13.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1302.5
@angular-devkit/build-angular      13.2.5
@angular-devkit/core               13.2.5
@angular-devkit/schematics         13.2.5
@angular/cdk                       13.2.5
@angular/cli                       13.2.5
@angular/flex-layout               13.0.0-beta.38
@angular/material                  13.2.5
@angular/material-moment-adapter   13.2.5
@ngtools/webpack                   13.2.5
@schematics/angular                13.2.5
rxjs                               7.5.5
typescript                         4.5.5

I'll provide an update if I figure it out but until then any help would be greatly appreciated on this!