dnet-applications/frontends/dnet-is-application/src/app/contexts/contexts.component.html

<h2>Contexts</h2>

<mat-form-field appearance="fill" floatLabel="always" style="width: 100%; margin-top: 10px;">
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
</mat-form-field>

<table mat-table [dataSource]="contextsDatasource" matSort class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef style="width: 20%;" mat-sort-header sortActionDescription="Sort by Context ID"> Id </th>
    <td mat-cell *matCellDef="let element">
      <a [routerLink]="['/ctx_viewer']" [queryParams]="{id: element.id}">{{element.id}}</a>
    </td>
  </ng-container>

  <ng-container matColumnDef="label">
    <th mat-header-cell *matHeaderCellDef style="width: 40%;" mat-sort-header sortActionDescription="Sort by Context Label"> Label </th>
    <td mat-cell *matCellDef="let element"> {{element.label}} </td>
  </ng-container>

  <ng-container matColumnDef="type">
    <th mat-header-cell *matHeaderCellDef style="width: 10%;" mat-sort-header sortActionDescription="Sort by Context Type"> Type </th>
    <td mat-cell *matCellDef="let element"> {{element.type}} </td>
  </ng-container>

  <ng-container matColumnDef="buttons">
    <th mat-header-cell *matHeaderCellDef style="text-align: right;">Parameters</th>
    <td mat-cell *matCellDef="let element" class="table-buttons">
        <button mat-stroked-button color="primary" (click)="showParamsDialog(element)">show</button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="colums"></tr>
  <tr mat-row *matRowDef="let row; columns: colums;"></tr>

  <!-- Row shown when there is no matching data. -->
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4" style="padding: 0 16px;">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>