Start adding filters, migrate types to zod, update readme

src/app/duckdb.service.ts

@@ -1,21 +1,39 @@
 import { Injectable, OnInit } from '@angular/core';
 import * as duckdb from '@duckdb/duckdb-wasm';
-import { connect } from 'rxjs';
+import { z } from 'zod';
 
-export interface Column {
-  name: string;
-  type: string;
-}
+export const Column = z.object({
+  name: z.string(),
+  type: z.string(),
+});
 
-export interface SortColumn {
-  name: string;
-  sortType: 'asc' | 'desc';
-}
+const SortColumn = z.object({
+  name: z.string(),
+  sortType: z.enum(['asc', 'desc']),
+});
 
-export interface RowsResponse {
-  rows: any[];
-  totalRows: bigint;
-}
+const Filter = z.object({
+  value: z.string().array(),
+  operator: z.enum(['and', 'or']),
+  matchType: z.enum([
+    'startsWith',
+    'contains',
+    'notContains',
+    'endsWith',
+    'equals',
+    'notEquals',
+  ]),
+});
+
+const RowsResponse = z.object({
+  rows: z.any(),
+  totalRows: z.bigint(),
+});
+
+export type Column = z.infer<typeof Column>;
+export type SortColumn = z.infer<typeof SortColumn>;
+export type Filter = z.infer<typeof Filter>;
+export type RowsResponse = z.infer<typeof RowsResponse>;
 
 const sanitisedFileName = (file: File) =>
   file.name.toLowerCase().replaceAll("'", '').replaceAll(/\s*/g, '');
@@ -104,7 +122,7 @@ export class DuckdbService {
     numRows: number,
     columns: Column[],
     sorts: SortColumn[],
-    filters: unknown[],
+    filters: Filter[],
     aggregations: unknown[],
   ): Promise<RowsResponse> {
     const conn = await this.db.connect();

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

@@ -1,16 +1,13 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
-  computed,
   effect,
   inject,
   input,
   signal,
-  viewChild,
 } from '@angular/core';
 import { Skeleton } from 'primeng/skeleton';
-import { Table, TableLazyLoadEvent, TableModule } from 'primeng/table';
+import { TableLazyLoadEvent, TableModule } from 'primeng/table';
 import { Column, DuckdbService } from '../duckdb.service';
 
 @Component({
@@ -34,6 +31,8 @@ import { Column, DuckdbService } from '../duckdb.service';
         [virtualScrollItemSize]="46"
         [lazy]="true"
         (onLazyLoad)="onLazyLoad($event)"
+        [multiSortMeta]="[{ field: columns()[0].name, order: 1 }]"
+        stripedRows
       >
         <ng-template #header let-columns>
           <tr>
@@ -43,7 +42,9 @@ import { Column, DuckdbService } from '../duckdb.service';
                 pResizableColumn
                 [pSortableColumn]="col.name"
               >
-                {{ col.name }} <p-sortIcon [field]="col.name" />
+                {{ col.name }}
+                <p-columnFilter type="text" [field]="col.name" display="menu" />
+                <p-sortIcon [field]="col.name" />
               </th>
             }
           </tr>
@@ -116,7 +117,15 @@ export class FileViewerComponent {
           name: meta.field,
           sortType: meta.order < 0 ? 'desc' : 'asc',
         })) ?? [],
-        [],
+        Array.isArray(event.filters)
+          ? Object.values(event.filters).map((filter) => ({
+              value: Array.isArray(filter.value)
+                ? filter.value
+                : [filter.value],
+              matchType: filter.matchMode,
+              operator: filter.operator,
+            }))
+          : [],
         [],
       );
       // First clear out existing data, don't want to risk loading entire file into memory