表(table)の列幅をドラッグで変更させる方法【jQueryプラグイン】

2020.07.18 / 2020.07.18

本記事ではjQueryのプラグイン「jQuery Resizable Columns」を使った、表の列幅をドラッグで変更できるようにする方法を解説します。

通常表の列幅は固定されています。それをユーザーが自由に変更できるようにする、ということです。列幅が小さいため折り返している列を１行にしたいときなんかにあると便利な機能ですね。

これは表を使ったWEBアプリなど、様々な用途でこの表の列幅変更は使われています。

私の場合

PythonのWebワークフレームDjangoでインシデントマネージャーアプリに使用しています。インシデントが登録された表の列幅をドラックでユーザーが変更できるようにしてます。

「jQuery Resizable Columns」による列幅変更のデモサイトは以下のリンクですので、どういった動きをするのか、まず確かめてみてください。

jQuery Resizable Columns demo site

それでは、表の列幅をドラッグで変更できるようにする方法を見ていきましょう。

jQuery Resizable Columnsのダウンロード

jQueryのプラグイン「jQuery Resizable Columns」を使うことで表の列幅をドラッグで簡単に変更できるようになります。

「jQuery Resizable Columns」のプラグインを以下ページ（Github）からダウンロードしてください。

jQuery Resizable Columnsダウンロード

上記ページのCODEボタン＞DOWNLOAD ZIPよりZIPファイルをダウンロードします。

ダウンロードしたZIPファイルは解凍し、その中にあるdistフォルダ内のcssとjsファイルを使用しまので、特定のcssフォルダ、jsフォルダに移動してください。

表の列幅を変更できるようにする

解凍したファイルのdistフォルダにあるjquery.resizableColumns.cssとjquery.resizableColumns.min.jsの２種類のファイルを読み込ませます。

<link rel="stylesheet" href="./jquery.resizableColumns.css" />
<script src="./jquery.resizableColumns.min.js"></script>

もしjqueryの読み込みがされてなければ、下記も追加してください。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

次に以下jQueryのコードを記載します。

$(function() {
    $('table').resizableColumns();
});

$(‘table’)は対象のtableのIDやClassを指定しても問題ありません。
これにより対象のテーブルの列幅がドラッグで変更可能になります。

以下に簡単なサンプルプログラムを記します。

<head>
<link rel="stylesheet" href="jquery.resizableColumns.css" />
</head>
<body>
<table>
    <thead>
        <tr>
            <th>Office54</th>
            <th>Python</th>
            <th>jQuery</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>FiveFour</td>
            <td>Django</td>
            <td>javascript</td>
        </tr>
        <tr>
            <td>Great</td>
            <td>Perfect</td>
            <td>Amaging</td>
        </tr>
    </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.resizableColumns.min.js"></script>
<script>
$(function(){
    $("table").resizableColumns({
    });
});
</script>
</body>

もし特定の列だけ可変させないようにしたい場合は、要素に「data-noresize」属性を追加します。

そうすることで、特定の列だけ、可変不可能となります。

変更した列幅を保存させる

この状態ですと、列幅を変更したのちにページをリロードすると、幅は元に戻ってしまいます。

この変更した幅を保存させるためにlocalStorageを使用します。

使い方はstore.jsというファイルを読み込ませて、各要素に「data-resizable-column-id」の属性を設定するだけです。

まずstore.jsファイルは以下ページからダウンロードしてください。

store.jsダウンロード

そうしたら、store.jsファイルを読み込ませます。

<script src="store.js"></script>

そして対象のtable要素とtdまたはth要素に「data-resizable-column-id」属性を追加してあげます。

最後、script要素にstore: window.storeを加えれば設定完了です。

$(function(){
    $("table").resizableColumns({
        store: window.store
    });
});

これらの設定により、列幅を変更してページをリロードしても、幅を変更した記録が残るようになります。

最初に紹介しているデモページがこの方法を使っているので、そちらも併せて確認してみてください。

jQuery：テーブル操作の便利な機能

tableの最終行・先頭行・行数を指定して行を削除する方法

Webアプリケーションでテーブルを使用している場合、行を削除したいことが多くあります。jQueryを利用することで簡単に最終行や先頭行・指定行を削除できます。

以下記事ではテーブルの行を削除する方法としてjQueryのremove()メソッドとeq()メソッドを使用しています。