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