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

List.jsはリストやテーブルを検索やソート可能にするJavaScriptライブラリです。

HTMLではよくリスト表示やテーブル表示を行います。一旦表示したデータを並べ替えたり絞り込んだりできる便利なライブラリがList.jsです。


基本のサンプルです。データがリストになって並んでいるのが分かるかと思います。


名前でソートしました。


カテゴリで絞り込んで表示しています。


検索です。インクリメンタルに絞り込まれます。


こちらはテーブルのサンプル。行ごとに削除、編集が出来ます。


曖昧検索です。多少文字が違っていても絞り込んでくれます。


データを動的に生成するサンプルです。1,000行程度であれば77msで生成できます。


検索です。こちらは12ms。高速です。

List.jsはデータをJSONで渡すことも、素のHTMLを対応させることもできます。検索で絞り込んだりデータを追加、編集するのも容易です。APIも充実しており様々なアクションからコールバックを受け取れるようになっています。

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


MOONGIFTはこう見る

HTMLはOSネイティブのUIに比べて相当貧弱です。そのため常にその補完的ライブラリが求められます。特にテーブル周りはそうです。ヘッダー、フッターがないばかりかソートもできず、クリックして行の色を変更したりするのすら標準ではできません。

HTML5になってtheadやtbodyといったタグが一般化してきましたが、それでもまだまだ足りていません。今後もさらにHTMLを便利にするライブラリが求められるでしょう。Webアプリケーションが盛んになればなるほどニーズが強くなるので、そうしたライブラリ作りにチャレンジしてみるのも面白そうです。

List.js - Add search, sort and flexibility to plain HTML lists with cross-browser native JavaScript by @javve

javve/list · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2