VberAdminPlus/UI/VAP.VUE/src/components/table/partials/body/TableBody.vue

<script setup lang="ts">
import symbolKeys from "@@@/table/symbol"

import BodyTr from "@@@/table/partials/body/BodyTr.vue"
import BodyTreeTr from "@@@/table/partials/body/BodyTreeTr.vue"

const propOpts = inject(symbolKeys.body, {
	isTree: false,
	childrenField: "children",
	bodyClass: "fw-semibold text-gray-600"
})
const depth = 0
const rows = inject(symbolKeys.displayData, ref([]))
const tbody = ref<HTMLElement>()
const hasChildren = (row: any) => {
	return row[propOpts.childrenField] && row[propOpts.childrenField].length
}
</script>
<template>
	<tbody v-if="rows?.length > 0" ref="tbody" :class="propOpts.bodyClass">
		<template v-for="(row, i) in rows" :key="i">
			<BodyTr :row="row" :depth="depth" :index="i + 1">
				<template v-for="(_, name) in $slots" #[name]="{ row }">
					<slot :name="name" :row="row" />
				</template>
			</BodyTr>
			<template v-if="propOpts.isTree && hasChildren(row)">
				<BodyTreeTr
					:index="i + 1"
					:rows="row[propOpts.childrenField]"
					:childrenField="propOpts.childrenField"
					:depth="depth + 1">
					<template v-for="(_, name) in $slots" #[name]="{ row }">
						<slot :name="name" :row="row" />
					</template>
				</BodyTreeTr>
			</template>
		</template>
	</tbody>
</template>