DataTableで列を固定するにはどうすればいいですか？

DataTableで特定の列を固定表示したい場合があります。例えば、一番左の列にIDや名前などの主要な情報が表示されていて、スクロールしても常に表示されているようにしたい場合などです。DataTableは非常に強力なJavaScriptライブラリであり、様々な機能を提供しています。その中に、列を固定表示するための機能も備わっています。

列固定の手順

DataTableで列を固定表示するには、以下の手順に従います。

DataTables FixedColumns extensionを導入する
DataTableの初期化時に scrollX と fixedColumns オプションを設定する

DataTables FixedColumns extensionの導入

FixedColumns extensionは、DataTableの標準機能ではありません。そのため、別途ダウンロードしてHTMLページに読み込む必要があります。CDNを利用する場合、以下の <link> タグをHTMLの <head> セクションに追加します。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>

DataTableの初期化

DataTableを初期化する際に、scrollXオプションとfixedColumnsオプションを設定します。

`scrollX` オプション

scrollXオプションは、水平スクロールバーを有効にするためにtrueに設定します。

`fixedColumns` オプション

fixedColumnsオプションは、固定する列の設定を行います。leftColumnsプロパティで左端に固定する列数を、rightColumnsプロパティで右端に固定する列数を指定します。

コード例

以下は、左端の1列を固定表示するDataTableの例です。

<!DOCTYPE html>
<html>
<head>
    <title>DataTable 列固定</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>

    <script>
        $(document).ready( function () {
            $('#myTable').DataTable( {
                scrollX: true,
                fixedColumns:   {
                    leftColumns: 1
                }
            } );
        } );
    </script>
</head>
<body>

<table id="myTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>名</th>
            <th>年</th>
            <th>住所</th>
            <th>電話番号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>田中太郎</td>
            <td>30</td>
            <td>東京都千代田区</td>
            <td>03-1234-5678</td>
        </tr>
        <tr>
            <td>2</td>
            <td>佐藤花子</td>
            <td>25</td>
            <td>大阪府大阪市中央区</td>
            <td>06-9876-5432</td>
        </tr>
    </tbody>
</table>

</body>
</html>

注意点

scrollX オプションを true に設定しないと、fixedColumns オプションは機能しません。
固定する列が多すぎると、パフォーマンスに影響が出る可能性があります。

参考資料

DataTables FixedColumns extension

よくある質問

Q1: 固定する列の幅を指定することはできますか？

A1: はい、CSSで固定する列のth要素に対してwidthプロパティを指定することで、幅を調整できます。

Q2: 固定する列の背景色を変更することはできますか？

A2: はい、CSSで固定する列のth要素とtd要素に対してbackground-colorプロパティを指定することで、背景色を変更できます。

Q3: 複数の列を固定することはできますか？

A3: はい、fixedColumns オプションの leftColumns と rightColumns プロパティに固定したい列数を指定することで、複数の列を固定できます。

その他の参考記事:jquery table 編集