Datatable Angular

datatable.html

<ngx-datatable #table class="material ml-0 mr-0 mb-5" [rows]="rows" [columnMode]="'flex'" [headerHeight]="50" [footerHeight]="50"
        [limit]="10" [rowHeight]="'auto'" [sorts]="[{prop: 'name', dir: 'desc'}]" [loadingIndicator]="loadingIndicator">
        <ngx-datatable-column name="Avatar" prop="avatar" [flexGrow]="0.5">
                <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">
                    <img src="{{row?.avatar}}" alt="" class="avatar-img">
                </ng-template>
            </ngx-datatable-column>
        <ngx-datatable-column name="Nome" prop="name" [flexGrow]="2">
            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">
                {{ row?.name }}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Papel" prop="role" [flexGrow]="1">
            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">
                {{ row?.role }}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Ações" [flexGrow]="0.5" *ngxPermissionsOnly="'canUpdateUser','canDeleteUser'">
            <ng-template let-row="row" ngx-datatable-cell-template>
                <span *ngIf="!row?.currentUser">
                    <button mat-icon-button mat-sm-button color="primary" class="mr-1" (click)="openPopUp(row, false)">
                        <mat-icon>edit</mat-icon>
                    </button>
                    <button mat-icon-button mat-sm-button color="warn" (click)="deleteItem(row)">
                        <mat-icon>delete</mat-icon>
                    </button>
                </span>
                <span *ngIf="row?.currentUser">--</span>
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>

datatable.ts

import { Component, OnInit, ViewChild, Input, ElementRef } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.scss']
})
export class DatatableComponent implements OnInit {

  loadingIndicator: boolean = true;

  rows = [];

  @ViewChild(DatatableComponent) table: DatatableComponent;

  constructor(
    private loader: AppLoaderService,
  ) { }

  ngOnInit() {
    this.getUsers();
  }

  /**
   * Retorna uma Lista de Usuários
   */
  getUsers() {
    this.userService.getUsers()
      .then((res: any) => {
        this.clearTable();
        res.map(elem => {
          let user = elem.attributes;
          let avatarImg = user.profile_picture_url == undefined || user.profile_picture_url == "" ? "assets/images/icons/ic_user_placeholder.png" : user.profile_picture_url;

          let userData = {
            id: elem.id,
            name: user.display_name,
            role: user.role,
            avatar: avatarImg
          }

          this.rows = [...this.temp, userData];
        });
      }).then(() => {
        this.loadingIndicator = false;
      });
  }

  /**
  * Limpa os dados da Tabela
  */
  clearTable() {
    this.rows.splice(0, this.rows.length);
  }

}