From 5d8bd10e92d8f5e0b8b8e060e42da01db3a12ebd Mon Sep 17 00:00:00 2001
From: vato007 <contact@michaelpivato.dev>
Date: Thu, 24 Apr 2025 20:16:19 +0930
Subject: [PATCH] Add column resizing and reordering

---
 src/app/duckdb.service.ts                    | 4 +---
 src/app/file-viewer/file-viewer.component.ts | 8 ++++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/duckdb.service.ts b/src/app/duckdb.service.ts
index 7eb5eff..c15cc6b 100644
--- a/src/app/duckdb.service.ts
+++ b/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({
diff --git a/src/app/file-viewer/file-viewer.component.ts b/src/app/file-viewer/file-viewer.component.ts
index 9e97859..fa53f1a 100644
--- a/src/app/file-viewer/file-viewer.component.ts
+++ b/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>
             }