I'm attempting to utilize an Angular Material table in the following way:
<div class="flex flex-col pb-4 bg-card rounded-2xl shadow overflow-hidden">
<table mat-table class="" [dataSource]="$candidates">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name</th>
<td mat-cell *matCellDef="let candidate"> {{candidate.name}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> Email</th>
<td mat-cell *matCellDef="let candidate"> {{candidate.email}} </td>
</ng-container>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>Position</th>
<td mat-cell *matCellDef="let candidate"> {{candidate.position_id.name}} </td>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
</table>
</div>
This setup is intended to show something similar to what's seen on this page.
However, instead of the expected output, I encounter a display issue as shown here.