feat: add dropdown for selecting column to search by

src-tauri/Cargo.lock

@@ -3842,7 +3842,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-dialog"
 version = "2.0.0-beta.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace.git?rev=a31ef8e67e25d233cf463efb65428d7e0893e404#a31ef8e67e25d233cf463efb65428d7e0893e404"
+source = "git+https://github.com/tauri-apps/plugins-workspace.git?branch=chore/tauri-beta-3#4709c343bcc0342b20d241ad16a1fe405ce7e182"
 dependencies = [
  "glib 0.16.9",
  "log",
@@ -3859,7 +3859,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-fs"
 version = "2.0.0-beta.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace.git?rev=a31ef8e67e25d233cf463efb65428d7e0893e404#a31ef8e67e25d233cf463efb65428d7e0893e404"
+source = "git+https://github.com/tauri-apps/plugins-workspace.git?branch=chore/tauri-beta-3#4709c343bcc0342b20d241ad16a1fe405ce7e182"
 dependencies = [
  "anyhow",
  "glob",
@@ -3877,7 +3877,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-shell"
 version = "2.0.0-beta.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace.git?rev=a31ef8e67e25d233cf463efb65428d7e0893e404#a31ef8e67e25d233cf463efb65428d7e0893e404"
+source = "git+https://github.com/tauri-apps/plugins-workspace.git?branch=chore/tauri-beta-3#4709c343bcc0342b20d241ad16a1fe405ce7e182"
 dependencies = [
  "encoding_rs",
  "log",

src-tauri/Cargo.toml

@@ -21,9 +21,9 @@ tauri-build = { version = "2.0.0-beta.2", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "2.0.0-beta.3", features = [] }
-tauri-plugin-shell = { git = "https://github.com/tauri-apps/plugins-workspace.git", rev = "a31ef8e67e25d233cf463efb65428d7e0893e404" }
+tauri-plugin-shell = { git = "https://github.com/tauri-apps/plugins-workspace.git", branch = "chore/tauri-beta-3" }
-tauri-plugin-fs = { git = "https://github.com/tauri-apps/plugins-workspace.git", rev = "a31ef8e67e25d233cf463efb65428d7e0893e404" }
+tauri-plugin-fs = { git = "https://github.com/tauri-apps/plugins-workspace.git", branch = "chore/tauri-beta-3" }
-tauri-plugin-dialog = { git = "https://github.com/tauri-apps/plugins-workspace.git", rev = "a31ef8e67e25d233cf463efb65428d7e0893e404" }
+tauri-plugin-dialog = { git = "https://github.com/tauri-apps/plugins-workspace.git", branch = "chore/tauri-beta-3" }
 
 [profile.release]
 panic = "abort" # Strip expensive panic clean-up logic

src/components/DT/columns.tsx

@@ -11,14 +11,17 @@ export type Prediction = {
 export const columns: ColumnDef<Prediction>[] = [
     {
         accessorKey: "path",
+        id: "path",
         header: "Path",
     },
     {
         accessorKey: "label",
+        id: "label",
         header: "Label",
     },
     {
         accessorKey: "score",
+        id: "score",
         header: "Score",
     },
 ];

src/components/DT/data-table.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-
 import {
     ColumnDef,
     ColumnFiltersState,
@@ -11,6 +9,7 @@ import {
     getPaginationRowModel,
     useReactTable,
 } from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
     Table,
@@ -20,8 +19,19 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { useState } from "react";
 import { DataTableViewOptions } from "@/components/DT/DataTableViewOptions";
+import { LucideScanSearch } from "lucide-react";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -33,6 +43,7 @@ export function DataTable<TData, TValue>({
     data,
 }: DataTableProps<TData, TValue>) {
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [searchColumn, setSearchColumn] = useState("label");
     const table = useReactTable({
         data,
         columns,
@@ -47,22 +58,56 @@ export function DataTable<TData, TValue>({
 
     return (
         <div>
-            {" "}
+            <div className="flex justify-between gap-8 py-4">
-            <div className="flex items-center gap-8 py-4">
+                <div className="flex gap-2">
-                <Input
+                    <Input
-                    placeholder="Search through labels..."
+                        placeholder={`Search column '${
-                    value={
+                            columns.filter(
-                        (table
+                                (column) => column.id === searchColumn
-                            .getColumn("label")
+                            )[0].header
-                            ?.getFilterValue() as string) ?? ""
+                        }'...`}
-                    }
+                        value={
-                    onChange={(event) =>
+                            table
-                        table
+                                .getColumn(searchColumn)
-                            .getColumn("label")
+                                ?.getFilterValue() as string
-                            ?.setFilterValue(event.target.value)
+                        }
-                    }
+                        onChange={(event) =>
-                    className="max-w-sm"
+                            table
-                />
+                                .getColumn(searchColumn)
+                                ?.setFilterValue(event.target.value)
+                        }
+                        className="max-w-sm"
+                    />
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="icon">
+                                <LucideScanSearch strokeWidth={1.25} />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                            <DropdownMenuLabel>Search Column</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuRadioGroup
+                                defaultValue={searchColumn}
+                                value={searchColumn}
+                                onValueChange={setSearchColumn}
+                            >
+                                {columns
+                                    .filter(
+                                        (column) => column.id && column.header
+                                    )
+                                    .map((column, index) => (
+                                        <DropdownMenuRadioItem
+                                            key={index}
+                                            value={column.id!}
+                                        >
+                                            {column.header!.toString()}
+                                        </DropdownMenuRadioItem>
+                                    ))}
+                            </DropdownMenuRadioGroup>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
                 <DataTableViewOptions table={table} />
             </div>
             <div className="rounded-md border">
@@ -96,7 +141,10 @@ export function DataTable<TData, TValue>({
                                     }
                                 >
                                     {row.getVisibleCells().map((cell: any) => (
-                                        <TableCell key={cell.id} className="text-left">
+                                        <TableCell
+                                            key={cell.id}
+                                            className="text-left"
+                                        >
                                             {flexRender(
                                                 cell.column.columnDef.cell,
                                                 cell.getContext()