Add column resizing and reordering

src/app/duckdb.service.ts

@@ -12,10 +12,8 @@ export interface RowsResponse {
   totalRows: bigint;
 }
 
-const whitespaceRegex = /\s*/g;
-
 const sanitisedFileName = (file: File) =>
-  file.name.toLowerCase().replaceAll("'", '').replaceAll(whitespaceRegex, '');
+  file.name.toLowerCase().replaceAll("'", '').replaceAll(/\s*/g, '');
 
 //https://www.npmjs.com/package/@duckdb/duckdb-wasm
 @Injectable({

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

@@ -21,8 +21,12 @@ import { Column, DuckdbService } from '../duckdb.service';
   template: `
     @if (file() && columns().length > 0) {
       <p-table
+        [reorderableColumns]="true"
+        [resizableColumns]="true"
+        columnResizeMode="expand"
         [columns]="columns()"
         [value]="currentValue()"
+        showGridlines
         [scrollable]="true"
         scrollHeight="400px"
         [rows]="100"
@@ -34,7 +38,7 @@ import { Column, DuckdbService } from '../duckdb.service';
         <ng-template #header let-columns>
           <tr>
             @for (col of columns; track $index) {
-              <th style="width: 20%">
+              <th style="width: 20%" pReorderableColumn pResizableColumn>
                 {{ col.name }}
               </th>
             }
@@ -43,7 +47,7 @@ import { Column, DuckdbService } from '../duckdb.service';
         <ng-template #body let-rowData let-columns="columns">
           <tr style="height: 46px">
             @for (col of columns; track $index) {
-              <td>
+              <td pReorderableRowHandle>
                 {{ rowData[col.name] }}
               </td>
             }