{
      field: "Actions",
      width: 110,
      title: "Acciones",
      sortable: false,
      overflow: "visible",
      template: function(row, index, datatable) {
        // console.log(row.activo);
        var dropup = datatable.getPageSize() - index <= 4 ? "dropup" : "";
        return (
          '
                    <a href="#/categorias/usuarios/detalle/' +
          row.id +
          '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill">
                        <i class="fa fa-edit"></i>
                    </a>
                    <a  href="#/categorias/usuarios/eliminar/' +
          row.id +
          '" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Edit settings">
                        <i class="fa fa-trash"></i>
                    </a>
                '
        );
      }
    }

<div>
        <mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.id}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="nombre">
            <mat-header-cell *matHeaderCellDef> Nombre </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.nombre}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="apellido">
            <mat-header-cell *matHeaderCellDef> Apellido </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.apellido}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="perfil">
            <mat-header-cell *matHeaderCellDef> Perfil </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.perfil}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="ultimoLogin">
            <mat-header-cell *matHeaderCellDef> Último Login </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.ultimoLogin}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="activo">
            <mat-header-cell *matHeaderCellDef> Activo </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.activo}} </mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
        </mat-table>
      </div>

export class UsuariosService {

  private serviceUrl = "MyUrl";
  headers = new Headers({
    Authorization:
      "Bearer " + JSON.parse(localStorage.getItem("currentUser")).token,
    "Content-Type": "application/json"
  });
  options = new RequestOptions({ headers: this.headers });

  constructor(private http: Http, private httpClient: HttpClient) {}

  getUser(): Observable<User[]> {
    return this.httpClient.get<User[]>(this.serviceUrl);
  }

export class UsuariosComponent {
      dataSource = new UserDataSource(this.UsuariosService);
      displayedColumns = [
        "id",
        "nombre",
        "apellido",
        "email",
        "perfil",
        "ultimoLogin",
        "activo"
      ];

export class UserDataSource extends DataSource<any> {
  constructor(private userService: UsuariosService) {
    super();
  }
  connect(): Observable<User[]> {
    return this.userService.getUser();
  }
  disconnect() {}
}