openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
4import type { Table } from "@tanstack/react-table";
5import { Settings2 } from "lucide-react";
6
7import { Button } from "@/components/ui/button";
8import {
9 DropdownMenu,
10 DropdownMenuCheckboxItem,
11 DropdownMenuContent,
12 DropdownMenuLabel,
13 DropdownMenuSeparator,
14} from "@/components/ui/dropdown-menu";
15
16interface DataTableViewOptionsProps<TData> {
17 table: Table<TData>;
18}
19
20export function DataTableViewOptions<TData>({
21 table,
22}: DataTableViewOptionsProps<TData>) {
23 return (
24 <DropdownMenu>
25 <DropdownMenuTrigger asChild>
26 <Button
27 variant="outline"
28 size="sm"
29 className="ml-auto hidden h-8 lg:flex"
30 >
31 <Settings2 />
32 View
33 </Button>
34 </DropdownMenuTrigger>
35 <DropdownMenuContent align="end" className="w-[150px]">
36 <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
37 <DropdownMenuSeparator />
38 {table
39 .getAllColumns()
40 .filter(
41 (column) =>
42 typeof column.accessorFn !== "undefined" && column.getCanHide(),
43 )
44 .map((column) => {
45 return (
46 <DropdownMenuCheckboxItem
47 key={column.id}
48 className="capitalize"
49 checked={column.getIsVisible()}
50 onCheckedChange={(value) => column.toggleVisibility(!!value)}
51 >
52 {column.id}
53 </DropdownMenuCheckboxItem>
54 );
55 })}
56 </DropdownMenuContent>
57 </DropdownMenu>
58 );
59}