57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { Table } from "@tanstack/react-table"
|
||
|
|
import { Settings2 } from "lucide-react"
|
||
|
|
|
||
|
|
import {
|
||
|
|
Button, DropdownMenu,
|
||
|
|
DropdownMenuCheckboxItem,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuLabel,
|
||
|
|
DropdownMenuSeparator,
|
||
|
|
DropdownMenuTrigger
|
||
|
|
} from '@repo/shadcn-ui/components'
|
||
|
|
|
||
|
|
export function DataTableViewOptions<TData>({
|
||
|
|
table,
|
||
|
|
}: {
|
||
|
|
table: Table<TData>
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="ml-auto hidden h-8 lg:flex"
|
||
|
|
>
|
||
|
|
<Settings2 />
|
||
|
|
View
|
||
|
|
</Button>
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
<DropdownMenuContent align="end" className="w-[150px]">
|
||
|
|
<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
|
||
|
|
<DropdownMenuSeparator />
|
||
|
|
{table
|
||
|
|
.getAllColumns()
|
||
|
|
.filter(
|
||
|
|
(column) =>
|
||
|
|
typeof column.accessorFn !== "undefined" && column.getCanHide()
|
||
|
|
)
|
||
|
|
.map((column) => {
|
||
|
|
return (
|
||
|
|
<DropdownMenuCheckboxItem
|
||
|
|
key={column.id}
|
||
|
|
className="capitalize"
|
||
|
|
checked={column.getIsVisible()}
|
||
|
|
onCheckedChange={(value) => column.toggleVisibility(!!value)}
|
||
|
|
>
|
||
|
|
{column.id}
|
||
|
|
</DropdownMenuCheckboxItem>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
)
|
||
|
|
}
|