51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
import { Settings } from "lucide-vue-next";
|
|
import { Button } from "@/Components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/Components/ui/dropdown-menu";
|
|
|
|
const props = defineProps({
|
|
table: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
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">
|
|
<Settings class="mr-2 h-4 w-4" />
|
|
Pogled
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" class="w-[150px]">
|
|
<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuCheckboxItem
|
|
v-for="column in columns"
|
|
:key="column.id"
|
|
class="capitalize"
|
|
:model-value="column.getIsVisible()"
|
|
@update:model-value="(value) => column.toggleVisibility(!!value)"
|
|
>
|
|
{{ column.id }}
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|