HTMLテーブルをソート可能にするライブラリ「Sortable.js」

[PR]記事内のアフィリエイトリンクから収入を得る場合があります
  • URLをコピーしました!

Sortable

HTMLのテーブルをソート可能にするライブラリはたくさんありますがSortable.jsもそのようなライブラリの一つです。CSSとJavaScriptを組み込めば既存のテーブルを簡単にソート可能にする事ができます。
Sortable 1

テーブルのヘッダー部分をクリックすると降順/昇順を切り替えることができます。お馴染みの小さな三角形のインジケーターがソート順を表しています。

組み込み方

<link rel="stylesheet" href="sortable-theme-dark.css" />
<script src="sortable.min.js"></script>

<table class="sortable-theme-dark" data-sortable>
    <!-- ... -->
</table>

好きなテーマのcssと、jsファイルを読み込んでテーブルにクラス名を指定するだけです。簡単ですね。

テーマもいろいろ

Dark
ダークテーマ。

Sortable 2

Bootstrapテーマ。

Sortable 3

Finder風テーマ。

なかなか見た目が良いテーマがそろっているので覚えておいて損はないライブラリだと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次