Adding column dragging example

Author: David-Desmaisons

docs/app.js

@@ -40,7 +40,7 @@ let id = 1;
 export default {
   name: "footerslot",
   display: "Footer slot",
-  order: 10,
+  order: 11,
   components: {
     draggable
   },

example/components/footerslot.vue

@@ -40,7 +40,7 @@ let id = 1;
 export default {
   name: "headerslot",
   display: "Header slot",
-  order: 11,
+  order: 12,
   components: {
     draggable
   },

example/components/headerslot.vue

@@ -14,7 +14,7 @@ import nestedDraggable from "./infra/nested";
 export default {
   name: "nested-example",
   display: "Nested",
-  order: 9,
+  order: 19,
   components: {
     nestedDraggable
   },

example/components/nested-example.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="row">
+    <div class="col-8">
+      <h3>Draggable table</h3>
+
+      <table class="table table-striped">
+        <thead class="thead-dark">
+          <draggable v-model="headers" element="tr">
+            <th v-for="header in headers" :key="header" scope="col">
+              {{ header }}
+            </th>
+          </draggable>
+        </thead>
+        <tr v-for="item in list" :key="item.name">
+          <td v-for="header in headers" :key="header">{{ item[header] }}</td>
+        </tr>
+      </table>
+    </div>
+
+    <rawDisplayer class="col-2" :value="list" title="List" />
+
+    <rawDisplayer class="col-2" :value="headers" title="Headers" />
+  </div>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+export default {
+  name: "table-column-example",
+  display: "Table Column",
+  order: 8,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      headers: ["id", "name", "sport"],
+      list: [
+        { id: 1, name: "Abby", sport: "basket" },
+        { id: 2, name: "Brooke", sport: "foot" },
+        { id: 3, name: "Courtenay", sport: "volley" },
+        { id: 4, name: "David", sport: "rugby" }
+      ],
+      dragging: false
+    };
+  }
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 35px;
+}
+</style>

example/components/table-column-example..vue

@@ -13,7 +13,7 @@
         </thead>
         <draggable v-model="list" :element="'tbody'">
           <tr v-for="item in list" :key="item.name">
-            <th scope="row">{{ item.id }}</th>
+            <td scope="row">{{ item.id }}</td>
             <td>{{ item.name }}</td>
             <td>{{ item.sport }}</td>
           </tr>

example/components/table-example.vue

@@ -37,7 +37,7 @@ import draggable from "@/vuedraggable";
 export default {
   name: "third-party",
   display: "Third party",
-  order: 8,
+  order: 9,
   components: {
     draggable
   },