openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import type { Table } from "@tanstack/react-table";
4import { Settings2 } from "lucide-react";
5
6import { Button } from "@openstatus/ui/src/components/button";
7import {
8 DropdownMenu,
9 DropdownMenuCheckboxItem,
10 DropdownMenuContent,
11 DropdownMenuLabel,
12 DropdownMenuSeparator,
13 DropdownMenuTrigger,
14} from "@openstatus/ui/src/components/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 variant="outline" size="sm" className="shadow-none">
27 <Settings2 className="mr-2 h-4 w-4" />
28 View
29 </Button>
30 </DropdownMenuTrigger>
31 <DropdownMenuContent align="end" className="w-[150px]">
32 <DropdownMenuLabel>Display properties</DropdownMenuLabel>
33 <DropdownMenuSeparator />
34 {table
35 .getAllColumns()
36 .filter(
37 (column) =>
38 typeof column.accessorFn !== "undefined" && column.getCanHide(),
39 )
40 .map((column) => {
41 return (
42 <DropdownMenuCheckboxItem
43 key={column.id}
44 className={"capitalize"}
45 onSelect={(e) => e.preventDefault()}
46 checked={column.getIsVisible()}
47 onCheckedChange={(value) => column.toggleVisibility(!!value)}
48 >
49 {column.id}
50 </DropdownMenuCheckboxItem>
51 );
52 })}
53 </DropdownMenuContent>
54 </DropdownMenu>
55 );
56}