やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > プログラミング > tabulator.jsでリッチなテーブルを作成する

tabulator.jsでリッチなテーブルを作成する

プログラミング JavaScript

多機能テーブルを実装できるライブラリを使う。

成果物

GitHubtabulator.helloworld.201703121530

Playground

See the Pen tabulator.helloworld.201703121530 by ytyaru (@ytyaru) on CodePen.

問題

テーブルにソートやフィルタリング機能を実装したい。

しかし、d3.jsのデータ駆動では難しい。

tabulator.js

tabulator.jsはテーブル作成ライブラリ。ソートなどの機能を簡単に実装できる。

jqueryに依存しているらしいので、以下のように色々ロードせねばならない。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/2.11.0/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.2/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/2.11.0/tabulator.min.js"></script>

TSVをロードしてオブジェクト配列にするためにd3.jsも使う。

所感

使えそう。