Sort by column (#198)

* chore: Split HeaderCell out of Row.tsx

* feat: toggle and highlight selected column header

* feat: Fixed sorting, added stylized headers

* fix: Performance and hardware column sorting

* fix: Rebuild the sorted list when changing the comparator

packages/common/src/SortedCollection.ts

@@ -90,8 +90,7 @@ export namespace SortedCollection {
 }
 
 export class SortedCollection<Item extends { id: number }> {
-  private readonly compare: Compare<Item>;
-
+  private compare: Compare<Item>;
   private map = Array<Maybe<Item>>();
   private list = Array<Item>();
   private changeRef = 0;
@@ -100,6 +99,13 @@ export class SortedCollection<Item extends { id: number }> {
     this.compare = compare;
   }
 
+  public setComparator(compare: Compare<Item>) {
+    this.compare = compare;
+    this.list = this.map.filter((item) => item != null) as Item[];
+    this.list.sort(compare);
+    this.changeRef += 1;
+  }
+
   public ref(): SortedCollection.StateRef {
     return this.changeRef as SortedCollection.StateRef;
   }
@@ -110,6 +116,9 @@ export class SortedCollection<Item extends { id: number }> {
       this.map = this.map.concat(Array<Maybe<Item>>(Math.max(10, 1 + item.id - this.map.length)));
     }
 
+    // Remove old item if overriding
+    this.remove(item.id);
+
     this.map[item.id] = item;
 
     sortedInsert(item, this.list, this.compare);
@@ -169,6 +178,14 @@ export class SortedCollection<Item extends { id: number }> {
     }
   }
 
+  public mutAndMaybeSort(id: number, mutator: (item: Item) => void, sort: boolean) {
+    if (sort) {
+      this.mutAndSort(id, mutator);
+    } else {
+      this.mut(id, mutator);
+    }
+  }
+
   public mutEach(mutator: (item: Item) => void) {
     this.list.forEach(mutator);
   }