Web上でのテーブル表示はよく使われているだけに、そのUXが優れているかどうかでサービス全体の印象が変わってきます。Excel並とまでは言いませんが、ソートや絞り込み機能はあると便利です。 そんなHTMLテーブルを手軽に優れたUIで提供してくれるのがa-table.jsになります。

a-table.jsの使い方

デモです。上にあるテーブルがa-table.jsの適用例です。文字寄せや色の変更などができます。

カラムを追加できます。

日本語も問題なく使えます。

さらに太字の変更も。

行についても追加や削除ができます。

a-table.jsではHTMLでの出力はもちろん、Markdown形式でも出力できます。ただしMarkdownの場合は文字装飾などの情報は失われています。ビジュアル的にテーブルデータを操作できるので、表計算的な利用もできるでしょう。

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

appleple/a-table.js: Simple Table UI for generating table html