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 · 58 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859import { 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, ...props}: DataTableColumnHeaderProps<TData, TValue>) { if (!column.getCanSort()) { return <div className={cn(className)}>{title}</div>; }
return ( <Button variant="ghost" size="sm" onClick={() => { column.toggleSorting(undefined); }} 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} > <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> );}