Getting the error: Could not find column with id “id”

Your definition is wrong for matColumnDef="" property. See the example below,

    <!-- Position Column -->
    <ng-container matColumnDef="position"> <!--matColumnDef PROPERTY IS "position" HERE. -->
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td> <!--AND "position" IS ALSO USED HERE.-->
    </ng-container>

So your code needs to be like this:

    <main>
      <div id="content">
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
    
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

          <!-- Position Column -->
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
          </ng-container>
    
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>
    </main>