プログラミング

プログラミング

「table」って実はここまでできるんです!jQuery tableプラグイン12選

3,843 views

<table>はHTMLで最も古い要素のひとつです。tableはかつてWebレイアウトに広く使われていました。しかし、tableを基盤としたレイアウトは廃れ(HTMLメールを除いて)、現在tableを使うのは、表データを見せるために使うときくらいでしょう。

 

HTMLスペックの古い部分は、一般的にモバイル中心のデザインに合っておらず、そしてbox要素の外では機能的な発展はありません。とはいえ、table機能の使い勝手がもっとよくなったらいいと思いませんか?

 

この記事では、jQueryで動く厳選したプラグインについてザっと説明し、tableの可能性が広がればいいなと思います。これからご紹介するプラグインは、簡単なデザイン修正から機能豊かな解決策にまで多岐に及びます。

 

jQueryで動くtableプラグイン12選

 

Dynatable

 

Dynatableはフィルター、分類、ページ付けなどの機能をもった強力なtableを作ります。デベロッパーに焦点が当てられており、柔軟にカスタマイズしながらtableの表示をコントロールしやすくしたり、フィルター機能や検索機能を導入できるでしょう。

 

1477811108dynatable

 

Bootstrap Table

 

Bootsrap Table pluginは機能豊富なプラグインとして利用されてきました。さらに最小限のdevの利用であなたが必要な機能を提供してくれる drop-and-playtableプラグインでもあります。

 

1477811100bootstrap_table

 

 

Fixed Header Table

Fixed Header Tableはあなたが予想している通りの働きをしてくれます。固定されたヘッダーをtableの先頭に表示してくれるのでスクロールしても見失うことがありません!

 

1477811066fixed_header

 

 

Data Tables

 

こちらのとってもフレキシブルなjQuerytableは、ベーシックなHTMLtableをより直感的で使いやすいものにします。

 

Data Tablesは分類やフィルター、ページ付け、カスタムテーマ作成などの追加機能を提供してくれる拡張プラグインです。

 

1477811106datatables_jquery

jQuery HighchartTable

 

Highchart TableはtableデータからダイナミックにHighcharts(リンク)インタラクティブチャートを作成するお役立ちプラグインです。

 

1477811075highcharttable

Tabulator

 

TabulatorはHTML、JavaScript配列、Ajaxデータソース、あるいはJSONデータなどから、インタラクティブで拡張的なtableを作る強力なjQueryプラグインです。Tabulatorはフィルター、分類、カラム幅調整、tableデータのスマートローディング、ページ付け、ダイレクトtable入力編集などの広範囲にわたる機能を持っています。

 

1477811097tabulator

FancyGrid

 

FancyGridは標準的なtableを追加機能でパワーアップしてくれます。あなたがシンプルであっさりした様式のtableが欲しいのか、フィルター、分類、ページ付け機能付きのtableが欲しいのかに関わらず、FancyGridはユーザーにとびっきりの体験をさせるくらいのポテンシャルを持っています。

 

1477811063fancygrid

 

jQuery KingTable

 

King Tableは複雑な検索・フィルター条件を作れるような、デベロッパー向けのものです。口座やプロジェクトマネジメントなどの大量なデータを扱うにはうってつけです。

 

1477811082jquery_kingtable

Stackable.js

 

Stackable.jsは小さいデバイスに対してレイアウト調整をし、tableをモバイル向けにするjQueryプラグインです。

 

1477811090jquery_stackable

JQuery ReStable

 

このプラグインはレイアウトやスクロールのしやすさを改善するため、tableをよりモバイルレスポンシブにし、列項目をliアイテムの連なりにしてくれるプラグインです。

 

1477811086jquery_restable

Foo Table

 

Foo TableはBoostrapに触発された、検索、フィルターをはじめとする機能を提供してくれるtable拡張プラグインです。

 

1477811070footable

Tabella.js

 

Tabellaは長い、あるいは複雑なtableを簡単にスクロールできるようなタッチ・スワイプ機能に特化したパワフルなtable作成プラグインです。

1478579905taberellajs-1024x298

まとめ

 

今回ご紹介させていただいたプラグインは、tableの機能や見栄えを向上できるプラグイン全体のほんの一部でしかありません。手軽なデザインに興味があるのか、あるいは機能を拡張したいのかに関わらず、作業を簡単にし、ユーザーの使い心地を良くするようなjQueryプラグインがきっとありますよ!

 

 

(※本稿は「12 Amazing jQuery Tables」を翻訳・再編集したものです)

関連記事

おすすめ記事