[Vue.js]高機能なテーブルライブラリ Grid.js を Vue.js で使う方法[Grid.js]

この記事をシェアする：

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件

昨年末から、たびたびご紹介しているJavaScriptライブラリ、
「Grid.js」。

とってもお手軽に
データのソート機能
ページネーション機能
を備えたデータテーブルを作成することができる
優れたJavaScriptライブラリです。
（↑JavaScriptライブラリと書きましたが正確には、
TypeScript製とのこと）

昨年の記事では、Grid.jsについて
通常のhtml上での導入方法と、
そこに独自classを当ててカスタマイズする方法について記事を書きました。

今回は、Grid.js を Vue.js 上で導入する方法について、書いていきたいと思います。

Grid.jsのインストール

ターミナルから次のように実行して、プロジェクトに
Grid.js をインストールします。

npm install gridjs-vue // npm i gridjs-vue でも可

※ なお、Vue.jsのインストールは済んでいるものとします。

プロジェクトに、Grid.jsを読み込む

次のように、Grid.js を表示させたい任意の .vue ファイルに import して、Grid.js を読み込みます。

<script>
import Grid from 'gridjs-vue';

export default {
  name: 'templateName',

  components: {
    Grid
  },

  data: () => ({
   // ...(省略)...
</script>

表示のさせ方

表示させたいデータは、次のように data として用意しておきます。

data: () => ({
  myCols: ['名前', 'ジャンル', '素晴らしさ'],
  myRows: [
    ['Vue', 'Frontend Framework', '★★★★★'],
    ['Vuetify', 'UI Framework', '★★★★★'],
    ['React', 'Frontend Framework', '★★★★★'],
    ['Gatsby', 'Static Site Genarator', '★★★★★'],
    ['Grid', 'Great Table Library', '★★★★★']
  ]
}),
// ...( mounted, computed, 等が続くイメージです )...

これを、html側(.vueファイルの単一コンポーネントではtemplate内)で
次のように記述して受け取ります。

<template>
  <grid :cols="myCols" :rows="myRows"></grid>
  <!-- :cols は v-bind:cols の省略形 -->
</template>

上記のコード全体

上記までのコードをつなげた全体像としては、次のようになります。

<template>
  <grid :cols="myCols" :rows="myRows"></grid>
  <!-- :cols は v-bind:cols の省略形 -->
</template>

<script>
import Grid from 'gridjs-vue';

export default {
  name: 'templateName',

  components: {
    Grid
  },

  data: () => ({
    myCols: ['名前', 'ジャンル', '素晴らしさ'],
    myRows: [
      ['Vue', 'Frontend Framework', '★★★★★'],
      ['Vuetify', 'UI Framework', '★★★★★'],
      ['React', 'Frontend Framework', '★★★★★'],
      ['Gatsby', 'Static Site Genarator', '★★★★★'],
      ['Grid', 'Great Table Library', '★★★★★']
    ]
  }),
  computed: {
    // ...(省略)...
  },
  methods: {
    // ...(省略)...
  },
};
</script>

<style lang="scss" scoped>
  // ...(省略)...
</style>

↑Vue.jsの単一コンポーネントの場合、上記のようなイメージで使用が可能です。

これで、簡易的ではありますが
Vue.js でも Grid.js のデータテーブルを扱うことができるようになります。
（ Vue.jsを使い慣れている方にとっては、見ればわかる & 細かな解説は不要と思いますので、computed がなんなのとか methods がなんなの、という部分の説明は割愛します。）

公式の解説ページ(渡すことができる他の値も書かれています)

Grid.js公式の解説ページは以下になります。
上で書いた基本の :cols と :rows のほか、
渡すことができる他の値についてもページ下部に書かれています。
Vue | Grid.js

この記事のまとめ

今回は、とってもお手軽に
データのソート機能
ページネーション機能
などを備えたデータテーブルを作成することができる
高機能なJavaScriptライブラリ Grid.js について、
Vue.js に読み込んで使用する方法について書きました。

Grid.jsは個人的に激推しライブラリのひとつですので、
今後も面白そうな用例を思いつき次第、記事を書いていきたいと思っています。

今年もどうぞ、よろしくお願いいたします。

この記事をシェアする：