高機能なTableライブラリ「Grid.js」の各要素に独自classを付与、見た目をカスタマイズする方法[JavaScript]

高機能なTableライブラリ「Grid.js」の各要素に独自classを付与、見た目をカスタマイズする方法

前回の記事に続き、今回も
高機能なデータテーブルを簡単に実装できる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',
    ...(以下省略)
  }
});

↑上記の6行目からの記述の通り、
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デザインに関する様々な記事を書いていく予定です。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。