VueJS-DraggableColumn_Table

by mtambulut

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://use.fontawesome.com/a112fe1b1b.js"></script>
<div id="app" class="container">
  <table class="table">
    <thead v-draggable="columns">

      <template v-for="column in columns">          
        <th is="table-head" :column="column" :sort="sort" v-on:sortcolumn="sortCol" ></th>
      </template>
    </thead>
    <tbody>
      <tr is="row-flight" v-for="(flight,index) in filteredData" :key="flight" :flight="flight" :columns="columns">
      </tr>
    </tbody>
  </table>
</div>

CSS

.draggable {
  cursor: move;
}

JavaScript

//VueJS kendi draggable attribute'ten faydalanıyoruz
Vue.directive("draggable", {
  inserted: function(el, binding, a) {
  //SortableJS yardımıyla sorting datalarını burada bind ediyoruz
  // Ve Column draggable özelliğini burada kazanıyor.
    Sortable.create(el, {
      draggable: ".draggable",
      onEnd: function(e) {
				debugger;
        var clonedItems = a.context[binding.expression].filter(function(item) {
          return item;
        });
        clonedItems.splice(e.newIndex, 0, clonedItems.splice(e.oldIndex, 1)[0]);
        a.context[binding.expression] = [];
        Vue.nextTick(function() {
          a.context[binding.expression] = clonedItems;
        });
      }
    });
  }
});

//Table column'ları burada tanımladığımız component yardımıyla
// html tarafında is="table-head" diyerek çağırıp basıyoruz.
Vue.component("table-head", {
  template: `
    <th 
        v-show="!column.hide" 
        :class=\"{draggable: column.canMove}\"
        @click="sortMe({column: column, event: true})"  
    >
      {{column.name}}
      <i v-if="column.sortable && sort.on === column.id"
          class="fa"
          :class="{'fa-sort-amount-asc': sort.direction === 'asc',
          'fa-sort-amount-desc': sort.direction === 'desc'}"
          aria-hidden="true">
      </i>    
    </th>`,
  props: ["column", "sort"],
  methods: {
    sortMe: function(data) {
      this.$emit("sortcolumn", data);
    }
  }
});

//Table row'ları burada tanımladığımız component yardımıyla
// html tarafında is="row-flight" diyerek çağırıp basıyoruz.
Vue.component("row-flight", {
  template: `
    <tr>
      <template v-for="column in columns">
        <td v-show="!column.hide">{{flight[column.id]}}</td>
      </template>
    </tr>
`,
  props: ["flight", "columns"]
});

var myColumns = [
    { name: "Airport", id: "airport", canMove: true, sortable: true },
    { name: "STD", id: "std", canMove: true, sortable: true },
    { name: "ETD", id: "etd", canMove: true, sortable: true },
    {...