vue-good-tableでfilter付きの表を作成する方法 #Vue.js

検索とフィルタとソートが揃った表が必要になったのでメモ

index.html

<html>
  <head>
    <title>hostlist</title>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-good-table.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./vue-good-table.min.css">

  </head>

  <body>
    <div id="app">
      <vue-good-table 
        :columns="columns" 
        :rows="rows"  
        :fixed-header="true"
        :line-numbers="true"
        :group-options="{enabled: true}"
        :search-options="{enabled: true, trigger: 'enter', skipDiacritics: true}"
        :pagination-options="{enabled: true, mode: 'records', perPage: 20}"
        styleClass="vgt-table condensed"
        max-height="800px"
      />

        <template slot="table-row" slot-scope="props">
          <span v-if="props.column.field == 'host'">
            <a :href="`${props.row.type}://${props.row.ip}`"> {{props.row.host}} </a>
          </span>
          <span v-else>
            {{props.formattedRow[props.column.field]}}
          </span>
        </template>

      </vue-good-table>
    </div>  


    <script type="text/javascript" src="./table.js"></script>

  </body>
</html>

table.js



  var app = new Vue({
    el: '#app',
    data:{
      columns: [
        {
          label: 'Hostname',
          field: 'host',
          filterOptions: {enabled: true}
        },
        {
          label: 'Type',
          field: 'type',
          filterOptions: {enabled: true}
        },
        {
          label: 'IP',
          field: 'ip',
          filterOptions: {enabled: true}
        },
        {
          label: 'ID/PW',
          field: 'idpw',
          filterOptions: {enabled: true}
        },
        {
          label: '備考',
          field: 'note',
          filterOptions: {enabled: true}

        },
      ],

      rows: [
        {
          mode: 'span', 
          label: 'VOD service', 
          html: false, 
          children: [
            { host:"vod000-sv01", type:"ssh", ip:"10.0.0.1", idpw:"hoge/hoge", note:"streeming server"},
            { host:"vod000-sv02", type:"ssh", ip:"10.0.0.2", idpw:"hoge/hoge", note:"streeming server"},
            { host:"vod000-sv03", type:"telnet", ip:"10.0.0.3", idpw:"hoge/hoge", note:"streeming server"},
            { host:"vod000-sv04", type:"http", ip:"10.0.0.4", idpw:"hoge/hoge", note:"streeming server"},
          ]
        },
        {
          mode: 'span', 
          label: 'Strage Service', 
          html: false, 
          children: [
            { host:"str000-str05", type:"telnet", ip:"10.0.0.1", idpw:"hoge/hoge", note:"strage server"},
            { host:"str000-str06", type:"http", ip:"10.0.0.2", idpw:"hoge/hoge", note:"strage server"},
            { host:"db000-str07", type:"https", ip:"10.0.0.3", idpw:"hoge/hoge", note:"DB server"},
            { host:"db000-str08", type:"ssh", ip:"10.0.0.4", idpw:"hoge/hoge", note:"DB server"},
          ]
        },
      ],

      searchOptions: {
        enabled: true,
        placeholder: '機器を検索します',
      }
    }
  });

table.css

table.vgt-table {
    font-size: 10px;
    border-collapse: collapse;
    background-color: #fff;
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    border: 1px solid #dcdfe6;
}
.vgt-wrap {
    width: 80%;
    margin: 0 auto;
}
.vgt-wrap__footer {
    font-size: 10px;
    padding-top: 8px;
}

.vgt-wrap__footer.footer__row-count__label {
    font-size: 10;
}

.vgt-wrap__footer .footer__row-count__select {
    width: auto;
    font-size: 10pt;
    margin-left: 8px;
    padding: 3px;
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
}

form {
    display: block;
    margin-top: 0em;
    margin-block-end: 0em;
}

vue.js
vue-good-table.min.css
vue-good-table.min.js