<div class="container tableDiv">
  <ngx-datatable class="material striped" [rows]="list" [columnMode]="'force'" [headerHeight]="50" [rowHeight]="'auto'" 
   [messages]="{emptyMessage: 'No Records Available'}">
    <ngx-datatable-column [sortable]="true" [resizeable]="false" prop='fullName' name='Name'>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.fullName | titlecase}} <br>
        <h2 class="td-email">{{row.emailId}}</h2>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [sortable]="true" [resizeable]="false" prop='city' name='Location'>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.city | titlecase}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [sortable]="true" [resizeable]="false" prop='experienceLevel' name='Level'>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.experienceLevel | titlecase}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [sortable]="true" [resizeable]="false" prop='mettlScore' name='Score'>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.mettlScore}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [sortable]="true" [resizeable]="false" prop='feedback' name='Feedback'>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.feedback}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [sortable]="true" [resizeable]="false" prop='feedbackBy' name='FeedbackBy'>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.feedbackBy}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [sortable]="true" [resizeable]="false" prop='eventName' name='Eventname'>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.eventName}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [sortable]="true" [resizeable]="false" prop='status' name='Status'>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.status}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [sortable]="true" [resizeable]="false" prop='onboardDate' name='AddedOn'>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.onboardDate}}
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>