Implementing foreign packages

[AlbertReyRuelan]

I want to implement vuedraggable in vue3-easy-data-table. Is it possible to implement ?

It is possible to implement it per items such as this :

<template #item-match="item">
<draggable>
  <div v-if="item.items== 1">
    {{ 'Sample' }} 
  <div v-else-if="item.items== 3">
    {{ 'Sample2' }} 
  </div>
  <div v-else>
    {{ sample }} 
  </div>
</draggable>
</template>

But is there any way i can do this with all the items in the row attached? Implementing it outside template doesn't work. Something along like this code wherein we can customize the body prop.

 <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="props">
    <draggable
      :list="props.items"
      tag="tbody"
    >
      <tr
        v-for="(user, index) in props.items"
        :key="index"
      >
        <td>
          <v-icon
            small
            class="page__grab-icon"
          >
            mdi-arrow-all
          </v-icon>
        </td>
        <td> {{ index + 1 }} </td>
        <td> {{ user.id }} </td>
        <td> {{ user.name }} </td>
        <td> {{ user.username }} </td>
        <td> {{ user.email }} </td>
        <td> {{ user.website }} </td>
        <td>
          <v-icon
            small
            @click="editUser(user.id)"
          >
            mdi-pencil
          </v-icon>
        </td>
      </tr>
    </draggable>
  </template>
</v-data-table>

Source of sample code : https://dev.to/andynoir/draggable-table-row-with-vuejs-vuetify-and-sortablejs-1o7l VueDraggable Source : https://sortablejs.github.io/vue.draggable.next/#/table-example

[JackThomas]

@AlbertReyRuelan Did you manage to get this working or change your idea? Was wanting to do something similar

[AlbertReyRuelan]

@JackThomas Yep. Implement it like the one below. You need to overwrite the body slot and use v-for to iterate each items

     <Vue3EasyDataTable
        :rows-per-page="20"
        buttons-pagination
        :headers="headers"
        :items="items"
        item-key="name"
      >
      <template 
        v-slot:body="props">
        <draggable
          tag="tbody"
          class="table vue3-easy-data-table__body   vue3-easy-data-table__body tr[data-v-4d5f5020]"
          v-model="modelName"
          @end="onDropCallback"
          :modelValue="modelNames"
        >
          <template v-for="(item, key) in items" :key="key">
            <tr>
               <td></td>
            </tr>
          </template>
        </draggable>
      </template>

     </Vue3EasyDataTable>

[JackThomas]

@AlbertReyRuelan Thanks, that helped me get mine up and working!