Added sorting, started on paging

src/components/table/table.component.html

@@ -1,14 +1,59 @@
+@if (data.headers.length > 0) {
 <table>
-  <tr>
-    <th></th>
-    <th *ngFor="let h of headers">
-      {{ h.label }}
-    </th>
-  </tr>
-  <tr *ngFor="let row of rows; index as i">
-    <td>{{ i }}</td>
-    <td *ngFor="let h of headers">
-      {{ row[h.source] }}
-    </td>
-  </tr>
+  <thead>
+    <tr>
+      <th class="spacer"></th>
+      @for (h of data.headers; track h) {
+      <th [title]="h.label">
+        {{ h.label }}
+        <span
+          class="clickable"
+          [class.button]="h.sort !== SORT.NONE"
+          [class.unused]="h.sort === SORT.NONE"
+          (click)="onSort($event, h)"
+        >
+          @switch (h.sort) { @case (SORT.ASC) {
+          <fa-icon [icon]="faSortUp"></fa-icon>
+          } @case(SORT.DSC) {
+          <fa-icon [icon]="faSortDown"></fa-icon>
+          } @default {
+          <fa-icon [icon]="faSort"></fa-icon>
+          } }
+        </span>
+      </th>
+      }
+    </tr>
+  </thead>
+  <tbody>
+    @for (row of data.data; track row; let i = $index) {
+    <tr>
+      <td>
+        @if (data.page) {
+        {{ (data.page.page - 1) * data.page.size + i + 1 }}
+        } @else {
+        {{ i + 1 }}
+        }
+      </td>
+      @for (h of data.headers; track h) {
+      <td>
+        {{ row[h.source] }}
+      </td>
+      }
+    </tr>
+    }
+  </tbody>
+  @if (data.page) {
+  <tfoot>
+    <tr>
+      <td [attr.colspan]="data.headers.length + 1">
+        <span>
+          Showing {{ (data.page.page - 1) * data.page.size + 1 }} to
+          {{ data.page.page * data.page.size }} of {{ data.total }}
+        </span>
+        <span> </span>
+      </td>
+    </tr>
+  </tfoot>
+  }
 </table>
+}