53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import type { Column } from "@tanstack/react-table"
|
|
import type { DataGridFeatures } from "@/components/reui/data-grid"
|
|
import { cn } from "@/lib/utils"
|
|
import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react"
|
|
|
|
interface DataGridSortHeaderProps<TData extends object> {
|
|
column: Column<DataGridFeatures, TData, unknown>
|
|
title: string
|
|
className?: string
|
|
}
|
|
|
|
function DataGridSortHeader<TData extends object>({
|
|
column,
|
|
title,
|
|
className,
|
|
}: DataGridSortHeaderProps<TData>) {
|
|
const sorted = column.getIsSorted()
|
|
const canSort = column.getCanSort()
|
|
|
|
if (!canSort) {
|
|
return (
|
|
<span className={cn("text-xs font-medium text-muted-foreground", className)}>
|
|
{title}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground",
|
|
"hover:text-foreground transition-colors rounded-md -ml-1 px-1 py-0.5 focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2",
|
|
className,
|
|
)}
|
|
onClick={column.getToggleSortingHandler()}
|
|
>
|
|
{title}
|
|
{sorted === "asc" ? (
|
|
<ArrowUpIcon aria-hidden="true" className="size-3 text-foreground" />
|
|
) : sorted === "desc" ? (
|
|
<ArrowDownIcon aria-hidden="true" className="size-3 text-foreground" />
|
|
) : (
|
|
<ArrowUpDownIcon aria-hidden="true" className="size-3 opacity-35" />
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export { DataGridSortHeader, type DataGridSortHeaderProps }
|