zitadel/console/src/app/pages/users/user-list/user-list.component.html

<div class="max-width-container">
    <h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
    <p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>

    <app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.data.length">
        <ng-template appHasRole [appHasRole]="['user.write']" actions>
            <button (click)="deactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.DEACTIVATE' | translate}}"
                class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
                <mat-icon svgIcon="mdi_account_cancel"></mat-icon>
            </button>
            <button (click)="reactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.ACTIVATE' | translate}}"
                class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
                <mat-icon svgIcon="mdi_account_check_outline"></mat-icon>
            </button>
            <a class="add-button" [routerLink]="[ '/users', 'create']" color="primary" mat-raised-button>
                <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
            </a>
        </ng-template>

        <div class="table-wrapper">
            <div class="spinner-container" *ngIf="loading$ | async">
                <mat-spinner diameter="50"></mat-spinner>
            </div>
            <table class="background-style" mat-table [dataSource]="dataSource">
                <ng-container matColumnDef="select">
                    <th mat-header-cell *matHeaderCellDef>
                        <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                            [checked]="selection.hasValue() && isAllSelected()"
                            [indeterminate]="selection.hasValue() && !isAllSelected()">
                        </mat-checkbox>
                    </th>
                    <td mat-cell *matCellDef="let user">
                        <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
                            <app-avatar *ngIf="user && user.displayName" class="avatar" [name]="user.displayName"
                                [size]="32">
                            </app-avatar>
                        </mat-checkbox>
                    </td>
                </ng-container>

                <ng-container matColumnDef="firstname">
                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.FIRSTNAME' | translate }} </th>
                    <td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
                </ng-container>

                <ng-container matColumnDef="lastname">
                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.LASTNAME' | translate }} </th>
                    <td mat-cell *matCellDef="let user"> {{user.lastName}} </td>
                </ng-container>

                <ng-container matColumnDef="username">
                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.USERNAME' | translate }} </th>
                    <td mat-cell *matCellDef="let user"> {{user.userName}} </td>
                </ng-container>

                <ng-container matColumnDef="email">
                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.EMAIL' | translate }} </th>
                    <td mat-cell *matCellDef="let user"> {{user.email}} </td>
                </ng-container>
                <ng-container matColumnDef="state">
                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.DATA.STATE' | translate }} </th>
                    <td mat-cell *matCellDef="let user"> {{ 'USER.DATA.STATE'+user.state | translate }} </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
                    [routerLink]="['/users', row.id]">
                </tr>

            </table>
            <mat-paginator #paginator class="background-style" [length]="userResult?.totalResult || 0" [pageSize]="10"
                [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
        </div>
    </app-refresh-table>
</div>