logout handling

src/components/my-table.vue

@@ -2,15 +2,19 @@
 
     <div class="My-Table">
         <table>
-            <tr>
-                <th v-for="(c, i) in columns" :key="i">{{ c.heading }}</th>
-            </tr>
-            <tr v-for="(r, ri) in rows" :key="ri">
-                <td v-for="(c, ci) in columns" :key="ci">
-                    <span v-if="c.prop">{{ r[c.prop] }}</span>
-                    <span v-else-if="c.render">{{ c.render(r) }}</span>
-                </td>
-            </tr>
+            <thead>
+                <tr>
+                    <th v-for="(c, i) in columns" :key="i">{{ c.heading }}</th>
+                </tr>
+            </thead>
+            <tbody is="transition-group" name="list">
+                <tr v-for="(r, ri) in rows" :key="ri">
+                    <td v-for="(c, ci) in columns" :key="ci + 'c'">
+                        <span v-if="c.prop">{{ r[c.prop] }}</span>
+                        <span v-else-if="c.render">{{ c.render(r) }}</span>
+                    </td>
+                </tr>
+            </tbody>
         </table>
     </div>
 
@@ -38,4 +42,18 @@ export default {
         }
     }
 }
-</script>
+</script>
+
+<style>
+.list-item {
+  display: inline-block;
+  margin-right: 10px;
+}
+.list-enter-active, .list-leave-active {
+  transition: all 1s;
+}
+.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>