src/app/features/settings/users/components/users-table/users-settings-table.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<table [dataSource]="appUsers" cdk-table
       class="openk-table openk-table---without-last-border">

  <caption hidden>{{ "settings.users.title" | translate}}</caption>

  <tr *cdkHeaderRowDef="appColumns; sticky: true" cdk-header-row></tr>

  <tr *cdkRowDef="let myRowData; columns: appColumns" cdk-row class="table-row"></tr>

  <ng-container cdkColumnDef="user-name">
    <th *cdkHeaderCellDef="let header"
        cdk-header-cell
        class="table-column"
        scope="col">
      {{"settings.users.table.userName" | translate}}
    </th>
    <td (click)="onSelect(user)"
        *cdkCellDef="let user"
        [class.contact-list--table--cell---highlight]="user?.id === appSelectedUser"
        cdk-cell
        class="table-column">
      {{user?.userName}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="first-name">
    <th *cdkHeaderCellDef="let header"
        cdk-header-cell
        class="table-column"
        scope="col">
      {{"settings.users.table.firstName" | translate}}
    </th>
    <td (click)="onSelect(user)"
        *cdkCellDef="let user"
        [class.contact-list--table--cell---highlight]="user?.id === appSelectedUser"
        cdk-cell
        class="table-column">
      {{user?.firstName}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="last-name">
    <th *cdkHeaderCellDef="let header"
        cdk-header-cell
        class="table-column"
        scope="col">
      {{"settings.users.table.lastName" | translate}}
    </th>
    <td (click)="onSelect(user)"
        *cdkCellDef="let user"
        [class.contact-list--table--cell---highlight]="user?.id === appSelectedUser"
        cdk-cell
        class="table-column">
      {{user?.lastName}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="email">
    <th *cdkHeaderCellDef="let header"
        cdk-header-cell
        class="table-column"
        scope="col">
      {{"settings.users.table.email" | translate}}
    </th>
    <td (click)="onSelect(user)"
        *cdkCellDef="let user"
        [class.contact-list--table--cell---highlight]="user?.id === appSelectedUser"
        cdk-cell
        class="table-column">
      {{user?.settings?.email}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="roles">
    <th *cdkHeaderCellDef="let header"
        cdk-header-cell
        class="table-column"
        scope="col">
      {{"settings.users.table.role" | translate}}
    </th>
    <td (click)="onSelect(user)"
        *cdkCellDef="let user"
        [class.contact-list--table--cell---highlight]="user?.id === appSelectedUser"
        cdk-cell
        class="table-column">
      <div class="roles">
        <span *ngFor="let role of (user?.roles | appRolesToDisplayText); let last = last;" class="role">
          {{(role | translate) + (last ? '' : ', ')}}
        </span>
      </div>
    </td>
  </ng-container>

</table>