import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
import { EyeNoneIcon } from '@radix-ui/react-icons'
import { Table } from '@tanstack/react-table'
import { Button } from 'src/theme/ui/button'
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
} from 'src/theme/ui/dropdown-menu'
interface DataTableColumnToggle<TData> {
table: Table<TData>
}
export function DataTableColumnToggle<TData>({
table,
}: DataTableColumnToggle<TData>) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="sm"
className="ml-auto hidden h-8 md:flex">
<EyeNoneIcon className="mr-2 h-4 w-4" />
View
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[150px]">
<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
<DropdownMenuSeparator />
{table
.getAllColumns()
.filter(
(column) => typeof column.id !== 'undefined' && column.getCanHide()
)
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(!!value)}>
{column.id}
</DropdownMenuCheckboxItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
)
}
import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
import { EyeNoneIcon } from '@radix-ui/react-icons'
import { Table } from '@tanstack/react-table'
import { Button } from 'src/theme/ui/button'
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
} from 'src/theme/ui/dropdown-menu'
interface DataTableColumnToggle<TData> {
table: Table<TData>
}
export function DataTableColumnToggle<TData>({
table,
}: DataTableColumnToggle<TData>) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="sm"
className="ml-auto hidden h-8 md:flex">
<EyeNoneIcon className="mr-2 h-4 w-4" />
View
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[150px]">
<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
<DropdownMenuSeparator />
{table
.getAllColumns()
.filter(
(column) => typeof column.id !== 'undefined' && column.getCanHide()
)
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(!!value)}>
{column.id}
</DropdownMenuCheckboxItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
)
}