ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

Handsontableで列を非表示にする(非表示列を持たせる)

JavaScript

本記事では、Handsontableで列を非表示にする
(非表示列を持たせる)方法を紹介していきます。

本記事の内容です。

Handsontableって何？

下記の記事を参照してください。
j-levia.hatenablog.jp

サンプルコード

非表示にしたい列の幅を0.1に設定することで、
非表示列にしています。
実際に列幅は、0に設定されます。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
    <link rel="stylesheet" href="css/handsontable.full.min.css" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/handsontable.full.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

$(function() {
    var data = [
        {
            name: '佐藤', age: 28
        },
        {
            name: '鈴木', age: 19
        },
        {
            name: '田中', age: 25
        }
      ];

    var columns = [
        {
            data: 'name',
            type: 'text',
            width: 100
        },
        {
            data: 'age',
            type: 'text',
            width: 0.1 // 幅に0.1を設定することで非表示列にする、実際には0が設定される
        },
    ];
      
    var grid = document.getElementById('grid');
    
    new Handsontable(grid, 
    {
        data: data,
        columns: columns
    });
});