src/app/shared/layout/contact-table/contact-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
 -------------------------------------------------------------------------------->

<div #table class="contact-list">

  <table [dataSource]="appEntries" class="contact-list--table" mat-table>

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

    <ng-container matColumnDef="lastName">
      <th *matHeaderCellDef
          class="contact-list--table--cell contact-list--table--cell---border contact-list--table--cell---bold "
          mat-header-cell
          scope="col">{{"contacts.name" | translate}}
      </th>
      <td (click)="onSelect(contact?.id)" *matCellDef="let contact"
          [class.contact-list--table--cell---highlight]="contact?.id === appSelectedId"
          class="contact-list--table--cell contact-list--table--cell---border"
          mat-cell>
        {{contact.lastName}}
      </td>
    </ng-container>

    <ng-container matColumnDef="firstName">
      <th *matHeaderCellDef
          class="contact-list--table--cell contact-list--table--cell---border contact-list--table--cell---bold "
          mat-header-cell
          scope="col">{{"contacts.firstName" | translate}}
      </th>
      <td (click)="onSelect(contact?.id)" *matCellDef="let contact"
          [class.contact-list--table--cell---highlight]="contact?.id === appSelectedId"
          class="contact-list--table--cell contact-list--table--cell---border"
          mat-cell>
        {{contact.firstName}}
      </td>
    </ng-container>

    <ng-container matColumnDef="email">
      <th *matHeaderCellDef
          class="contact-list--table--cell contact-list--table--cell---border contact-list--table--cell---bold "
          mat-header-cell
          scope="col">{{"contacts.email" | translate}}
      </th>
      <td (click)="onSelect(contact?.id)" *matCellDef="let contact"
          [class.contact-list--table--cell---highlight]="contact?.id === appSelectedId"
          class="contact-list--table--cell contact-list--table--cell---border"
          mat-cell>
        {{contact.email}}
      </td>
    </ng-container>

    <ng-container matColumnDef="company">
      <th *matHeaderCellDef
          class="contact-list--table--cell contact-list--table--cell---border contact-list--table--cell---bold "
          mat-header-cell
          scope="col">{{"contacts.company" | translate}}
      </th>
      <td (click)="onSelect(contact?.id)" *matCellDef="let contact"
          [class.contact-list--table--cell---highlight]="contact?.id === appSelectedId"
          class="contact-list--table--cell contact-list--table--cell---border"
          mat-cell>
        {{contact.companyName}}
      </td>
    </ng-container>

    <tr *matHeaderRowDef="columnsToDisplay; sticky: true"
        class="contact-list--table--row" mat-header-row></tr>
    <tr *matRowDef="let contact; columns: columnsToDisplay"
        [class.disabled]="appDisabled"
        class="contact-list--table--row contact-list--table--row---color contact-list--table--row---pointer"
        mat-row></tr>

  </table>

</div>