@ragrabbit/mcp

by madarco
Verified
"use client"; import { DropdownMenuTrigger } from "@repo/design/shadcn/dropdown-menu"; import { MixerHorizontalIcon } from "@radix-ui/react-icons"; import { Table } from "@tanstack/react-table"; import { Button } from "@repo/design/shadcn/button"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, } from "@repo/design/shadcn/dropdown-menu"; import { CustomColumnDev } from "./data-table"; interface DataTableViewOptionsProps<TData> { table: Table<TData>; } export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) { return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex"> <MixerHorizontalIcon className="mr-2 h-4 w-4" /> 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.columnDef as CustomColumnDev<TData, any>).title || column.id} </DropdownMenuCheckboxItem> ); })} </DropdownMenuContent> </DropdownMenu> ); }