vue-good-tableを触っていて便利かもと思った機能
今回はVue.jsにて使用可能なライブラリであるvue-good-tableについて、
便利と思った機能をいくつかご紹介します。
vue-good-tableの利用方法や簡単な操作方法
この記事でインストール方法などは紹介しませんので、
もし利用してみたいという方は下記のサイトを参考にしてみてください。
Empty state slot
公式：https://xaksis.github.io/vue-good-table/guide/configuration/#empty-state-slot
<vue-good-table
:columns="columns"
:rows="rows">
<div slot="emptystate">
This will show up when there are no rows
</div>
</vue-good-table>
この機能はvue-good-tableに表示するrowが存在しない場合、
slotに指定した要素を表示してくれる機能です。
使い所としては例えば、検索機能を使用して表示の絞り込みを行った際、
検索結果が0件だった場合に「検索結果は0件です」と表示するために使用できますね。
rtl
公式：https://xaksis.github.io/vue-good-table/guide/configuration/#rtl
<vue-good-table
:columns="columns"
:rows="rows"
:rtl="true">
</vue-good-table>
この機能は、テーブル内に表示する要素を右寄せの表示に切り替えます。
数値の表示を行う際など、意図して右寄せに配置したい場合に使用すると良いかもしれません。
tooltip
公式：https://xaksis.github.io/vue-good-table/guide/configuration/column-options.html#tooltip
columns: [
{
label: 'name',
field: 'user_name',
tooltip: 'A simple tooltip',
},
// ...
]
この機能はカラムの表示設定の部分にて使用します。
カラムに対してツールチップの表示を設定することができる機能です。
デフォルトでこの様な機能が実装されているのは良いなと思ったのでご紹介しました。
Custom pagination
公式：https://xaksis.github.io/vue-good-table/guide/advanced/#custom-pagination
この機能を使用すると、ページング機能をオンにしたときに表示するページネーションの、
機能や見た目をカスタマイズすることが可能になります。
僕が実際に使用した際はページング用の独自のコンポーネントを作成して、vue-good-tableにて指定しました。
そうすることで、表示する文字の変更など、必要な要素を利用したい配置しておくことが可能になりました。
おまけ
公式：https://xaksis.github.io/vue-good-table/guide/style-configuration/#themes
vue-good-tableではテーマを指定することでカラーリングの変更ができます。
使用したことはないのですが、存在を知った時はネーミングが可愛らしいなと思いました。
最後に
vue-good-tableには他にもたくさんの機能が実装されているので、興味が湧いたら是非触ってみてください。
宣伝
パーソンリンクではエンジニアを募集しています！
Discussion