I have a parent v-data-table with expandable rows. Each row item has then its own v-data-table.
What I am trying to achieve: I aim to move an element from a nested v-data-table within one row of the parent v-data-table to the child v-data-table located in another row of the same parent v-data-table.
This essentially means transferring an item from one sub-table to another within the overarching data table structure. (Rephrase using GPT)
Here's a simple code for the v-data-table structure:
<v-data-table
:headers="headers"
:items="pools"
:expanded.sync="expanded" class="elevation-1" show-expand
:single-expand="false" item-key="group" dense
>
<template v-slot:item.poolId="{ item }">
<span style="margin-left: 30px">
{{ item.poolId }}
</span>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<v-data-table
:headers="subHeaders"
:items="item.group"
>
<template v-slot:item.pickUpDateTimeUTC>
{{ formatDateTimeWithTimeZone(item.pickUpDateTimeUTC,item.timeZoneString,item.timeZone) }}
</template>
</v-data-table>
</td>
</template>
</v-data-table>
I have removed my draggable code since it was not working. So that it does not cause any confusion for the original code.
This is my code:
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<v-data-table
:headers="subHeaders"
:items="item.group"
>
<template v-slot:item="childItem">
<draggable v-model="childItem.item.group">
<tr>
<td>{{ childItem.item.memberId }}</td>
<td>{{ childItem.item.memberFullName }}</td>
<td>{{ formatDateTimeWithTimeZone(childItem.item.pickUpDateTimeUTC, childItem.item.timeZoneString, childItem.item.timeZone) }}</td>
<td>{{ childItem.item.pickUpAddress }}</td>
<td>{{ childItem.item.dropOffAddress }}</td>
<td>{{ childItem.item.specialRequirment }}</td>
</tr>
</draggable>
</template>
</v-data-table>
</td>
</template>
This is how it looks, the headers and items do not align but it's draggable: