この記事は 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は個人的に激推しライブラリのひとつですので、
今後も面白そうな用例を思いつき次第、記事を書いていきたいと思っています。
今年もどうぞ、よろしくお願いいたします。