優れたTableライブラリ「Grid.js」で、 行/セルをクリックした時にその情報を取得する方法

優れたTableライブラリ「Grid.js」で、 行/セルをクリックした時にその情報を取得する方法
以前より、たびたびご紹介している優れたライブラリ、
Grid.js」。

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

今回は、Grid.js を使って作成しているテーブル内の、行やセルをクリックした時に、
それを検知して情報を取得する方法について書いていきたいと思います。
ちなみに、この記事を書いた際に Grid.js を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v14.16.0

まずは結論から:クリックした行/セルを検出、情報を取得するには

早速、Grid.js使用時に、「クリックした行/セルを検出、情報を取得」する方法のコードです。
Grid.js自体を使用できる準備が整っている前提で、表示部分のみ記載しています。
※Grid.js の使用方法についてはこちらの記事を参照してください。

<script>
const myGrid = new gridjs.Grid({
  columns: ['名前', 'ジャンル', '素晴らしさ'],
  data: [
    ['Vue', 'Frontend Framework', '★★★★★'],
    ['Vuetify', 'UI Framework', '★★★★★'],
    ['React', 'Frontend Framework', '★★★★★'],
    ['Gatsby', 'Static Site Genarator', '★★★★★'],
    ['Grid', 'Great Table Library', '★★★★★']
  ],
}).render(document.getElementById('gridContainer'));

myGrid.on('rowClick', (...myArrayRow) => console.log('クリックされたrowの情報: ' + JSON.stringify(myArrayRow), myArrayRow));
myGrid.on('cellClick', (...myArrayCell) => console.log('クリックされたcellの情報: ' + JSON.stringify(myArrayCell), myArrayCell));
</script>

↑上記の様に記載すると、クリックされた行、セルの情報を取得することができます。

実際に動くサンプル

上のセクションのコードで実際に動いている様子を確認いただけます。
Chromeでアクセスいただいている場合であれば Command+option+i でDevToolsのコンソールを開いた状態で
次の表内のどこかをクリックすると、
クリックした位置の情報が帰ってくることがわかるかと思います。

情報を取得できている、ということは、クリックされた時に
それを画面に表示させたり、何らかの処理をさせる際に、あらかじめ変数に格納しておいてそれを渡したり、
さまざまな用途に使うことができる、という事です。

Grid.js公式の解説ページ

今回ご紹介した「Grid.js使用時に、テーブル内でクリックされた行/セルを検出、情報を取得」する方法についての、
Grid.js公式の解説ページは以下になります。
Events | Grid.js

この記事のまとめ

今回は、データのソート機能ページネーション機能
などを備えたデータテーブルを簡単に作成・表示することができる
優れたJavaScriptライブラリ Grid.js について、
「クリックされた行/セルを検出、情報を取得」する方法について書きました。

こちらの Grid.js ですが今年の8月に、久しぶりに最新版のリリースが行われています。(version 5.1.0)
以前の記事でも書きましたが、この Grid.js、個人的にお気に入りのライブラリのひとつなので、
直近で最新版リリースがあったことを感謝するとともに、嬉しく思っています。

今後も Grid.js に関して、面白そうな用例を思いつき次第、また記事を書いていきたいと思っています。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

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

この記事をシェアする: