【Vuetify】レスポンシブ対応のテーブルを作成する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vuetifyでレスポンシブ対応のテーブルを作成する方法をご紹介しています。

Vuetifyでテーブルをレスポンシブ対応にしたいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

結論：データテーブル(Data tables)を使おう！

Vuetifyにはテーブルが二種類用意されています。名称は下記の通りです。（リンク先はVuetifyの公式ドキュメントです。）

それぞれの特徴を挙げますと、

シンプルテーブル(Simple tables)

v-simple-tableコンポーネントは、table要素を囲うラッパーコンポーネントです。コンポーネント内ではtable、thead、tbody、tr、th、tdなど標準のテーブル要素を使用することができます。

データテーブル(Data tables)

v-data-tableコンポーネントは、表形式のデータを表示するためのコンポーネントです。表の中でデータのソートや検索、ページネーションなどの機能が実装できます。

それぞれ使いながらどちらがレスポンシブに向いてるかなと試したところ…なんと！

データテーブルは標準でレスポンシブに対応していました。何気なくウィンドウサイズを狭くしたらレスポンシブ用のデザインにぬるっと切り替わってくれました。（私の1時間が…?）

というわけで完成したレスポンシブ対応のテーブルを見てみましょう！

レスポンシブ対応のテーブルを作成する

制作時点ではVue CLIで構築していましたが、CodePenで試してみるとCDNでも動いたので、サンプルはCDNを使って作成していきます。まずは公式ドキュメントのこちらに書いてあるように、必要なファイルを読み込みましょう！

CSSファイル

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css">

JSファイル

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

ファイルを読み込んだら実際にテーブルを作っていきます。公式ドキュメントのデータテーブルの内容を参考にコーディングしていきます。

HTML

<div id="app">
  <v-app>
    <v-data-table
      :headers="headers"
      :items="members"
      :items-per-page="5"
    ></v-data-table>
  </v-app>
</div>

JS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        { text: '名前', value: 'name', align: 'start', sortable: false, },
        { text: '性別', value: 'gender' },
        { text: '年齢', value: 'age' },
        { text: 'メールアドレス', value: 'email' },
        { text: '電話番号', value: 'phone' },
      ],
      members: [
        { name: '田中一郎', gender: '男性', age: 20, email: 'test01@example.jp', phone: '0120-123-456', },
        { name: '田中二郎', gender: '男性', age: 25, email: 'test02@example.jp', phone: '0120-123-456', },
        { name: '田中三郎', gender: '男性', age: 30, email: 'test03@example.jp', phone: '0120-123-456', },
        { name: '田中四郎', gender: '男性', age: 35, email: 'test04@example.jp', phone: '0120-123-456', },
        { name: '田中五郎', gender: '男性', age: 40, email: 'test05@example.jp', phone: '0120-123-456', },
        { name: '田中六郎', gender: '男性', age: 45, email: 'test06@example.jp', phone: '0120-123-456', },
        { name: '田中七郎', gender: '男性', age: 50, email: 'test07@example.jp', phone: '0120-123-456', },
        { name: '田中八郎', gender: '男性', age: 55, email: 'test08@example.jp', phone: '0120-123-456', },
        { name: '田中九郎', gender: '男性', age: 60, email: 'test09@example.jp', phone: '0120-123-456', },
        { name: '田中十郎', gender: '男性', age: 65, email: 'test10@example.jp', phone: '0120-123-456', },
      ],
    }
  },
})

ここまで入力してページにアクセスすると、下記のデモのようなテーブルが表示されます。

See the Pen Responsive Data Table | Vuetify by ryohei (@intotheprogram) on CodePen.

テーブルが表示されたらウィンドウサイズを600px以下にしてみてください。スマホデザインのテーブルが表示されるかと思います！

上記デモの右上にある「EDIT ON CODEPEN」を押していただくと、CodePenにアクセスできますので、そちらでもご確認いただけます！

最後に

Vuetifyのドキュメントは情報がわかりやすくまとめられていて読みやすいのですが、データテーブルのレスポンシブ対応については触れられていなかったので、もしかして非対応なのかな、と思ったのですが…テーブルを組み込んでみると普通に対応していました！ますますVuetifyが好きになりました。今後もたくさん使わせていただきます！

以上、Vuetifyでレスポンシブ対応のテーブルを作成する方法のご紹介でした！