<table>はHTMLで最も古い要素のひとつです。tableはかつてWebレイアウトに広く使われていました。しかし、tableを基盤としたレイアウトは廃れ(HTMLメールを除いて)、現在tableを使うのは、表データを見せるために使うときくらいでしょう。
HTMLスペックの古い部分は、一般的にモバイル中心のデザインに合っておらず、そしてbox要素の外では機能的な発展はありません。とはいえ、table機能の使い勝手がもっとよくなったらいいと思いませんか?
この記事では、jQueryで動く厳選したプラグインについてザっと説明し、tableの可能性が広がればいいなと思います。これからご紹介するプラグインは、簡単なデザイン修正から機能豊かな解決策にまで多岐に及びます。
jQueryで動くtableプラグイン12選
Dynatable
Dynatableはフィルター、分類、ページ付けなどの機能をもった強力なtableを作ります。デベロッパーに焦点が当てられており、柔軟にカスタマイズしながらtableの表示をコントロールしやすくしたり、フィルター機能や検索機能を導入できるでしょう。
Bootstrap Table
Bootsrap Table pluginは機能豊富なプラグインとして利用されてきました。さらに最小限のdevの利用であなたが必要な機能を提供してくれる drop-and-playtableプラグインでもあります。
Fixed Header Table
Fixed Header Tableはあなたが予想している通りの働きをしてくれます。固定されたヘッダーをtableの先頭に表示してくれるのでスクロールしても見失うことがありません!
Data Tables
こちらのとってもフレキシブルなjQuerytableは、ベーシックなHTMLtableをより直感的で使いやすいものにします。
Data Tablesは分類やフィルター、ページ付け、カスタムテーマ作成などの追加機能を提供してくれる拡張プラグインです。
jQuery HighchartTable
Highchart TableはtableデータからダイナミックにHighcharts(リンク)インタラクティブチャートを作成するお役立ちプラグインです。
Tabulator
TabulatorはHTML、JavaScript配列、Ajaxデータソース、あるいはJSONデータなどから、インタラクティブで拡張的なtableを作る強力なjQueryプラグインです。Tabulatorはフィルター、分類、カラム幅調整、tableデータのスマートローディング、ページ付け、ダイレクトtable入力編集などの広範囲にわたる機能を持っています。
FancyGrid
FancyGridは標準的なtableを追加機能でパワーアップしてくれます。あなたがシンプルであっさりした様式のtableが欲しいのか、フィルター、分類、ページ付け機能付きのtableが欲しいのかに関わらず、FancyGridはユーザーにとびっきりの体験をさせるくらいのポテンシャルを持っています。
jQuery KingTable
King Tableは複雑な検索・フィルター条件を作れるような、デベロッパー向けのものです。口座やプロジェクトマネジメントなどの大量なデータを扱うにはうってつけです。
Stackable.js
Stackable.jsは小さいデバイスに対してレイアウト調整をし、tableをモバイル向けにするjQueryプラグインです。
JQuery ReStable
このプラグインはレイアウトやスクロールのしやすさを改善するため、tableをよりモバイルレスポンシブにし、列項目をliアイテムの連なりにしてくれるプラグインです。
Foo Table
Foo TableはBoostrapに触発された、検索、フィルターをはじめとする機能を提供してくれるtable拡張プラグインです。
Tabella.js
Tabellaは長い、あるいは複雑なtableを簡単にスクロールできるようなタッチ・スワイプ機能に特化したパワフルなtable作成プラグインです。
まとめ
今回ご紹介させていただいたプラグインは、tableの機能や見栄えを向上できるプラグイン全体のほんの一部でしかありません。手軽なデザインに興味があるのか、あるいは機能を拡張したいのかに関わらず、作業を簡単にし、ユーザーの使い心地を良くするようなjQueryプラグインがきっとありますよ!
(※本稿は「12 Amazing jQuery Tables」を翻訳・再編集したものです)










