68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
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>
|
|
);
|
|
}
|