Vue.draggable: Unable to use vuedraggable with data table in vuetify

[varadekd]

First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md

Step by step scenario

Below is my implementation

<v-data-table  hide-actions :headers="header" :items="items" class="elevation-1" item-key="key">
<draggable v-model="items">
              <template slot="items" slot-scope="props">
                  <tr>
                    <td v-html="props.index + 1"></td>
                    <td v-html="props.item.name"></td>
                    <td> 
                        <v-tooltip bottom v-if="props.item.isMethod">
                          <v-icon >details</v-icon>
                        </v-tooltip>
                    </td>
                  </tr>
              </template>
              <template slot="expand" slot-scope="props">
                <span v-if="testscript._id" >
                    <v-data-table :items="testscript.steps" hide-actions style="margin-left:25px">
                      <template slot="headers" slot-scope="props">
                        <tr>
                          <td>Serial</td>
                          <td>Step Name</td>
                        </tr>
                      </template>
                      <template slot="items" slot-scope="props">
                        <td v-html="props.index"></td>
                        <td v-html="props.item.name"></td>
                      </template>
                    </v-data-table>
                </span>
                <span v-else>
                  <component style="width:100%;" :user="testsession.user" :basicDetail="props.item" :recording="true" :codeKey="props.item.codeKey" :xpathKey="props.item.xpathKey" :userData="userDataForStep" :step="currentStepFromNerve" :element="currentElementFromNerve" :language="language" :theme="theme" :readOnly="readOnly" :is="componentSelected" />
                </span>
              </template>
</draggable>
            </v-data-table>

Entries are not shown in the tbale. Can someone please tell me how can I implement draggable in vuetify datatbale.

[David-Desmaisons]

Please adress this kind of question on stackoverflow.

[abhaywawale]

@varadekd See this See this

[varadekd]

@abhaywawale I cannot find anything related to data tables

[abhaywawale]

@varadekd cause it will be done in 2nd part. The draft is ready and will be out in next 2-3 days. Depends on John Leider.

[varadekd]

@abhaywawale Okay, Thanks

[indusbull]

@abhaywawale Is part 2 already been published?

[abhaywawale]

@indusbull It is scheduled for Jul 20, 8:00am. Make sure you subscribe here.

[abhaywawale]

@indusbull @varadekd The part II with the Data Table functionality is released. Please check it here.
drag-n-drop in Vuetify — Part II

[indusbull]

@abhaywawale thanks for posting the work around solution. I was struggling withe same issue. I ended up doing something similar by following this example

[varadekd]

@abhaywawale Thanks man

[mike-seekwell]

@abhaywawale did you figure out how to drag and drop columns?

[atomboulian]

Yes, drag and drop columns would be amazing without having to recreate the selection checkbox stuff and hooking into the default headers

[dora-gt]

@abhaywawale great article.