opt-cc/static/src/app/statistic/war-detail/war-detail.component.html

<div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
  <ngx-datatable
    style="width:980px; margin:auto"
    [rows]="rows"
    [sorts]="[{prop: 'kill', dir: 'desc'}]"
    [reorderable]="reorderable"
    [messages]="{emptyMessage: 'Loading...'}"
    [headerHeight]="cellHeight"
    [rowHeight]="cellHeight"
    [cssClasses]='customClasses'
    [selectionType]="'single'"
    (select)="selectPlayerDetail($event)">
    <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
        <span class="player-name"
              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
          {{value}}
        </span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
    <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
    <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
    <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
    <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
    <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
  </ngx-datatable>
</div>