0

I am trying to use this angular material table, like this:

<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>

Which should display something like this:

https://material.angular.io/components/table/overview#table-basic

But instead I get this:

The spacing is all f-d up

granitba
  • 74
  • 1
  • 9
  • 1
    To add a border radius to a mat-table check this [SO](https://stackoverflow.com/questions/60525683/how-to-add-border-radius-to-angular-mat-table/60528220#60528220). It's looks like yo have a confict with the .css of material-angular and the .css you use :( – Eliseo Feb 16 '23 at 17:30
  • Make a stackblitz code and post it – Stefani Toto Feb 16 '23 at 18:37

1 Answers1

1

Update mat-header-row and mat-row in the template to:

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
robbieAreBest
  • 1,601
  • 14
  • 16