1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import { Button } from "../../button.tsx";import {  DropdownMenu,  DropdownMenuCheckboxItem,  DropdownMenuContent,  DropdownMenuLabel,  DropdownMenuSeparator,  DropdownMenuTrigger,} from "../../dropdown-menu.tsx";import { cn } from "../../utils.ts";import type { Table } from "./table.tsx";
export function TableViewOptions<TData>({  className,  table,}: JSX.IntrinsicElements["button"] & { table: Table<TData> }) {  return (    <DropdownMenu>      <DropdownMenuTrigger asChild>        <Button          variant="outline"          size="sm"          className="ml-3 hidden lg:flex"        >          <i className={cn("mdi-tune-variant h-4 w-4", className)} />        </Button>      </DropdownMenuTrigger>      <DropdownMenuContent align="end" className="w-[150px]">        <DropdownMenuLabel>          Toggle columns        </DropdownMenuLabel>        <DropdownMenuSeparator />        {table          .getAllColumns()          .filter((column) => column.getCanHide())          .map((column) => {            return (              <DropdownMenuCheckboxItem                key={column.id}                className="capitalize"                checked={column.getIsVisible()}                onCheckedChange={(value) => {                  const toggleColumn = (column) => {                    column.toggleVisibility(!!value);                    if (column.columns) column.columns.forEach(toggleColumn);                  };                  toggleColumn(column);                }}              >                {column.id}              </DropdownMenuCheckboxItem>            );          })}      </DropdownMenuContent>    </DropdownMenu>  );}