Add basic table sorting

src/app/duckdb.service.ts

@@ -7,6 +7,11 @@ export interface Column {
   type: string;
 }
 
+export interface SortColumn {
+  name: string;
+  sortType: 'asc' | 'desc';
+}
+
 export interface RowsResponse {
   rows: any[];
   totalRows: bigint;
@@ -98,6 +103,7 @@ export class DuckdbService {
     start: number,
     numRows: number,
     columns: Column[],
+    sorts: SortColumn[],
     filters: unknown[],
     aggregations: unknown[],
   ): Promise<RowsResponse> {
@@ -107,9 +113,12 @@ export class DuckdbService {
         `SELECT COUNT(1) totalRows FROM ${sanitisedFileName(file)}`,
       );
       const { totalRows } = totalRowResponse.get(0)?.toJSON()!;
-      const response = await conn.query(
+      let query = `SELECT ${columns.map((column) => `"${column.name}"`).join(', ')} FROM ${sanitisedFileName(file)} `;
-        `SELECT ${columns.map((column) => `"${column.name}"`).join(', ')} FROM ${sanitisedFileName(file)} LIMIT ${numRows} OFFSET ${start}`,
+      if (sorts.length > 0) {
-      );
+        query += ` ORDER BY ${sorts.map((sort) => `"${sort.name}" ${sort.sortType}`).join(', ')}`;
+      }
+      query += ` LIMIT ${numRows} OFFSET ${start}`;
+      const response = await conn.query(query);
       const rows = [];
       for (let i = 0; i < response.numRows; i++) {
         rows.push(response.get(i)?.toJSON()!);

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

@@ -20,6 +20,7 @@ import { Column, DuckdbService } from '../duckdb.service';
   template: `
     @if (file() && columns().length > 0) {
       <p-table
+        sortMode="multiple"
         [reorderableColumns]="true"
         [resizableColumns]="true"
         columnResizeMode="expand"
@@ -37,8 +38,12 @@ import { Column, DuckdbService } from '../duckdb.service';
         <ng-template #header let-columns>
           <tr>
             @for (col of columns; track $index) {
-              <th pReorderableColumn pResizableColumn>
+              <th
-                {{ col.name }}
+                pReorderableColumn
+                pResizableColumn
+                [pSortableColumn]="col.name"
+              >
+                {{ col.name }} <p-sortIcon [field]="col.name" />
               </th>
             }
           </tr>
@@ -71,7 +76,6 @@ export class FileViewerComponent {
   file = input<File | undefined>();
 
   private duckdbService = inject(DuckdbService);
-  private cdr = inject(ChangeDetectorRef);
 
   // Can't be computed since effect has to run first so file exists in duckdb
   protected columns = signal<Column[]>([]);
@@ -92,6 +96,7 @@ export class FileViewerComponent {
           this.columns(),
           [],
           [],
+          [],
         );
         const newValue = Array.from({ length: Number(rows.totalRows) });
         this.currentValue.set(newValue);
@@ -107,6 +112,10 @@ export class FileViewerComponent {
         event.first ?? 0,
         event.rows ?? 0,
         this.columns(),
+        event.multiSortMeta?.map((meta) => ({
+          name: meta.field,
+          sortType: meta.order < 0 ? 'desc' : 'asc',
+        })) ?? [],
         [],
         [],
       );
@@ -122,7 +131,7 @@ export class FileViewerComponent {
       }
       // Can't update the current value, otherwise we get an infinite loop
       this.currentValue().splice(event.first!, event.rows!, ...rows.rows);
-      this.cdr.markForCheck();
+      event.forceUpdate!();
     }
   }
 }