【2023/1/19時点】Vuetify3 (Labs) でv-data-tableが使えるようになったらしい

はじめに

こんにちは、個人開発で Vue3+Vuetify3 の組み合わせを使っていたところ、2023年1月にリリースされた v3.1.0　Valkyrie においても v-data-tableのコンポーネントがないことが判明、どこかの記事でv3.1系からは追加コンポーネントとして実装されると聞いてた記憶があったのですが、どうやら未実装の模様、仕方なく別コンポーネントで代用するかあるいはVue2+Vuetify2 でもいいかなと思っていたところ下記のツイートを発見！

正式版ではまだでも、一応お試しづかいができるようです。おそらく正式なリリースももうすぐあると思うので今回は先行して試してみました。

本題

導入方法については、公式ドキュメントや他の方の記事を参考にすればいけると思うので、ここでは簡単に記載するだけに留めておきます。尚、従来のv-data-tableとAPIの仕様が結構変わっているようです。こちらのLabsのドキュメントに詳細があるようなので参照ください。

Vuetify Labs

プロジェクトの作成

shell

# プロジェクトの作成(yarnが必要です)
yarn create vuetify

# プロジェクト名を聞かれるので入力
# presetを聞かれるので選択
# TypeScript使用の有無を聞かれるので選択
# パッケージマネージャーを聞かれるので選択

ほぼデフォルト設定ですが、パッケージマネージャーに関してはyarnに慣れていないこともあり、npmにしています。

使い方

これも公式ドキュメントからの引用です。Vuetify3はリリースされたばかりで、公式ドキュメントといえど行ったり来たりと探すのが結構大変でした。。。

src/plugings/vuetify.js

/**
 * plugins/vuetify.js
 *
 * Framework documentation: https://vuetifyjs.com`
 */

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Composables
import { createVuetify } from 'vuetify'

// VDataTableのインポートを新規追加
import { VDataTable } from 'vuetify/labs/VDataTable'

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  // componentsを新規追加
  components: {
    VDataTable,
  },
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#1867C0',
          secondary: '#5CBBF6',
        },
      },
    },
  },
})

尚、v-data-tableに限らずLabsにある全てのコンポーネントを一括で使いたい場合は該当行を以下のように修正

vuetify.js

// import { VDataTable } from 'vuetify/labs/VDataTable'
import * as labs from 'vuetify/labs/components'

  // components: {
    // VDataTable,
  // },
  components: {
    ...labs,
  },

これで問題なくv-data-tableが使えます。試しに初期ページに公式ドキュメントで紹介されているテーブルを加えてみます。

src/components/HellowWorld.vue

<template>
  <v-container class="fill-height">
    <v-responsive class="d-flex align-center text-center fill-height">
      
      <!-- 長いので省略 -->

      <v-data-table
        v-model:items-per-page="itemsPerPage"
        :headers="headers"
        :items="desserts"
        item-value="name"
        class="elevation-1"
      ></v-data-table>
      
      <!-- 長いので省略 -->

    </v-responsive>
  </v-container>
</template>

<script>
  export default {
    data () {
      return {
        itemsPerPage: 5,
        headers: [
          {
            title: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            key: 'name',
          },
          { title: 'Calories', align: 'end', key: 'calories' },
          { title: 'Fat (g)', align: 'end', key: 'fat' },
          { title: 'Carbs (g)', align: 'end', key: 'carbs' },
          { title: 'Protein (g)', align: 'end', key: 'protein' },
          { title: 'Iron (%)', align: 'end', key: 'iron' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1',
          },
          // 長いので省略
        ],
      }
    },
  }
</script>

開発サーバーを立ち上げると問題なくテーブルが差し込まれていることが確認できます。