rzmk/fformat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add dropdown for selecting column to search by

Browse source
This commit is contained in:
rzmk 2024-02-20 09:34:07 -05:00
parent b814426d7d
commit 614f726062
No known key found for this signature in database
4 changed files with 76 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src-tauri/Cargo.lock generated
View file

@ -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",

6
src-tauri/Cargo.toml
View file

@ -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-fs = { git = "https://github.com/tauri-apps/plugins-workspace.git", rev = "a31ef8e67e25d233cf463efb65428d7e0893e404" }
tauri-plugin-dialog = { 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", branch = "chore/tauri-beta-3" }
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

3
src/components/DT/columns.tsx
View file

@ -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",
},
];

86
src/components/DT/data-table.tsx
View file

@ -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 items-center gap-8 py-4">
<Input
placeholder="Search through labels..."
value={
(table
.getColumn("label")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("label")
?.setFilterValue(event.target.value)
}
className="max-w-sm"
/>
<div className="flex justify-between gap-8 py-4">
<div className="flex gap-2">
<Input
placeholder={`Search column '${
columns.filter(
(column) => column.id === searchColumn
)[0].header
}'...`}
value={
table
.getColumn(searchColumn)
?.getFilterValue() as string
}
onChange={(event) =>
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()