tabla.component.html

<div class="container">
  <mat-card class="mat-elevation-z4">
    <mat-card-title> <span>Rick&MortyAPP</span></mat-card-title>
  </mat-card>
</div>

<div class="container" style="width:70%; margin: 40px auto ">
  <div class="mat-elevation-z4" >
    <table mat-table [dataSource]="dataSource">
  
      <!-- Id Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
      </ng-container>
  
      <!-- Nombre Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Nombre </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
  
      <!-- Genero Column -->
      <ng-container matColumnDef="gender">
        <th mat-header-cell *matHeaderCellDef> Genero </th>
        <td mat-cell *matCellDef="let element"> {{element.gender}} </td>
      </ng-container>
  
      <!-- Tipo Column -->
      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef> Tipo </th>
        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
      </ng-container>
      <!-- Estatus Column -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> Estatus </th>
        <td mat-cell *matCellDef="let element"> {{element.status}} </td>
      </ng-container>
      <!-- Ver (ficha de personaje) Column -->
      <ng-container matColumnDef="ver">
        <th mat-header-cell *matHeaderCellDef> Ver más </th>
        <td mat-cell *matCellDef="let element" style="text-align: center;">
          <a href="" style="color: white;" matTooltip = "Ver mas información">
            <mat-icon>search</mat-icon>
          </a>
         </td>
      </ng-container>
  
      <tr mat-header-row *matHeaderRowDef="Columns"></tr>
      <tr mat-row *matRowDef="let row; columns: Columns;"></tr>
    </table>
    <!-- Paginacion -->
    <mat-paginator [pageSizeOptions]="[10]"></mat-paginator>
    
  </div>
</div>