<table mat-table matSort [dataSource]="quotas" (matSortChange)="sortData($event)">

    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'quotas.name' | i18n}} </th>
        <td mat-cell *matCellDef="let quota">
            <mat-icon inline=true>{{'services.' + quota.name + '.icon' | i18n}}</mat-icon>
            {{'services.' + quota.name + '.title' | i18n}}
        </td>
    </ng-container>

    <ng-container matColumnDef="quota">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="value"> {{'quotas.value' | i18n}} </th>
        <td mat-cell *matCellDef="let quota"> {{quota.value}} </td>
    </ng-container>

    <ng-container matColumnDef="quotaUnit">
        <th mat-header-cell *matHeaderCellDef> {{'quotas.unit' | i18n}} </th>
        <td mat-cell *matCellDef="let quota">
            <span *ngIf="quota.unit">{{'quotas.unit.' + quota.unit | i18n}}</span>
            <span *ngIf="!quota.unit">#</span>
        </td>
    </ng-container>

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