Data Grid View Menu

1"use client";
2 
3import type { Table } from "@tanstack/react-table";
4import { Settings2 } from "lucide-react";
5import * as React from "react";
6import { Button } from "@/components/ui/button";
7import {
8  Command,
9  CommandEmpty,
10  CommandGroup,
11  CommandInput,
12  CommandItem,
13  CommandList,
14} from "@/components/ui/command";
15import { useDirection } from "@/components/ui/direction";
16import {
17  Popover,
18  PopoverContent,
19  PopoverTrigger,
20} from "@/components/ui/popover";
21import { cn } from "@/lib/utils";
22 
23interface DataGridViewMenuProps<TData>
24  extends React.ComponentProps<typeof PopoverContent> {
25  table: Table<TData>;
26  disabled?: boolean;
27}
28 
29export function DataGridViewMenu<TData>({
30  table,
31  disabled,
32  className,
33  ...props
34}: DataGridViewMenuProps<TData>) {
35  const dir = useDirection();
36 
37  const columns = React.useMemo(
38    () =>
39      table
40        .getAllColumns()
41        .filter(
42          (column) =>
43            typeof column.accessorFn !== "undefined" && column.getCanHide(),
44        ),
45    [table],
46  );
47 
48  return (
49    <Popover>
50      <PopoverTrigger asChild>
51        <Button
52          aria-label="Toggle columns"
53          role="combobox"
54          dir={dir}
55          variant="outline"
56          className="ms-auto hidden h-8 font-normal lg:flex"
57          disabled={disabled}
58        >
59          <Settings2 className="text-muted-foreground" />
60          View
61        </Button>
62      </PopoverTrigger>
63      <PopoverContent
64        dir={dir}
65        className={cn("w-44 p-0", className)}
66        {...props}
67      >
68        <Command>
69          <CommandInput placeholder="Search columns..." />
70          <CommandList>
71            <CommandEmpty>No columns found.</CommandEmpty>
72            <CommandGroup>
73              {columns.map((column) => (
74                <CommandItem
75                  key={column.id}
76                  data-checked={column.getIsVisible()}
77                  onSelect={() =>
78                    column.toggleVisibility(!column.getIsVisible())
79                  }
80                >
81                  <span className="truncate">
82                    {column.columnDef.meta?.label ?? column.id}
83                  </span>
84                </CommandItem>
85              ))}
86            </CommandGroup>
87          </CommandList>
88        </Command>
89      </PopoverContent>
90    </Popover>
91  );
92}