table and query work

frontend/src/lib/tableStuff/SearchableHeader.tsx

@@ -0,0 +1,67 @@
+import type { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, Search } from "lucide-react";
+import React, { useState } from "react";
+import { Button } from "../../components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+import { Input } from "../../components/ui/input";
+import { cn } from "../utils";
+
+type SearchableHeaderProps<TData> = {
+	column: Column<TData, unknown>;
+	title: string;
+	searchable?: boolean;
+};
+
+export default function SearchableHeader<TData>({
+	column,
+	title,
+	searchable = false,
+}: SearchableHeaderProps<TData>) {
+	const [open, setOpen] = useState(false);
+	return (
+		<div className="flex items-center gap-1">
+			<Button
+				variant="ghost"
+				className="px-2"
+				onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+			>
+				<span className="flex flex-row items-center gap-2">
+					{title}
+					{column.getIsSorted() === "asc" ? (
+						<ArrowUp className="h-4 w-4" />
+					) : column.getIsSorted() === "desc" ? (
+						<ArrowDown className="h-4 w-4" />
+					) : null}
+				</span>
+			</Button>
+			{searchable && (
+				<DropdownMenu open={open} onOpenChange={setOpen}>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" size="icon" className="h-8 w-8">
+							<Search
+								className={cn(
+									"h-4 w-4",
+									column.getFilterValue() ? "text-primary" : "",
+								)}
+							/>
+						</Button>
+					</DropdownMenuTrigger>
+
+					<DropdownMenuContent align="start" className="w-56 p-2">
+						<Input
+							autoFocus
+							value={(column.getFilterValue() as string) ?? ""}
+							onChange={(e) => column.setFilterValue(e.target.value)}
+							placeholder={`Search ${title.toLowerCase()}...`}
+							className="h-8"
+						/>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			)}
+		</div>
+	);
+}