fix: always show id for tables with children

Author: vis97c

packages/components-vue/src/components/table/Body.vue

@@ -1,12 +1,13 @@
 <template>
 	<tbody v-if="nodes.length" :class="classes">
 		<template v-for="(node, nodeIndex) in nodes" :key="nodeIndex">
+			<!-- Row -->
 			<tr
 				class="--txtAlign"
 				:class="[`--txtSize-${size}`, { ['is--selected']: selectedNodes[nodeIndex][0] }]"
 			>
 				<th
-					v-if="nodes.length > 1"
+					v-if="nodes.length > 1 || $slots.default"
 					class="--sticky"
 					:class="{ ['is--selected']: !!ordering['id'] }"
 					data-column-name="id"
@@ -174,7 +175,9 @@
 					</div>
 				</th>
 			</tr>
+			<!-- Row children (Nested table) -->
 			<template v-if="$slots.default">
+				<!-- Row children content -->
 				<tr class="no--hover --width-100">
 					<td :colspan="propertiesMeta.length + 2">
 						<div
@@ -194,6 +197,7 @@
 						</div>
 					</td>
 				</tr>
+				<!-- Row children actions (Acts as a divider of rows when children are hidden) -->
 				<tr class="no--hover">
 					<th class="--sticky --pX-10 --pY-5 --vAlign">
 						<div class="flx --flxRow --flx-end-center --gap-10 --bdr">

packages/components-vue/src/components/table/Head.vue

@@ -1,5 +1,6 @@
 <template>
 	<thead>
+		<!-- Action bar -->
 		<tr
 			v-if="(!isReadOnly && nodes.length > 1) || withDefaultSlot || $slots.headActions"
 			class="no--hover"
@@ -91,10 +92,11 @@
 				</table>
 			</td>
 		</tr>
+		<!-- Table header -->
 		<tr v-if="nodes.length" class="--txtAlign" :class="`--txtSize-${size}`">
 			<!-- TODO: define filters, filter table contents -->
 			<th
-				v-if="nodes.length > 1"
+				v-if="nodes.length > 1 || withDefaultSlot"
 				class="--sticky"
 				:class="{ ['is--selected']: sort && !!ordering['id'] }"
 				data-column-name="id"