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" class="container"> 

  <section>
    <b-table v-sortable="sortableOptions" 
             :data="data"
             @click="(row) => $toast.open(`Clicked ${row.first_name}`)">

      <template slot-scope="props">
        <b-table-column field="order" label="#" width="40" numeric>
          {{ props.row.order }}
        </b-table-column>

        <b-table-column field="codigo" label="Código">
          {{ props.row.codigo }}
        </b-table-column>

        <b-table-column field="cliente" label="Cliente">
          {{ props.row.cliente }}
        </b-table-column>

        <b-table-column field="direccion" label="Dirección">
          {{ props.row.direccion }}
        </b-table-column>
        
      </template>

    </b-table>
  </section>

</div>

JavaScript

Vue.use(Buefy.default);

const createSortable = (el, options, vnode) => {
  
  return Sortable.create(el, {
    ...options
  });
};

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

const example = {
  directives: { sortable },
  data() {
    return {
      sortableOptions: {
        chosenClass: 'is-selected'
      },
      data: [
        { 'order': 1, 'codigo': '1234', 'cliente': 'Carlos Sánchez Ruiz', 'direccion': 'Martínez de Compagnon 588' },
        { 'order': 2, 'codigo': '1826', 'cliente': 'Luis Chong Rodríguez', 'direccion': 'Santo Toribio de Mogrovejo 678' },
        { 'order': 3, 'codigo': '7728', 'cliente': 'Rosario Carranza Vega', 'direccion': 'Juan XXIII 216' },
        { 'order': 4, 'codigo': '6545', 'cliente': 'Andrés García Ríos', 'direccion': 'Fray Pedro Urraca 504' }
      ]
    }
  }
};

const app = new Vue(example);

app.$mount('#app');