忘れないように記録しとこ

カバの樹

Vue.jsでテーブルの列移動を実装する

はじめに

いつもの如くクライアントからデータ用テーブルの列を並び替えしたいとの要望がありました。
遥か昔の記憶で、Vue.Draggableを使ってサンプルを作った記憶があったので、引っ張り出してみました。

せっかくなので、記事にしようと思います。

 

 

環境

この記事は、以下の管理人の検証環境にて記事にしています。

vue.js 2.5.8
Vue.Draggable 2.24.3

 

導入

今回のサンプルはVue.Draggableが必要なので、基本的な使い方は下記を参考にしてください。

参考
Vue.jsでドラッグ&ドロップするなら「Vue.Draggable」がおすすめ

Vue.Draggableは、Vue.js製のドラッグ&ドロップコンポートネントライブラリです。
現存するVue.js製のドラッグ&ドロップライブラリとしては、最大の人気を誇ります。
コンパイルを必要としないUMD用のJSファイルが用意されているので、jQueryからの切り替えも容易に行う事が可能です。
単純にドラッグ&ドロップの機能が欲しければ、このライブラリを選んでおけば問題無いはずです。
主な使用用途の並び順を変更するのはもちろん、複数のエリアを移動することが可能です。
さらにスマホにも対応しており、タッチイベントによる移動も可能となっています。
基本的な使い方、ちょっとした応用などコピペで1分のサンプルを公開しています。

続きを見る

 

step.1 ライブラリの呼び出し

今回はCDNを使用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

 

step.2 Script

列用の配列データcolumnsを用意します。
列に合わせて行のデータusersをオブジェクト形式で用意します。

new Vue({
  el: '#app',
  data: {
    columns: [
     'id',
     'name',
     'e-mail',
     'message'
    ],
    users: [
      {id:"1", name:"name1", "e-mail":"info@hoge.com", message:"hellow world"},
      {id:"2", name:"name2", "e-mail":"info@hoge.com", message:"hellow cooking"},
      {id:"3", name:"name3", "e-mail":"info@hoge.com", message:"hellow speak"},
      {id:"4", name:"name4", "e-mail":"info@hoge.com", message:"hellow call"},
      {id:"5", name:"name5", "e-mail":"info@hoge.com", message:"hellow jump"},
      {id:"6", name:"name6", "e-mail":"info@hoge.com", message:"hellow stand"},
      {id:"7", name:"name7", "e-mail":"info@hoge.com", message:"hellow down"}
    ]
  },
}); 

 

step.3 HTML

コンパイルを経由しない場合は、下記のソースのようにisを使ってdraggableコンポーネントを指定する必要があります。

columnskeyにして、userの列を表示します。

<div id="app">
  <table class="table">
    <thead>
      <tr tag="tr" is="draggable" v-model="columns">
        <th v-for="column in columns">{{column}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users">
        <td v-for="(column, i) in columns" :key="user[column]+i">{{user[column]}}</td>
      </tr>
    </tbody>
  </table>
</div>

 

注意

ES6等で記述するならば、


<tr tag="tr" is="draggable" v-model="columns">
<th v-for="column in columns">{{column}}</th>
</tr>


<draggable v-model="columns" tag="tr">
<th v-for="(column, i) in columns" :key="column">{{column}}</th>
</draggable>

にします。

 

サンプル

 

 

さいごに

Vue.jsでテーブルの列を並び替えするという記事でした。

他にもドラッグした後に、列の順番をブラウザに保存する方法などのアイデアもあるので、気が向いた時に記事にしたいと思います。

 

今日はこの辺で-

  • B!