JSFiddle - React, Tailwind, and code Playground

by karthick Chandran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/buefy.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.2/Sortable.min.js"></script>

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<!-- Add this after vue.js -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
   <b-table v-sortable="sortableOptions" striped hover :items="items"></b-table>
</div>
<!-- End of area that is impacted by VueJS -->

JavaScript

const createSortable = (el, options, vnode) => {

  return Sortable.create(el, {
    ...options
  });
};

const sortable = {
  name: 'sortable',
  bind(el, binding, vnode) {
    const table = el;    
    table._sortable = createSortable(table.querySelector("tbody"), binding.value, vnode);
  }
};

const items = [
  { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
  { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
  { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
  { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]

var app = new Vue({
  el: '#app',
  directives: { sortable },
  data () {
    return {
      items: items,
      sortableOptions: {
        chosenClass: 'is-selected'
      },
    }
  }
  })