Add support for multiple tabs

src/app/file-viewer/file-viewer.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
   effect,
   inject,
   input,
@@ -123,34 +124,36 @@ import { PaginatorModule, PaginatorState } from 'primeng/paginator';
               }
             </tr>
           </ng-template>
-          <ng-template #footer>
-            <tr>
-              @for (col of columns(); track $index) {
-                <td #attachment>
-                  @if (col.type === 'DOUBLE' || col.type === 'BIGINT') {
-                    <div class="flex items-baseline">
-                      <p-button
-                        (click)="
-                          currentAggregateColumn.set($index);
-                          aggregateMenu.toggle($event)
-                        "
-                        [label]="aggregates()[$index]?.type?.toUpperCase()"
-                      >
-                        <ng-template #icon>
-                          <span class="material-symbols-outlined">
-                            mediation
-                          </span>
-                        </ng-template>
-                      </p-button>
-                      <span class="flex-1 text-end">
-                        {{ aggregateValues()[$index] | number }}
-                      </span>
-                    </div>
-                  }
-                </td>
-              }
-            </tr>
-          </ng-template>
+          @if (hasAggregates()) {
+            <ng-template #footer>
+              <tr>
+                @for (col of columns(); track $index) {
+                  <td #attachment>
+                    @if (col.type === 'DOUBLE' || col.type === 'BIGINT') {
+                      <div class="flex items-baseline">
+                        <p-button
+                          (click)="
+                            currentAggregateColumn.set($index);
+                            aggregateMenu.toggle($event)
+                          "
+                          [label]="aggregates()[$index]?.type?.toUpperCase()"
+                        >
+                          <ng-template #icon>
+                            <span class="material-symbols-outlined">
+                              mediation
+                            </span>
+                          </ng-template>
+                        </p-button>
+                        <span class="flex-1 text-end">
+                          {{ aggregateValues()[$index] | number }}
+                        </span>
+                      </div>
+                    }
+                  </td>
+                }
+              </tr>
+            </ng-template>
+          }
         </p-table>
       </div>
       @if (currentRowCount() > PAGE_SIZE) {
@@ -191,6 +194,10 @@ export class FileViewerComponent {
 
   private table = viewChild(Table);
 
+  protected hasAggregates = computed(
+    () => !!this.columns().find((col) => this.isAggregateColumn(col)),
+  );
+
   protected aggregateItems: MenuItem[] = aggregateTypes.map((type) => ({
     label: type,
     command: () => this.updateAggregateValue(type),
@@ -198,7 +205,7 @@ export class FileViewerComponent {
 
   constructor() {
     effect(async () => {
-      this.loadEmpty();
+      await this.loadEmpty();
     });
   }
 
@@ -268,7 +275,7 @@ export class FileViewerComponent {
       }
 
       // Can't update the current value, otherwise we get an infinite loop due to primeng change detection rerunning (plus it's faster to mutate)
-      for (let i = 0; i < event.rows!; i++) {
+      for (let i = 0; i < rows.rows!.length; i++) {
         this.currentValue()[event.first! + i] = rows.rows![i];
       }
       event.forceUpdate!();
@@ -340,4 +347,8 @@ export class FileViewerComponent {
       }),
     );
   }
+
+  protected isAggregateColumn(col: Column) {
+    return col.type === 'DOUBLE' || col.type === 'BIGINT';
+  }
 }