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