soma-frontend/src/app/components/users/users.component.html

<h2 class="floating-title">{{title}}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      
      <div class="col-12 align-right">
        <div class="align-container">
          
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a [routerLink]="['/']">Dashboard</a></li>
              <li class="breadcrumb-item">Usuarios</li>
            </ol>
          </nav>

          <a class="btn btn-primary" [routerLink]="['/users/new']">
            Nuevo registro
          </a>
        </div>
      </div>

      <div class="col-12">
          <div class="align-container">

            <h4><b>Listado de usuarios</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="email">
                    <th mat-header-cell *matHeaderCellDef>Correo</th>
                    <td mat-cell *matCellDef="let row">{{row.email}}</td>
                  </ng-container>

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

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

                  <!--  Column 
                  <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
                    <td mat-cell *matCellDef="let row">
                      <a class="btn btn-primary btn-sm" [routerLink]="['/plant', row.id, 'edit']"  >
                        Editar
                      </a>
                    </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>
      
      </div>
      <br>
      
    </div>          
  </div>
</div>