<table class="table table-striped table-hover table-responsive table-condensed">
        <thead>
            <tr>
                <th (click)="setOrder('title', $event)">
                    <a [translate]="'Issues.ColumnTitle'"></a>
                    <span *ngIf="order === 'title'">
                        <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                    </span>
                </th>
                <th (click)="setOrder('issueCategory.value', $event)">
                    <a [translate]="'Issues.Category'"></a>
                    <span *ngIf="order === 'issueCategory.value'">
                            <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                    </span>
                </th>
                <th (click)="setOrder('status', $event)">
                    <a [translate]="'Issues.Status'"></a>
                    <span *ngIf="order === 'status'">
                            <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                    </span>
                </th>
                <th (click)="setOrder('reportedUser', $event)">
                    <a [translate]="'Issues.ReportedBy'"></a>
                    <span *ngIf="order === 'reportedUser'">
                            <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                    </span>
                </th>
                <th>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let issue of issues | orderBy: order : reverse : 'case-insensitive'">
                <td>
                    {{issue.title}}
                </td>
                <td>
                    {{issue.issueCategory.value}}
                </td>
                <td>
                    {{IssueStatus[issue.status] | humanize}}
                </td>
                <td *ngIf="issue.userReported?.alias">
                    {{issue.userReported.alias}}
                </td>
                <td *ngIf="!issue.userReported?.alias">
                    {{issue.userReported.userName}}
                </td>
                <td>
                        <a [routerLink]="['/issues/' + issue.id]" class="btn btn-sm btn-info-outline" [translate]="'Issues.Details'"></a>
                </td>
            </tr>
        </tbody>
    </table>
    <p-paginator [rows]="rowCount" [totalRecords]="totalRecords" (onPageChange)="paginate($event)"></p-paginator>