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

<div class="fade-in" style="overflow-x: auto" xmlns="http://www.w3.org/1999/html">
  <ngx-datatable
    [rows]="rows"
    [sorts]="[{prop: 'kill', dir: 'desc'}]"
    [reorderable]="reorderable"
    [messages]="{emptyMessage: 'Loading...'}"
    [headerHeight]="cellHeight"
    [rowHeight]="cellHeight"
    [cssClasses]='customClasses'
    [columnMode]="'force'"
    [scrollbarV]="true"
    [selectionType]="'single'">
    <ngx-datatable-column name="{{tableHead[0]}}" 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="{{tableHead[1]}}" prop="fraction" [width]="90">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="columnWidth" prop="kill">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[2]}}" (click)="sort()">
            <img src="../../../../assets/tank.png">
          </span>
        </span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="columnWidth" prop="friendlyFire">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[3]}}" (click)="sort()">
            <img src="../../../../assets/tank.png">
          </span>
        </span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="columnWidth" prop="vehicleLight">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[4]}}" (click)="sort()">
            <img src="../../../../assets/tank.png">
          </span>
        </span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="columnWidth" prop="vehicleHeavy">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[5]}}" (click)="sort()">
            <img src="../../../../assets/tank.png">
          </span>
        </span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="columnWidth" prop="vehicleAir">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[6]}}" (click)="sort()">
            <img src="../../../../assets/tank.png">
          </span>
        </span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="columnWidth" prop="revive">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[7]}}" (click)="sort()">
            <img src="../../../../assets/tank.png">
          </span>
        </span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="columnWidth" prop="flagTouch">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[8]}}" (click)="sort()">
            <img src="../../../../assets/tank.png">
          </span>
        </span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="columnWidth" prop="death">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[9]}}" (click)="sort()">
            <img src="../../../../assets/tank.png">
          </span>
        </span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [width]="columnWidth" prop="respawn">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[10]}}" (click)="sort()">
            <img src="../../../../assets/tank.png">
          </span>
        </span>
      </ng-template>
    </ngx-datatable-column>
    <!--<ngx-datatable-column [width]="80" name="" prop="name">-->
    <!--<ng-template ngx-datatable-cell-template let-value="value">-->
    <!--<span class="btn btn-sm btn-default in-table-btn disabled">Detail</span>-->
    <!--</ng-template>-->
    <!--</ngx-datatable-column>-->
    <ngx-datatable-column [width]="80">
      <ng-template ngx-datatable-cell-template let-row="row">
        <span class="btn btn-sm btn-default in-table-btn"
              (click)="selectPlayerDetail(1, isSteamUUID(row['steamUUID']) ? row['steamUUID'] : row['name'])">
          Gesamt
        </span>
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>