export function DataTableColumnHeader()

in projects/Aligned-Platform-EnergizeAI/app/src/components/ui/data-table-column-header.tsx [20:71]

51 lines of code
10 McCabe index (conditional complexity)


export function DataTableColumnHeader<TData, TValue>({
  column,
  title,
  className,
  align,
}: DataTableColumnHeaderProps<TData, TValue>) {
  if (!column.getCanSort()) {
    return (
      <div
        className={cn(
          className,
          align === "center" && "justify-center text-center",
          align === "right" && "justify-end text-right",
        )}
      >
        {title}
      </div>
    )
  }

  return (
    <div
      className={cn(
        "flex items-center space-x-2",
        align === "center" && "justify-center text-center",
        align === "right" && "justify-end text-right",
        className,
      )}
    >
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className={cn(
              "-ml-3 h-8 data-[state=open]:bg-accent",
              align === "center" && "flex justify-center text-center",
              align === "right" && "flex justify-end text-right",
            )}
          >
            <span className="whitespace-nowrap">{title}</span>
            {column.getIsSorted() === "desc" ? (
              <SortDesc className="ml-2 h-4 w-4" />
            ) : column.getIsSorted() === "asc" ? (
              <SortAsc className="ml-2 h-4 w-4" />
            ) : (
              <ChevronsUpDown className="ml-2 h-4 w-4" />
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>