How do I add additional rows in mat-table without breaking the pattern?

I am trying to add 2 more cols (status and buttons) after ngfor . However, it seems it will break the entire structure (shows in the picture)

The Broken Table Screen Shoot

I am modifying code from material.angular.io

Also I added contains 2 more rows in columnsToDisplays so it will display the addtional cols.

Any suggestions on making to fix it would be appreciated!

<table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8">
  <ng-container matColumnDef="" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef>  </th>
    <td mat-cell *matCellDef="let element">  </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <div class="example-element-diagram">
          <div class="example-element-position">  </div>
          <div class="example-element-symbol">  </div>
          <div class="example-element-name">  </div>
          <div class="example-element-weight">  </div>
        </div>
        
        <ng-container matColumnDef="expandedDetail">
          <mat-header-cell *matHeaderCellDef> Action</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <button mat-raised-button > Accept</button>
            <button mat-raised-button > Reject</button>
          </mat-cell>
        </ngcontainer>
        
        
        <div class="example-element-description">
          
          <span class="example-element-description-attribution"> -- Wikipedia </span>
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplays"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplays;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>