Ricardo Gonzalez
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>
|