0c732e71cf
- Fixed import error for `dnd-kit-vue` by installing the package. - Moved user navigation from sidebar to header, adding a dropdown for account options. - Added homepage and notification icons to the header. - Implemented sticky header functionality during scroll. - Grouped sidebar menu items under a "Master" label for better organization. - Updated relevant components and package.json to include new dependencies.
32 lines
913 B
Vue
32 lines
913 B
Vue
<script setup lang="ts">
|
|
import type { Row } from "@tanstack/vue-table"
|
|
import type { z } from "zod"
|
|
import type { schema } from "./DataTable.vue"
|
|
import { FlexRender } from "@tanstack/vue-table"
|
|
import { useSortable } from "dnd-kit-vue"
|
|
import {
|
|
TableCell,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
|
|
const props = defineProps<{ row: Row<z.infer<typeof schema>>, index: number }>()
|
|
|
|
const { elementRef, isDragging } = useSortable({
|
|
id: props.row.original.id,
|
|
index: props.index,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<TableRow
|
|
:ref="elementRef"
|
|
:data-state="row.getIsSelected() && 'selected'"
|
|
:data-dragging="isDragging"
|
|
class="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
|
|
>
|
|
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
|
|
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
|
|
</TableCell>
|
|
</TableRow>
|
|
</template>
|