openstatus.dev
Openstatus
www.openstatus.dev
1import type { Column } from "@tanstack/react-table";
2import { ChevronDown, ChevronUp } from "lucide-react";
3
4import { Button } from "@/components/ui/button";
5
6import { cn } from "@/lib/utils";
7
8interface DataTableColumnHeaderProps<TData, TValue>
9 extends React.ComponentProps<"button"> {
10 column: Column<TData, TValue>;
11 title: string;
12}
13
14export function DataTableColumnHeader<TData, TValue>({
15 column,
16 title,
17 className,
18 ...props
19}: DataTableColumnHeaderProps<TData, TValue>) {
20 if (!column.getCanSort()) {
21 return <div className={cn(className)}>{title}</div>;
22 }
23
24 return (
25 <Button
26 variant="ghost"
27 size="sm"
28 onClick={() => {
29 column.toggleSorting(undefined);
30 }}
31 className={cn(
32 "flex h-7 w-full items-center justify-between gap-2 px-0 py-0 hover:bg-transparent dark:hover:bg-transparent",
33 className,
34 )}
35 {...props}
36 >
37 <span>{title}</span>
38 <span className="flex flex-col">
39 <ChevronUp
40 className={cn(
41 "-mb-0.5 size-3",
42 column.getIsSorted() === "asc"
43 ? "text-accent-foreground"
44 : "text-muted-foreground",
45 )}
46 />
47 <ChevronDown
48 className={cn(
49 "-mt-0.5 size-3",
50 column.getIsSorted() === "desc"
51 ? "text-accent-foreground"
52 : "text-muted-foreground",
53 )}
54 />
55 </span>
56 </Button>
57 );
58}