Problems with vuetify v-data-table

[fractalf]

Vue: v3.3.4 Vuetify: v3.3.16

When using vuetifys v-data-table you can customize the body slot

<v-data-table
    ...
>
    <template v-slot:body="props">
        <draggable
            ...
            tag="tbody"
        >
            <template #item="{element}">
                <tr>
                    <td>
                        {{ element.xxx }}
                    </td>
                </tr>
            </template>
        </draggable>
    </template>
</v-data-table>

The problem here is that you get 2 tbody tags, vuetify creates one (and let you custimize the content) and then draggable creates one...

Any idea on how to solve this or is it just not possible?

[fabioselau077]

Exactly the same problem here. I've been trying to solve it for 3 hours. Did you find any solution? Mine only renders everything in a single column, even though it has several tr -> td:

<v-data-table :headers="tableHeaders" :items="tableItems" :loading="loading" item-key="id" :show-select="false"
                :disable-pagination="true" :hide-default-footer="true" class="page__table">
                <template v-slot:body="{ items }">
                    <draggable :list="tableItems" tag="tbody">
                        <tr v-for="(user, index) in items" :key="index">
                            <td>
                                <v-icon small class="page__grab-icon">
                                    mdi-arrow-all
                                </v-icon>
                            </td>
                            <td> {{ index + 1 }} </td>
                            <td> {{ user.selectable.id }} </td>
                            <td> {{ user.selectable.name }} </td>
                            <td> {{ user.selectable.username }} </td>
                            <td> {{ user.selectable.email }} </td>
                            <td> {{ user.selectable.website }} </td>
                        </tr>
                    </draggable>
                </template>
            </v-data-table>

[fractalf]

No, I ended up ditching v-data-table completely and I'm slowly refactoring stuff away from vuetify..

[fabioselau077]

No, I ended up ditching v-data-table completely and I'm slowly refactoring stuff away from vuetify..

I saw in another issue that the guy abandoned v-data-table and was using v-table, did you test this alternative? I tried here and it didn't work

[AnsellC]

Try this:

       <VTable :headers="headers" :items="items">
                <template v-slot:default>
                    <thead>
                        <tr>
                            <th v-for="header in headers" :key="header.value">
                                {{ header.title }}
                            </th>
                        </tr>
                    </thead>
<draggable v-model="model" item-key="id" tag="tbody">
                        <template #item="{ element }">
                            <tr>
                                <td>{{ element.name }}</td>
                              
                            </tr>
                        </template>
                    </draggable>