opt-cc/static/src/app/statistic/highscore/highscore.component.html

<div class="highscore-container fade-in">
  <h2>{{title}} ⟶ Highscore</h2>

  <div class="input-group search-field">
    <input id="search-tasks"
           placeholder="Spielername (mehrere mit '&' trennen)"
           type="text" #query class="form-control"
           (keyup.enter)="filterPlayers()"
           [formControl]="searchTerm">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button"
              (click)="filterPlayers()">
        Filter
      </button>
    </span>
  </div>

  <ngx-datatable
    [rows]="players.kill"
    [messages]="emptyMessage"
    [headerHeight]="cellHeight"
    [rowHeight]="cellHeight"
    [cssClasses]='customClasses'
    [columnMode]="'force'"
    [scrollbarV]="true"
    [selectionType]="'single'">
    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="Kills" prop="kill"></ngx-datatable-column>
  </ngx-datatable>

  <ngx-datatable
    [rows]="players.death"
    [messages]="emptyMessage"
    [headerHeight]="cellHeight"
    [rowHeight]="cellHeight"
    [cssClasses]='customClasses'
    [columnMode]="'force'"
    [scrollbarV]="true"
    [selectionType]="'single'">
    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="Tode" prop="death"></ngx-datatable-column>
  </ngx-datatable>

  <ngx-datatable
    [rows]="players.respawn"
    [messages]="emptyMessage"
    [headerHeight]="cellHeight"
    [rowHeight]="cellHeight"
    [cssClasses]='customClasses'
    [columnMode]="'force'"
    [scrollbarV]="true"
    [selectionType]="'single'">
    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="Respawn" prop="respawn"></ngx-datatable-column>
  </ngx-datatable>

  <ngx-datatable
    [rows]="players.friendlyFire"
    [messages]="emptyMessage"
    [headerHeight]="cellHeight"
    [rowHeight]="cellHeight"
    [cssClasses]='customClasses'
    [columnMode]="'force'"
    [scrollbarV]="true"
    [selectionType]="'single'">
    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
  </ngx-datatable>

  <ngx-datatable
    [rows]="players.revive"
    [messages]="emptyMessage"
    [headerHeight]="cellHeight"
    [rowHeight]="cellHeight"
    [cssClasses]='customClasses'
    [columnMode]="'force'"
    [scrollbarV]="true"
    [selectionType]="'single'">
    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="Revive" prop="revive"></ngx-datatable-column>
  </ngx-datatable>

  <ngx-datatable
    [rows]="players.flagTouch"
    [messages]="emptyMessage"
    [headerHeight]="cellHeight"
    [rowHeight]="cellHeight"
    [cssClasses]='customClasses'
    [columnMode]="'force'"
    [scrollbarV]="true"
    [selectionType]="'single'">
    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" 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 [width]="valueColWidth" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
  </ngx-datatable>

</div>