Vuetify3のv-data-tableを試してみる

現時点では、v-data-tableが、Production Readyではなく、labs通して提供されています。

早速試してみましょう。

まず、vuetifyのアプリを作成してみましょう。

yarn create vuetify

アプリを起動

cd vuetify-project
yarn dev

参考

次、VDataTableをインポート

vuetify.js

import { VDataTable } from 'vuetify/labs/VDataTable'

export default createVuetify({
  components: {
    VDataTable,
  },
})

参考

v-data-tableを使用

App.vue

<template>
  <v-app>
    <v-main>
      <v-data-table
        :headers="headers"
        :items="desserts"
        item-value="name"
        class="my-table"
    ></v-data-table>
    </v-main>
  </v-app>
</template>

<script setup>
  const 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' },
  ];

  const desserts = [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1',
    },
    {
      name: 'Jelly bean',
      calories: 375,
      fat: 0.0,
      carbs: 94,
      protein: 0.0,
      iron: '0',
    },
  ];
</script>

参考

表示されましたよ

おまけに、一列目を固定

App.vue

<style scoped>
.my-table >>> th:nth-child(1) {
    position: sticky !important;
    position: -webkit-sticky !important;
    left: 0;
    z-index: 9999;
    background: white;
}
.my-table >>> tr td:nth-child(1) {
    position: sticky !important;
    position: -webkit-sticky !important;
    left: 0;
    z-index: 9999;
    background: white;
}
</style>