zitadel/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html

<cnsl-refresh-table
  [loading]="dataSource.loading$ | async"
  [selection]="selection"
  (refreshed)="refreshPage()"
  [dataSize]="dataSource.totalResult"
  [timestamp]="dataSource.viewTimestamp"
>
  <ng-template cnslHasRole [hasRole]="['project.app.write']" actions>
    <a [disabled]="disabled" [routerLink]="['/projects', projectId, 'apps', 'create']" color="primary" mat-raised-button>
      <div class="cnsl-action-button">
        <mat-icon class="icon">add</mat-icon>
        <span>{{ 'ACTIONS.NEW' | translate }}</span>
      </div>
    </a>
  </ng-template>

  <div class="table-wrapper">
    <table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <div class="selection">
            <mat-checkbox
              color="primary"
              (change)="$event ? masterToggle() : null"
              [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()"
            >
            </mat-checkbox>
          </div>
        </th>
        <td mat-cell *matCellDef="let row">
          <div class="selection">
            <mat-checkbox
              color="primary"
              (click)="$event.stopPropagation()"
              (change)="$event ? selection.toggle(row) : null"
              [checked]="selection.isSelected(row)"
            >
            </mat-checkbox>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>{{ 'APP.NAME' | translate }}</th>
        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
          {{ app.name }}
        </td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>{{ 'APP.TYPE' | translate }}</th>
        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
          <span *ngIf="app?.oidcConfig?.appType !== undefined && app?.oidcConfig?.appType !== null">
            {{ 'APP.OIDC.APPTYPE.' + app?.oidcConfig?.appType | translate }}
          </span>
          <span *ngIf="app.apiConfig">API</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef>{{ 'USER.DATA.STATE' | translate }}</th>
        <td class="pointer" mat-cell *matCellDef="let app" [routerLink]="['/projects', projectId, 'apps', app.id]">
          <span
            class="state"
            [ngClass]="{
              active: app.state === AppState.APP_STATE_ACTIVE,
              inactive: app.state === AppState.APP_STATE_INACTIVE,
            }"
          >
            {{ 'APP.PAGES.DETAIL.STATE.' + app?.state | translate }}
          </span>
        </td>
      </ng-container>

      <ng-container matColumnDef="creationDate">
        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CREATIONDATE' | translate }}</th>
        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
          <span *ngIf="app?.details?.creationDate">{{
            app.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
          }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="changeDate">
        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CHANGEDATE' | translate }}</th>
        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
          <span *ngIf="app?.details?.changeDate">{{
            app.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
          }}</span>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </div>

  <cnsl-paginator
    class="paginator"
    #paginator
    [timestamp]="dataSource.viewTimestamp"
    [length]="dataSource.totalResult"
    [pageSize]="25"
    [pageSizeOptions]="[25, 50, 100, 250]"
  >
  </cnsl-paginator>
</cnsl-refresh-table>