58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import type { Table } from '@tanstack/vue-table'
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import type { Task } from '../data/schema'
|
||
|
|
import MixerHorizontalIcon from '~icons/radix-icons/mixer-horizontal'
|
||
|
|
|
||
|
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||
|
|
import {
|
||
|
|
DropdownMenu,
|
||
|
|
DropdownMenuCheckboxItem,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuLabel,
|
||
|
|
DropdownMenuSeparator,
|
||
|
|
DropdownMenuTrigger,
|
||
|
|
} from '@/lib/registry/new-york/ui/dropdown-menu'
|
||
|
|
|
||
|
|
interface DataTableViewOptionsProps {
|
||
|
|
table: Table<Task>
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = defineProps<DataTableViewOptionsProps>()
|
||
|
|
|
||
|
|
const columns = computed(() => props.table.getAllColumns()
|
||
|
|
.filter(
|
||
|
|
column =>
|
||
|
|
typeof column.accessorFn !== 'undefined' && column.getCanHide(),
|
||
|
|
))
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger as-child>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
class="ml-auto hidden h-8 lg:flex"
|
||
|
|
>
|
||
|
|
<MixerHorizontalIcon class="mr-2 h-4 w-4" />
|
||
|
|
View
|
||
|
|
</Button>
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
<DropdownMenuContent align="end" class="w-[150px]">
|
||
|
|
<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
|
||
|
|
<DropdownMenuSeparator />
|
||
|
|
|
||
|
|
<DropdownMenuCheckboxItem
|
||
|
|
v-for="column in columns"
|
||
|
|
:key="column.id"
|
||
|
|
class="capitalize"
|
||
|
|
:checked="column.getIsVisible()"
|
||
|
|
@update:checked="(value) => column.toggleVisibility(!!value)"
|
||
|
|
>
|
||
|
|
{{ column.id }}
|
||
|
|
</DropdownMenuCheckboxItem>
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
</template>
|