Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.5 kB · 60 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061import { Button } from "@openstatus/ui/components/ui/button";import { cn } from "@openstatus/ui/lib/utils";import type { Column } from "@tanstack/react-table";import { ChevronDown, ChevronUp } from "lucide-react";
interface DataTableColumnHeaderProps< TData, TValue,> extends React.ComponentProps<"button"> { column: Column<TData, TValue>; title: string;}
export function DataTableColumnHeader<TData, TValue>({ column, title, className, onClick, ...props}: DataTableColumnHeaderProps<TData, TValue>) { if (!column.getCanSort()) { return <div className={cn(className)}>{title}</div>; }
return ( <Button variant="ghost" size="sm" className={cn( "flex h-7 w-full items-center justify-between gap-2 px-0 py-0 hover:bg-transparent dark:hover:bg-transparent", className, )} {...props} onClick={(event) => { column.toggleSorting(undefined); onClick?.(event); }} > <span>{title}</span> <span className="flex flex-col"> <ChevronUp className={cn( "-mb-0.5 size-3", column.getIsSorted() === "asc" ? "text-accent-foreground" : "text-muted-foreground", )} /> <ChevronDown className={cn( "-mt-0.5 size-3", column.getIsSorted() === "desc" ? "text-accent-foreground" : "text-muted-foreground", )} /> </span> </Button> );}