problem with vue draggable width in table?

Question

I'm using vuedraggable inside a Bulma table, but it creates a styling problem:

It's not a problem of the Bulma table. I used this in my own table, and the same issue occurs.

Here is my code:

<table class="table is-fullwidth is-bordered">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>brand</th>
            <th>Date Created</th>
            <th colspan="2">Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>brand</th>
            <th>Date Created</th>
            <th colspan="2">Actions</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
        </tr>
        <draggable v-model="furds" :options="{group:'furds'}" @start="drag=true" @end="drag=false" @change="onChnage">

            <tr class="dragndrop" v-for="featured in furds">
                <td class="drag-icon"><i class="fa fa-arrows"></i></td>
                <td>{{ featured.name }}</td>
                <td>{{ featured.brand.name }}</td>
                <td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
                <td><a :href="`/manage/featured/${featured.id}`">View</a></td>
                <td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
            </tr>
        </draggable>
    </tbody>
</table>

Answer 1

Instead of wrapping tr with draggable,pass tbody as draggable element.

<draggable element="tbody" v-model="furds">

See the link for better understanding: https://jsfiddle.net/dede89/L54yu3L9/ (Example with table) (found in vue draggable official doc)

[[Update: full code(based on question)]]

<table class="table is-fullwidth is-bordered">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>brand</th>
            <th>Date Created</th>
            <th colspan="2">Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>brand</th>
            <th>Date Created</th>
            <th colspan="2">Actions</th>
        </tr>
    </tfoot>
    <draggable element="tbody" v-model="furds"> <!-- change here -->
        <tr>
            <td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
        </tr>
            <tr class="dragndrop" v-for="featured in furds">
                <td class="drag-icon"><i class="fa fa-arrows"></i></td>
                <td>{{ featured.name }}</td>
                <td>{{ featured.brand.name }}</td>
                <td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
                <td><a :href="`/manage/featured/${featured.id}`">View</a></td>
                <td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
            </tr>
        </draggable>
</table>
<script>
import draggable from "vuedraggable";
  export default {
      components: {
      draggable
    },
...
}
</script>

Answer 2

The styling issue occurs because vuedraggable uses a <div> as its root element by default, and that <div> (along with its contents) is stuffed into the first column of the table.

Solution: vuedraggable allows changing its root element with the tag property, so you could set it to tbody, replacing the existing <tbody> in the <table>:

<table>
  <!-- FROM THIS: -->
  <!--
  <tbody> 👈
    <draggable> 👈
      <tr v-for="featured in furds">
        ...
      </tr>
    </draggable>
  </tbody>
  -->

  <!-- TO THIS: -->
  <draggable tag="tbody">
    <tr v-for="featured in furds">
      ...
    </tr>
  </draggable>
<table>