JS のみで Excel 風スプレッドシートが作れる Jexcel (Jspreadsheet) を試す
Excel で作った表データを公開する時に、Google スプレッドシートで公開するのは何だかなー、HTML として公開できないかなーと思って調べたところ、Jexcel なるツールがあるとのことで、使ってみた。
公式のリポジトリは以下っぽい。Jspreadsheet CE が正式名称？
公式リファレンスは以下。
- The javascript spreadsheet
Jexcel has been renamed to Jspreadsheet.
…とのことで、現在は Jexcel ではなく Jspreadsheet と呼ぶのが正しいようだ。今気付いた。ｗ
npm でのインストールの他、React や Vue など SPA 向けの実装もあるが、今回は CDN から JS と CSS を読み込んで使う Vanilla なやり方をしてみた。
デモは以下のとおり。コードも見てみてほしい。
CDN から読み込むファイルは計4つ。
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css">
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css">
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
jSuites というコンポーネントを組み合わせて UI を実現しているようだ。同じ作者っぽい。
- jSuites | Javascript vanilla web components
- jsuites/jsuites: jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms.
サンプルコードによると、データは2次元配列で指定するのが基本らしいが、JSON や CSV の他、連想配列での指定もできるようだ。良き。
カラム定義は柔軟にできて、カレンダーやカラーピッカーを使った指定だったり、ドロップダウンリストから選択するようなこともできる。
最初に渡したデータを UI 上で書き換えられるのも特徴。今回はそこまで試していないが、各種イベントや persistance (永続化) オプションを使えば、別途 API をコールして入力データを永続化したりもできそうだ。逆に、Read Only なセルにもできる。
- 参考 : Handling events on Jspreadsheet Example
- 参考 : Handling events on Jspreadsheet Doc
- 参考 : Data persistance
地味にセルの結合もできたりする。色々と JS からプログラマブルに扱えるので、決まったデータを見せるだけの使い方から、自作の Google スプレッドシートもどきアプリも作れそうな勢い。
