<div class="align-container">
  <h4><b>Status de las plantas</b></h4>
  <div class="example-container mat-elevation-z8">
    <div class="example-table-container">

      <table mat-table [dataSource]="dataSource" class="example-table">

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>Name</th>
          <td mat-cell *matCellDef="let row">{{row.name}}</td>
        </ng-container>

        <!-- State Column -->
        <ng-container matColumnDef="state">
          <th mat-header-cell *matHeaderCellDef>State</th>
          <td mat-cell *matCellDef="let row">{{row.state}}</td>
        </ng-container>

        <!--  Column -->
        <ng-container matColumnDef="installDate">
          <th mat-header-cell *matHeaderCellDef>Date</th>
          <td mat-cell *matCellDef="let row">{{row.installDate}}</td>
        </ng-container>

        <!-- Country Column -->
        <ng-container matColumnDef="country">
          <th mat-header-cell *matHeaderCellDef>Country</th>
          <td mat-cell *matCellDef="let row">{{row.country}}</td>
        </ng-container>

        <!-- City Column -->
        <ng-container matColumnDef="city">
          <th mat-header-cell *matHeaderCellDef>City</th>
          <td mat-cell *matCellDef="let row">{{row.city}}</td>
        </ng-container>

        <!--  Column -->
        <ng-container matColumnDef="installedCapacity">
          <th mat-header-cell *matHeaderCellDef>Capacity</th>
          <td mat-cell *matCellDef="let row">{{row.installedCapacity}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[5, 10, 25]"></mat-paginator>
    </div>
  </div>
</div>
<br>
