DEV Community

Draggable table row with VueJS, Vuetify and SortableJS

Andrey Gaisinskii on June 21, 2020

TLDR At the bottom of the article you will find a link to the GitHub repo. Prologue Recently I have had to implement draggable rows for a vuetify...

Read full post

Alvaro Cánepa • Oct 14 '21

Great! this is what I was looking for...
Many thanks!

This is my implementation with dynamic columns:

<v-data-table
      :headers="headers"
      :items="arItems"
      :loading="loading"
      item-key="id"
      :show-select="false"
      :disable-pagination="true"
      :hide-default-footer="true"
    >
      <template #body="data">
        <draggable v-model="arItems" tag="tbody" @end="onReorder">
          <tr
            v-for="(item, index) in data.items"
            :key="`row.${index}`"
          >
            <template v-for="(col, idx) in data.headers">
              <td :key="`col.${index}.${idx}`">
                  <action-buttons
                    :path="path"
                    :item-id="item.id"
                    hide-view
                    @delete="deleteItem"
                    v-if="col.value == 'actions'"
                  />
                  <span v-else>{{ $_.get(item, col.value) }}</span>
              </td>
            </template>
          </tr>
        </draggable>
      </template>
    </v-data-table>

Giangola • Jan 6 '22

I have to Login to say thanks <3

Lambert Beekhuis • Dec 16 '20

Very interesting post. One question though: how to handle a 'drop'? What is triggered when you actually 'drop' something. If I make the list in a computed property with a getter and setter, no change is detected as the :list option using splice is used. When using the draggable :value option, it is not working...

So, how to handle it 'after the drop'?

Lambert Beekhuis • Dec 16 '20

A solution that works for me is adding the event-handler
@end="endDrag(props.items)"
in the element

Thanks, great!

Eugen • May 28 '21

For example:
@end="isDragging = false"

Paul / Appurist • Nov 23 '20

This post just saved my bacon on an important project. I had been back and forth on many alternatives, none of which was the combination needed, until I saw this article. Having the full source code example, especially PageTable.vue, along with your working example was instrumental and so extremely helpful. Very much appreciated that you took the time to document this solution here.

Andrey Gaisinskii • Nov 24 '20

I'm so glad that I could help you. Thanks for kind words!

juretopolak • Feb 14 '21

Shouldn't be data reactive with that I mean that the order of data should also change in the array?
This is the case with vuedraggable when using div or ul/li tags, but is not with this example using v-data-table.

dev-to-uploads.s3.amazonaws.com/i/...

Andrey Gaisinskii • Feb 19 '21

I'm not an expert in Vue/VueDevTools/Vuetify nor VueDraggable, but my question is: Why should it be reactive ? Because what we are doing is that we are using a wrapper library of SortableJS inside vuetify table component, there are no direct binding between vue/vuetify table component and VueDraggable library. We pass our array or items into vuetify table and then VueDraggable does its magic. If you want to do something upon table change you can use update event of VueDraggable, something like this:

   <v-data-table
      :headers="tableHeaders"
      :items="homePage.coupons"
      :loading="loading"
      item-key="id"
      :show-select="false"
      :disable-pagination="true"
      :hide-default-footer="true"
      class="page__table"
    >
      <template v-slot:body="props">
        <draggable
          :list="props.items"
          :handle="'.handle'"
          tag="tbody"
          @update="handleTableUpdate(props.items)"
        >
          <!-- other html here -->
        </draggable>
      </template>
    </v-data-table>