高機能なデータテーブルを簡単に実装できるJavaScriptライブラリ・Grid.jsについての記事です。
今回は、Grid.js の各要素に独自classを付与するなどして、見た目をカスタマイズする方法について、書いていきたいと思います。
前回の記事では Grid.js の導入方法と、ソート機能・ページネーション機能についてご紹介しています。ぜひ合わせてご覧ください。
優れたTableライブラリ「Grid.js」で、お手軽にソート機能を持ったTableを扱う方法
それでは次のセクションから、サンプルコード・付与できる各要素などを書いていきます。
grid.jsで表示されるtableを構成する、基本的な各要素に独自でclassをつける
grid.jsで表示される基本的なtableの構成要素は以下で、それぞれに独自のclass名を指定できます。
container
table
td
th
header
footer
thead
tbody
具体的には、次のように書きます。
[JavaScript]
new Grid({
data: [
['Vue', 'Frontend Framework', '★★★★★'],
['Vuetify', 'UI Framework', '★★★★★'],
['React', 'Frontend Framework', '★★★★★'],
['Gatsby', 'Static Site Genarator', '★★★★★'],
['Grid', 'Awesome Table Library', '★★★★★']
],
className: {
container: 'mycontainer',
td: 'mytd',
th: 'myth',
...(以下省略)
}
});
↑上記の9行目からの記述の通り、
className オプションを指定して、
その中でに key（付与したい要素）: value（付与する独自class名） の形で、
独自classを付与したい要素を指定。
値として、任意のclass名を渡しているだけです。
これで、tableの各構成要素に独自のclassが付与されるので、
対応するcssを書いてあげれば、見た目を自由に整えることが可能になるというわけです。
上記の基本形以外の各要素にも独自classをつける
上のセクションに記載した基本形の他にも、
ソート機能を使用した際のclass名を持つ要素や
ページネーションを使用した際のclassのclass名を持つ要素など、
現時点では次に挙げる各要素に対して、独自のclass名を指定できます。
search
sort
pagination
paginationSummary
paginationButton
paginationButtonNext
paginationButtonCurrent
paginationButtonPrev
loading
notfound
error
具体的には、次のように書きます。
[JavaScript]
new Grid({
data: [
['Vue', 'Frontend Framework', '★★★★★'],
['Vuetify', 'UI Framework', '★★★★★'],
['React', 'Frontend Framework', '★★★★★'],
['Gatsby', 'Static Site Genarator', '★★★★★'],
['Grid', 'Awesome Table Library', '★★★★★']
],
className: {
search: 'mySearch',
sort: 'mySort',
pagination: 'myPagination',
...(以下省略)
}
});
↑上のセクションの書き方と同じく、className オプションの中に
key（付与したい要素）: value（付与する独自class名） の形で、
独自classを付与したい要素を指定するだけです。
デフォルトの横幅をカスタマイズしたり、デフォルトの高さをあらかじめ変更しておく場合
Grid.jsをデフォルトで表示した場合、親コンテナの幅いっぱいに描画されます。
これを変更したい場合は、単純に
width プロパティを渡します（もちろん、上で書いた className で変更してももちろん大丈夫ですが）。
上のセクションで書いたように、細かく見た目を制御することも勿論できますが、
単純に横幅だけを直したい。高さだけを調節したい。
そういったケースもあると思います。
そのような場合でも、あらかじめ生成時に値を渡しておくことで、サイズの調節が可能です。
具体的には、次のように書きます。
[JavaScript]
new Grid({
data: [
['Vue', 'Frontend Framework', '★★★★★'],
['Vuetify', 'UI Framework', '★★★★★'],
['React', 'Frontend Framework', '★★★★★'],
['Gatsby', 'Static Site Genarator', '★★★★★'],
['Grid', 'Awesome Table Library', '★★★★★']
],
height: '320px',
width: '90%'
});
↑このように、単純に width という項目に値を渡すだけです。
また、一緒に書いている通り、
height に値を渡して高さをあらかじめ指定しておくことも可能です。
Grid.js公式サイト内の解説ページ
公式サイト内の次のページに、解説が掲載されています。
className | Grid.js
この記事のまとめ
今回は、Grid.js の各要素に独自classを付与するなどして、見た目をカスタマイズする方法について書きました。
前回の記事でご紹介したように、
すごくお手軽に、そして高機能かつ見た目も綺麗なtableが生成できる、こちらのGrid.js。
実際にデータテーブルを表示してみることができたら、その次の要望としてきっと
・独自の見た目にしたい。
・うちのサイトに合うデザインにカスタマイズしたい。
↑上記のような要望が、きっと出てくると思います。
今回はそんな際に使える、独自class名の付与方法や width, height をあらかじめ指定しておく方法について、ご紹介しました。
きっと皆さんも使えば使うほど、Grid.jsの事を更に気に入るのではないかと思っています。
実際、私もこの記事を書く過程でさらにますます Grid.js のことが好きになりました。
公式ドキュメントを読んでいると、端々から
ユーザーのことを考えて制作してくれているライブラリだな…、と強く感じます。
特に次の Philosophy のページなどを読むと、どういった理念のもと作られたライブラリかを知ることができ、より一層好きになるかと思います。
Philosophy | Grid.js
Grid.jsの製作者 に心からの感謝を捧げつつ、
また今後も、Grid.js関連の記事を書いて行きたいと思います。
当サイトでは、今後もWeb制作、Webデザインに関する様々な記事を書いていく予定です。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。