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/[email protected]/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

step
2Script

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

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

step
3HTML

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

columnsをkeyにして、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>

にします。

サンプル

See the Pen Vue.jsで列の移動ができるテーブルを実装する by カバの樹 (@kabanoki) on CodePen.dark

専用ページはこちら

さいごに

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

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

今日はこの辺で－

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

はじめに

環境

導入

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

サンプル

さいごに