HTMLのリスト、テーブルをソート、フィルタリング、検索可能に「List.js」
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アプリケーションが盛んになればなるほどニーズが強くなるので、そうしたライブラリ作りにチャレンジしてみるのも面白そうです。