Display Tag ID in list

package.json

@@ -1,6 +1,6 @@
 {
   "name": "deploy-app",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/components/tag-list/tag-list.component.html

@@ -37,6 +37,12 @@ <h2 class="icon-header">
         </td>
       </ng-container>
 
+      <!-- Tag ID Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Tag ID</th>
+        <td mat-cell *matCellDef="let row">{{row.tag_id}}</td>
+      </ng-container>
+
       <!-- Tag Name Column -->
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Tag Name</th>

src/app/components/tag-list/tag-list.component.ts

@@ -38,7 +38,7 @@ export class TagListComponent implements OnInit, AfterViewInit {
   };
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['action', 'name', 'deployments', 'notes', 'created', 'updated'];
+  displayedColumns = ['action', 'id', 'name', 'deployments', 'notes', 'created', 'updated'];
 
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
     .pipe(

src/app/components/tag-list/tags-datasource.ts

@@ -86,6 +86,7 @@ export class TagsDataSource extends DataSource<Tag> {
     return data.sort((a, b) => {
       const isAsc = this.sort?.direction === 'asc';
       switch (this.sort?.active) {
+        case 'id': return compare(a.tag_id ?? 0, b.tag_id ?? 0, isAsc);
         case 'name': return compare(a.name ?? '', b.name ?? '', isAsc);
         case 'deployments': return compare(a.deployments ?? 0, b.deployments ?? 0, isAsc);
         case 'notes': return compare(a.notes ?? 0, b.notes ?? 0, isAsc);