More than 1 year has passed since last update.

Vue3でdata tableのcomponentを作りました

Last updated at 2022-06-06Posted at 2022-05-30

背景

最近社内プロジェクトのVue2からVue3へのmigration作業をやっております。既存のVue2バージョンのプロジェクトにて、Vuetifyのdata table componentを使っていますが、Vue3の場合、最新のVutify3 Beta（vue3 version）を本番環境で使うのはまだ厳しいそうです：

しかもdata table componentはまだリリースされていない。それで、Vuetify2のdata table componentのAPIとUIを参照して、vue3-easy-data-tableというcomponentを作りました。私と同じくVutify3のdata table componentのリリースを待っている方がいらっしゃいましたら、まずこのvue3-easy-data-tableを使ってみたらどうでしょうか？

Repository linkはこちらです：https://github.com/HC200ok/vue3-easy-data-table

Website

使い方

Install

npm install vue3-easy-data-table
// or
yarn add vue3-easy-data-table

Regist

import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);

Use

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  />
</template>

<script lang="ts">
import type { Header, Item } from "vue3-easy-data-table";

export default defineComponent({
  setup() {
    const headers: Header[] = [
      { text: "Name", value: "name" },
      { text: "Height (cm)", value: "height", sortable: true },
      { text: "Weight (kg)", value: "weight", sortable: true },
      { text: "Age", value: "age", sortable: true }
    ];

    const items: Item[] = [
      { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
      { "name": "James", "height": 180, "weight": 75, "age": 21 },
      { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
    ];

    return {
      headers,
      items
    };
  },
});
</script>