業務システムに活用したいjQuery製のBootstap用テーブルプラグイン8選

Bootstap単体でも開発を行うことは十分にできますが、ユーザインタフェースを考慮すると、予め用意された機能だけでは実装できない場合もあります。

そこで、使ってみたいのが今回紹介するプラグインです。これらのプラグインを使うことで、よりカスタマイズされた画面表示、操作を実現できます。さらに開発工数自体を減らし、優れたユーザーインタフェースをもたらすことでしょう。

ブラウザ内で表を編集できるプラグイン

jQuery-Tabledit

デモ

テーブルの内容をその場で編集、削除できます。バリデーション機能もあります。

コードも

 $('#example1').Tabledit({
    url: 'example.php',
    columns: {
      identifier: [0, 'id'],
      editable: [[1, 'nickname'], [2, 'firstname'], [3, 'lastname']]
    }
});

と、これだけで動かせます。このプラグインが同種のものと比較して優れている点は、ボタン押下時の処理が追加しやすいことです。

ライセンスはMIT Licenseです。

editableTableWidget

デモ

こちらも同様にテーブルのデータが編集できるようになります。他に比べて優れているのは計算処理も可能ということです。

ライセンスはMIT Licenseです。

フィルタ機能を追加できるプラグイン

Filterable

デモ

名前の通り、表にフィルタを挿入できます。

たとえば下図のように

普段は隠れた状態でボタン押下時に入力ボックスが出てきたり、下図の左手ヘッダー「color」のように

フィルタ化したものだけ色が変わるなどの機能があります。ことフィルタについてのUIは他のプラグインより優れたものになっています。

ライセンスはMIT Licenseです。

表の見た目に関するプラグイン

FooTable

デモ

画面の大きさに対して臨機応変に表示を変えたいならFooTableを使いましょう。こちらのサンプルにあるように画面サイズ次第で、レスポンシブルに表示を変えてくれます。加えてテーブルへソート、フィルタ、ページネーションを加えることができます。Bootstrapに限らず、通常のテーブルタグにも活用できます。Bootstrap版はこちらからダウンロードしてください。

こちらライセンスはGPL v3です。

tablecloth

デモ

Bootstrapで作った表の見た目をより見やすくしたいなら、tableclothが使えます。たった2行のコードだけでホバー時に縦列、横列のハイライト表示をすることができます。

ライセンスはMIT Licenseです。

操作を追加できるプラグイン

navigable-table

デモ

テーブルに限らず、グリッドで配置された入力項目をショートカットで簡単に移動できるようにできたり、簡単にセルを挿入できるプラグインがnavigable-tableです。

具体的には、

jump(次の項目にジャンプ)
alt + arrow keys
move(移動)
alt + shift + up/down
insert(行の挿入)
alt + enter (+ shift)
duplicate（行の複製）
alt + d (+ shift)
delete（行の削除）
alt + shift + backspace

といったショートカットでテーブル操作をより快適にします。

ライセンスはMIT Licenseです。

総合的なプラグイン

Table plug-in forjQuery

デモ

DataTablesを使うとデータの絞込、ソート、ページングができるようになります。

ライセンスはMIT Licenseです。

有償ライセンスの購入をすればサポートを受けることができます。作成元はSpryMedia 社です。どういったパラメータがあるかはDataTables – Usageが参考になります。

bootstrap-data-table

デモ

フィルタ、ページネーション、1ページあたりの表示件数の変更、検索、データの並べ替えなどテーブルに対して多くの機能を追加できます。ページネーションを日本語化する際には多機能テーブルDataTablesを使う | HOS Co.,Ltd.が参考になります。

ライセンスはMIT Licenseです。

まとめ

今回はBootstrapのjQueryプラグイン、特に業務系システムに使えそうなテーブルに関するものを紹介しました。ぜひこれらを皆さんの開発で役立ててください！