Vue.js 3を使ってTableをカスタマイズしていく（基本）

はじめに

Vue.js 3系を使ってテーブルを色々カスタマイズして行こうと思います。

今回は、ベースとなるテーブルをVue.jで構築します。
単にHTMLを記述するのではなく、列と行をそれぞれデータとしてVueに持たせてDOMにレンダリングさせます。

環境

この記事は、以下の管理人の検証環境にて記事にしています。

完成ソースコード

<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(label, key) in header" :key="key">{{label}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="item.no">
        <td v-for="(label, key) in header" :key="'td'+key+item.no">{{item[key]}}</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

const App = {
  data() {
    return {
      header: {no:'No', name:'Name', email:'E-Mail'},
      items:[
        {no:1, name:'Daiki', email:'[email protected]'},
        {no:2, name:'Naoki', email:'[email protected]'},
        {no:3, name:'Yuki', email:'[email protected]'},
        {no:4, name:'Aoi', email:'[email protected]'},
        {no:5, name:'Hnako', email:'[email protected]'},
        {no:6, name:'Momo', email:'[email protected]'},
        {no:7, name:'Taro', email:'[email protected]'}, 
        {no:8, name:'Shiori', email:'[email protected]'},
        {no:9, name:'Jiro', email:'[email protected]'},
        {no:10, name:'Sigeru', email:'[email protected]'},
      ]
    }
  }
}
Vue.createApp(App).mount('#app');

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

See the Pen
Vue.jsを使ってTableをカスタマイズしていく（基本編） by カバの樹 (@kabanoki)
on CodePen.0

解説

step
1完成形イメージのHTMLを構築する

最終的に形となっていて欲しいHTMLを構築します。

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
      <th>EMail</th>
   </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Daiki</td>
      <td>[email protected]</td>
   </tr>
   <tr>
     <td>2</td>
     <td>Naoki</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>3</td>
     <td>Yuki</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>4</td>
     <td>Aoi</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>5</td>
     <td>Hnako</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>6</td>
     <td>Momo</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>7</td>
     <td>Taro</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>8</td>
     <td>Shiori</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>9</td>
     <td>Jiro</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>10</td>
     <td>Sigeru</td>
     <td>[email protected]</td>
   </tr>
  </tbody>
</table>

step
2Vue.jsを使って見出しをDOM出力

Step１で作ったHTMLの見出しをVue.jsを使ってDOM出力していきます。

まずCDNでVue.jsを呼び出します。

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

見出しとなるデータをObjectで、Vueのdataに持たせます。

const App = {
  data() {
    return {
      header: {no:'No', name:'Name', email:'E-Mail'}
    }
  }
}

Step１のHTMLを下記のように書き換えます。

<div id="app">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th v-for="(label, key) in header" :key="key">{{label}}
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Daiki</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Naoki</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Yuki</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

最後にVueをマウントしてDOM出力します。

Vue.createApp(App).mount('#app');

step
3Vue.jsを使ってデータ行をDOM出力

テーブルのデータ行を、Vueのdataに持たせて出力します。

Step2で作成したAppオブジェクトのdataに行のデータitemsを設定します。

const App = {
  data() {
    return {
      header: {no:'No', name:'Name', email:'E-Mail'},
      items:[
        {no:1, name:'Daiki', email:'[email protected]'},
        {no:2, name:'Naoki', email:'[email protected]'},
        {no:3, name:'Yuki', email:'[email protected]'},
        {no:4, name:'Aoi', email:'[email protected]'},
        {no:5, name:'Hnako', email:'[email protected]'},
        {no:6, name:'Momo', email:'[email protected]'},
        {no:7, name:'Taro', email:'[email protected]'}, 
        {no:8, name:'Shiori', email:'[email protected]'},
        {no:9, name:'Jiro', email:'[email protected]'},
        {no:10, name:'Sigeru', email:'[email protected]'},
      ]
    }
  }
}

Step2のHTMLを下記のように書き換えます。

<div id="app">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th v-for="(label, key) in header" :key="key">{{label}} 
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="item.no">
        <td v-for="(label, key) in header" :key="'td'+key+item.no">{{item[key]}}</td>
      </tr>
    </tbody>
  </table>
</div>

これで基本となるテーブルは完成となります。

さいごに

今後、この記事の内容をベースに色々カスタムしていく記事を書こうと思っています。

興味がある方は、下記のまとめよりご覧ください。