diff --git a/src-ui/src/app/components/manage/generic-list/generic-list.component.ts b/src-ui/src/app/components/manage/generic-list/generic-list.component.ts
index bedf7167d..7f4e4dbd2 100644
--- a/src-ui/src/app/components/manage/generic-list/generic-list.component.ts
+++ b/src-ui/src/app/components/manage/generic-list/generic-list.component.ts
@@ -26,7 +26,7 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
   public collectionSize = 0
 
   public sortField: string
-  public sortDirection: string
+  public sortReverse: boolean
 
   getMatching(o: MatchingModel) {
     if (o.matching_algorithm == MATCH_AUTO) {
@@ -40,17 +40,17 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
 
   onSort(event: SortEvent) {
 
-    if (event.direction && event.direction.length > 0) {
+    if (event.sorted) {
       this.sortField = event.column
-      this.sortDirection = event.direction
+      this.sortReverse = event.reverse
     } else {
       this.sortField = null
-      this.sortDirection = null
+      this.sortReverse = false
     }
 
     this.headers.forEach(header => {
       if (header.sortable !== this.sortField) {
-        header.direction = '';
+        header.sorted = false
       }
     });
 
@@ -62,8 +62,7 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
   }
 
   reloadData() {
-    // TODO: this is a hack
-    this.service.list(this.page, null, this.sortField, this.sortDirection == 'des').subscribe(c => {
+    this.service.list(this.page, null, this.sortField, this.sortReverse).subscribe(c => {
       this.data = c.results
       this.collectionSize = c.count
     });
diff --git a/src-ui/src/app/directives/sortable.directive.ts b/src-ui/src/app/directives/sortable.directive.ts
index 11c474dbb..18892a846 100644
--- a/src-ui/src/app/directives/sortable.directive.ts
+++ b/src-ui/src/app/directives/sortable.directive.ts
@@ -1,17 +1,16 @@
 import { Directive, EventEmitter, Input, Output } from '@angular/core';
 
 export interface SortEvent {
-  column: string;
-  direction: string;
+  column: string
+  sorted: boolean
+  reverse: boolean
 }
 
-const rotate: {[key: string]: string} = { 'asc': 'des', 'des': '', '': 'asc' };
-
 @Directive({
   selector: 'th[sortable]',
   host: {
-    '[class.asc]': 'direction === "asc"',
-    '[class.des]': 'direction === "des"',
+    '[class.asc]': 'sorted && !reverse',
+    '[class.des]': 'sorted && reverse',
     '(click)': 'rotate()'
   }
 })
@@ -19,12 +18,26 @@ export class SortableDirective {
 
   constructor() { }
 
-  @Input() sortable: string = '';
-  @Input() direction: string = '';
+  @Input()
+  sortable: string = '';
+
+  @Input()
+  sorted: boolean = false
+
+  @Input()
+  reverse: boolean = false
+
   @Output() sort = new EventEmitter<SortEvent>();
 
   rotate() {
-    this.direction = rotate[this.direction];
-    this.sort.emit({column: this.sortable, direction: this.direction});
+    if (!this.sorted) {
+      this.sorted = true
+      this.reverse = false
+    } else if (this.sorted && !this.reverse) {
+      this.reverse = true
+    } else {
+      this.sorted = false
+    }
+    this.sort.emit({column: this.sortable, sorted: this.sorted, reverse: this.reverse});
   }
 }