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

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

![截屏2022-05-30 下午10.51.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269934/89e755e2-e9a9-aba8-7f6c-8b8ad5f08d1c.png)

しかも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
https://hc200ok.github.io/vue3-easy-data-table-doc/

# 使い方
### Install
```js
npm install vue3-easy-data-table
// or
yarn add vue3-easy-data-table
```

### Regist
```js
import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

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

### Use
```js
<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>
```
# 機能
1. [Buttons pagination](#buttons-pagination)
2. [Dense](#dense)
3. [Item slot](#item-slot)
4. [Multiple selecting](#multiple-selecting)
5. [Single field sorting](#single-field-sorting)
6. [Searching](#searching)
7. [Server side paginate and sort](#server-side-paginate-and-sort)
8. [Theme color](#theme-color)


### Buttons pagination

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/buttons-pagination.gif"  />

[Online preview](https://rfc8kw.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/buttons-pagination-rfc8kw?file=/src/App.vue:125-150)

### Dense
<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/dense.png"/>

[Online preview](https://7sjib3.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dense-7sjib3?file=/src/App.vue)


### Item slot
<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/item-slot.png"  />

[Online preview](https://65tc9v.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/item-slot-65tc9v?file=/src/App.vue)


### Multiple selecting
<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/multiple-selecting.png"  />

[Online preview](https://bhe0r9.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/multiple-selecting-bhe0r9?file=/src/App.vue)


### Single field sorting

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/single-sorting.gif"  />

[Online preview](https://rjniui.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/single-field-sorting-rjniui?file=/src/App.vue)

### Searching


<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/searching.png"  />

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/searching-8egujm?file=/src/App.vue)

### Server side paginate and sort

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/server-side-paginate-and-sort.png"  />

[Online preview](https://mif1nr.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/server-side-paginate-and-sort-mif1nr?file=/src/App.vue)


### Theme color

<img src="	https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/theme-color.png"  />

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/theme-color-89ps64?file=/src/App.vue)

# Documentation
上記のように、簡単にキャプチャとpreview linkを貼りましたが、詳しくはこちらのdocumentationを参照してください：https://github.com/HC200ok/vue3-easy-data-table/blob/main/README.md

# 最後に
利用される途中で不具合があたり、上記以外の欲しい機能があたりする場合、issueの提出をお願いいたします、また、pull requestも大歓迎です。:pray: