46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<script setup lang="ts" generic="Task extends { [key: string]: any;}">
|
|
import type { Table } from '@tanstack/vue-table'
|
|
import { computed } from 'vue'
|
|
|
|
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="hidden h-8 ml-auto lg:flex"
|
|
>
|
|
<Iconify icon="ph:faders-horizontal-duotone" class="w-4 h-4 mr-2" />
|
|
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>
|