update

src/app/ui/permissions/permissions.component.html

@@ -1,11 +1,13 @@
-<table mat-table [dataSource]="permissions">
+<table mat-table matSort [dataSource]="permissions" (matSortChange)="sortData($event)">
     <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'permissions.name' | i18n}} </th>
-        <td mat-cell *matCellDef="let permission"> {{permission.name}} <mat-icon *ngIf="permission.addon" aria-hidden="false" aria-label="Add-on">add_circle</mat-icon></td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'permissions.name' | i18n}} </th>
+        <td mat-cell *matCellDef="let permission"> {{'permissions.' + permission.name | i18n}}
+            <mat-icon *ngIf="permission.addon">add_circle</mat-icon>
+        </td>
     </ng-container>
 
     <ng-container matColumnDef="expires">
-        <th mat-header-cell *matHeaderCellDef> {{'permissions.expires' | i18n}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="expires"> {{'permissions.expires' | i18n}} </th>
         <td mat-cell *matCellDef="let permission">{{permission.expires | date}}</td>
     </ng-container>
 

src/app/ui/permissions/permissions.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { Sort } from '@angular/material/sort';
+import { I18nService } from './../../services/i18n.service';
 
 @Component({
   selector: 'app-permissions',
@@ -7,12 +9,33 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class PermissionsComponent implements OnInit {
 
+
   @Input() permissions;
   permissionColumns = ["name", "expires"];
 
-  constructor() { }
+  constructor(private i18n: I18nService) { }
 
   ngOnInit(): void {
   }
 
+  sortData(sort: Sort) {
+    const data = this.permissions.slice();
+    if (!sort.active || sort.direction === '') {
+      this.permissions = data;
+      return;
+    }
+
+    this.permissions = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
+        case 'name': return this.compare(this.i18n.get('permissions.' + a.name,[]), this.i18n.get('permissions.' + b.name,[]), isAsc);
+        case 'expires': return this.compare(a.expires, b.expires, isAsc);
+        default: return 0;
+      }
+    });
+  }
+
+  compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
 }

src/app/ui/quotas/quotas.component.html

@@ -1,13 +1,21 @@
-<table mat-table [dataSource]="quotas">
+<table mat-table matSort [dataSource]="quotas" (matSortChange)="sortData($event)">
 
     <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'quotas.name' | i18n}} </th>
-        <td mat-cell *matCellDef="let quota"> {{quota.name}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'quotas.name' | i18n}} </th>
+        <td mat-cell *matCellDef="let quota"> {{'quotas.' + quota.name | i18n}} </td>
     </ng-container>
 
     <ng-container matColumnDef="quota">
-        <th mat-header-cell *matHeaderCellDef> {{'quotas.value' | i18n}} </th>
-        <td mat-cell *matCellDef="let quota">{{quota.value}} {{quota.unit}}</td>
+        <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>

src/app/ui/quotas/quotas.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit, Input  } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Sort } from '@angular/material/sort';
+import { I18nService } from './../../services/i18n.service';
 
 @Component({
   selector: 'app-quotas',
@@ -7,11 +9,34 @@ import { Component, OnInit, Input  } from '@angular/core';
 })
 export class QuotasComponent implements OnInit {
 
+
   @Input() quotas;
-  quotaColumns = ["name", "quota"];
-  constructor() { }
+  quotaColumns = ["name", "quota", "quotaUnit"];
+
+  constructor(private i18n: I18nService) { }
 
   ngOnInit(): void {
   }
 
+  sortData(sort: Sort) {
+    const data = this.quotas.slice();
+    if (!sort.active || sort.direction === '') {
+      this.quotas = data;
+      return;
+    }
+
+    this.quotas = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
+        case 'name': return this.compare(this.i18n.get('quotas.' + a.name, []), this.i18n.get('quotas.' + b.name,[]), isAsc);
+        case 'value': return this.compare(a.value, b.value, isAsc);
+        default: return 0;
+      }
+    });
+  }
+
+  compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
 }