<table mat-table matSort [dataSource]="permissions" (matSortChange)="sortData($event)">
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'permissions.name' | i18n}} </th>
        <td mat-cell *matCellDef="let permission">
            <mat-icon inline=true>{{'services.' + permission.name + '.icon' | i18n}}</mat-icon>
            {{'services.' + permission.name + '.title' | i18n}}
            <mat-icon *ngIf="permission.addon">add_circle</mat-icon>
            <br>
            <small>{{'services.' + permission.name + '.subtitle' | i18n}}</small>
        </td>
    </ng-container>

    <ng-container matColumnDef="starts">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="starts"> {{'permissions.starts' | i18n}} </th>
        <td mat-cell *matCellDef="let permission">{{permission.starts | date:datetimeformat}}</td>
    </ng-container>

    <ng-container matColumnDef="expires">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="expires"> {{'permissions.expires' | i18n}} </th>
        <td mat-cell *matCellDef="let permission">{{permission.expires | date:datetimeformat}}</td>
    </ng-container>

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