gitscope
/
← marzneshin / dashboard/src/components/data-table/column-header.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/data-table/column-header.tsx · v0.3.0-alpha2
Source
1 b15ff05 Mrdn 2y ago
2 b15ff05 Mrdn 2y ago import {
3 b15ff05 Mrdn 2y ago ArrowDownIcon,
4 b15ff05 Mrdn 2y ago ArrowUpIcon,
5 b15ff05 Mrdn 2y ago CaretSortIcon,
6 b15ff05 Mrdn 2y ago EyeNoneIcon,
7 b15ff05 Mrdn 2y ago } from "@radix-ui/react-icons"
8 b15ff05 Mrdn 2y ago import { Column } from "@tanstack/react-table"
9 b15ff05 Mrdn 2y ago
10 b15ff05 Mrdn 2y ago import {
11 b15ff05 Mrdn 2y ago Button,
12 b15ff05 Mrdn 2y ago DropdownMenu,
13 b15ff05 Mrdn 2y ago DropdownMenuContent,
14 b15ff05 Mrdn 2y ago DropdownMenuItem,
15 b15ff05 Mrdn 2y ago DropdownMenuSeparator,
16 b15ff05 Mrdn 2y ago DropdownMenuTrigger,
17 b15ff05 Mrdn 2y ago } from "@marzneshin/components"
18 b15ff05 Mrdn 2y ago import { cn } from "@marzneshin/utils"
19 b15ff05 Mrdn 2y ago
20 b15ff05 Mrdn 2y ago interface DataTableColumnHeaderProps<TData, TValue>
21 b15ff05 Mrdn 2y ago extends React.HTMLAttributes<HTMLDivElement> {
22 b15ff05 Mrdn 2y ago column: Column<TData, TValue>
23 b15ff05 Mrdn 2y ago title: string
24 b15ff05 Mrdn 2y ago }
25 b15ff05 Mrdn 2y ago
26 b15ff05 Mrdn 2y ago export function DataTableColumnHeader<TData, TValue>({
27 b15ff05 Mrdn 2y ago column,
28 b15ff05 Mrdn 2y ago title,
29 b15ff05 Mrdn 2y ago className,
30 b15ff05 Mrdn 2y ago }: DataTableColumnHeaderProps<TData, TValue>) {
31 b15ff05 Mrdn 2y ago if (!column.getCanSort()) {
32 b15ff05 Mrdn 2y ago return <div className={cn(className)}>{title}</div>
33 b15ff05 Mrdn 2y ago }
34 b15ff05 Mrdn 2y ago
35 b15ff05 Mrdn 2y ago return (
36 b15ff05 Mrdn 2y ago <div className={cn("flex items-center space-x-2", className)}>
37 b15ff05 Mrdn 2y ago <DropdownMenu>
38 b15ff05 Mrdn 2y ago <DropdownMenuTrigger asChild>
39 b15ff05 Mrdn 2y ago <Button
40 b15ff05 Mrdn 2y ago variant="ghost"
41 b15ff05 Mrdn 2y ago size="sm"
42 b15ff05 Mrdn 2y ago className="-ml-3 h-8 data-[state=open]:bg-accent"
43 b15ff05 Mrdn 2y ago >
44 b15ff05 Mrdn 2y ago <span>{title}</span>
45 b15ff05 Mrdn 2y ago {column.getIsSorted() === "desc" ? (
46 b15ff05 Mrdn 2y ago <ArrowDownIcon className="ml-2 w-4 h-4" />
47 b15ff05 Mrdn 2y ago ) : column.getIsSorted() === "asc" ? (
48 b15ff05 Mrdn 2y ago <ArrowUpIcon className="ml-2 w-4 h-4" />
49 b15ff05 Mrdn 2y ago ) : (
50 b15ff05 Mrdn 2y ago <CaretSortIcon className="ml-2 w-4 h-4" />
51 b15ff05 Mrdn 2y ago )}
52 b15ff05 Mrdn 2y ago </Button>
53 b15ff05 Mrdn 2y ago </DropdownMenuTrigger>
54 b15ff05 Mrdn 2y ago <DropdownMenuContent align="start">
55 b15ff05 Mrdn 2y ago <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
56 b15ff05 Mrdn 2y ago <ArrowUpIcon className="mr-2 w-3.5 h-3.5 text-muted-foreground/70" />
57 b15ff05 Mrdn 2y ago Asc
58 b15ff05 Mrdn 2y ago </DropdownMenuItem>
59 b15ff05 Mrdn 2y ago <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
60 b15ff05 Mrdn 2y ago <ArrowDownIcon className="mr-2 w-3.5 h-3.5 text-muted-foreground/70" />
61 b15ff05 Mrdn 2y ago Desc
62 b15ff05 Mrdn 2y ago </DropdownMenuItem>
63 b15ff05 Mrdn 2y ago <DropdownMenuSeparator />
64 b15ff05 Mrdn 2y ago <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
65 b15ff05 Mrdn 2y ago <EyeNoneIcon className="mr-2 w-3.5 h-3.5 text-muted-foreground/70" />
66 b15ff05 Mrdn 2y ago Hide
67 b15ff05 Mrdn 2y ago </DropdownMenuItem>
68 b15ff05 Mrdn 2y ago </DropdownMenuContent>
69 b15ff05 Mrdn 2y ago </DropdownMenu>
70 b15ff05 Mrdn 2y ago </div>
71 b15ff05 Mrdn 2y ago )
72 b15ff05 Mrdn 2y ago }