テーブル表示は業務システムでもよく使われますが、使っている内に様々な要望が上がってきます。編集できるようにしたい、並び替えが欲しい、一括更新、絞り込み…などなど色々です。それらをすべて叶えるのは困難でしょう。 しかしライブラリを使えば実現できることもたくさんあります。今回はテーブルのドラッグ&ドロップをサポートするTableDraggerを紹介します。

TableDraggerの使い方

デモです。カラムのドラッグ&ドロップです。

さらに縦方向。ヘッダーも対象にしていますが、外すこともできます。

さらに縦と横を一緒にサポートもできます。

TableDraggerを使えばカラムをユーザの希望に応じて差し替えるといったことがユーザの手で実現できます。クライアントサイドだけで実現できるのも大きな利点でしょう。行の変更もワークフローによっては使うことがあるはずです。

TableDraggerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

sindu12jun-TableDragger sindu12jun/table-dragger: Easily drag and drop sorting table