ITエンジニア/デザイナ向けにオープンソースを毎日紹介

StreamTable.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくStreamTable.jsです。


テーブルは既に表示されていますが、データは徐々に取得されていきます。例えばこの場合は20%までデータを取っています。


ページネーションもどんどん増えていきます。


検索ボックスを使って予めフィルタリングする事もできます。マッチするデータだけが追加されていきます。


仕組みとしてはAjaxでデータを取得しています。

StreamTable.jsではデータのストリームベースでの取得に加えて、検索によるデータ絞り込みとページネーションに対応しています。データの描画は必要に応じて行われる形なので、最初のデータがすぐに表示されるのはユーザにとって便利な仕組みではないでしょうか。


MOONGIFTはこう見る

Webアプリケーション化が進む中で、こうやって表示とデータ授受部分が切り離されていくのは良い仕組みだと思っています。特に業務システムにおいてはユニークなURLである必要もそれほどなく、利用ブラウザも限定できるのでAjaxを多用していくべきではないでしょうか。

データと表示部が切り分けられればWeb APIとしてWebブラウザ以外での利用(例えばExcelなど)も考えられるようになります。開発者にとっても変更が多くないRESTfulなインタフェース開発の方が生産性も良くなるはずです。

jiren.github.io/StreamTable.js/stream.html

jiren/StreamTable.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2