<div>
  <ngx-datatable class="material" 
    [rows]="rows" 
    [columnMode]="'force'" 
    [headerHeight]="50" 
    [footerHeight]="50"
    [rowHeight]="65"
    [limit]="10">
    <ngx-datatable-column [width]="100" [sortable]="true" prop='name'  name='Name'>
      <ng-template class="custHeader" let-column="column" ngx-datatable-header-template>
        Name 
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
          <div class="row header">
            <div class="oval">
                <app-avatar-pic [pic]=""  [initials]="getInitials(row.name)" [style.backgroundColor]="randomColor()"></app-avatar-pic>
            </div>
            <div class="title">
                <a role="button" (click)="navigate(row.id)">{{row.name}}</a>
            </div>
          </div>
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="30" [sortable]="true" prop='id' name='Id'>
      <ng-template let-column="column" ngx-datatable-header-template>
        Id
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        <span class="row">{{row.id}}</span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="100" [sortable]="true" prop='assessmentType' name='Assessment Type'> 
      <ng-template let-column="column" ngx-datatable-header-template>
        Assessment Type
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        <span class="row">{{row.assessmentType}}</span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="30" [sortable]="true" prop='experienceLevel' name='Experience Level'>
      <ng-template let-column="column" ngx-datatable-header-template>
        Experience Level
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        <span class="row">{{row.experienceLevel | titlecase}}</span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="150" [sortable]="true" prop='assessmentName' name='Assessment Name'> 
      <ng-template let-column="column" ngx-datatable-header-template>
        Assessment Name
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        <span class="row">{{row.assessmentName | titlecase}}</span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="30" [sortable]="true" prop='status' name='Status'>
      <ng-template let-column="column" ngx-datatable-header-template>
        Status
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        <span class="row">
          <span [ngClass]="getClassByValue(getStatus(row.status))">
          </span>&nbsp;&nbsp;&nbsp;{{getStatus(row.status)}}
        </span>
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>

  <br/>
  <br/>
</div>
