Use flexible scroll height on table to fill view

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

@@ -1,3 +1,4 @@
 :host {
   display: block;
+  height: 100%;
 }

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

@@ -11,7 +11,6 @@ import {
 } from '@angular/core';
 import { Skeleton } from 'primeng/skeleton';
 import { Table, TableLazyLoadEvent, TableModule } from 'primeng/table';
-import * as duckdb from '@duckdb/duckdb-wasm';
 import { Column, DuckdbService } from '../duckdb.service';
 
 @Component({
@@ -28,7 +27,7 @@ import { Column, DuckdbService } from '../duckdb.service';
         [value]="currentValue()"
         showGridlines
         [scrollable]="true"
-        scrollHeight="400px"
+        scrollHeight="flex"
         [rows]="100"
         [virtualScroll]="true"
         [virtualScrollItemSize]="46"
@@ -38,7 +37,7 @@ import { Column, DuckdbService } from '../duckdb.service';
         <ng-template #header let-columns>
           <tr>
             @for (col of columns; track $index) {
-              <th style="width: 20%" pReorderableColumn pResizableColumn>
+              <th pReorderableColumn pResizableColumn>
                 {{ col.name }}
               </th>
             }

src/styles.scss

@@ -4,3 +4,10 @@
 html {
   font-size: 14px;
 }
+
+// https://github.com/primefaces/primeng/issues/17824
+// table won't show up when using scrooheight = flex and virtualscroll = true
+// Latest release doesn't fix it even though there was a commit to address the issue
+p-scroller {
+  height: 100%;
+}