はしくれSEめも

SEに必要情報をめも程度に残していこうと思っています。

【Handsontable】列を非表示にする

handsontable

Handsontable(ハンズオンテーブル)で列の非表示について紹介します。

HandsontableとHandsontable Proとでやり方が違うので注意してください。
※Handsontable Proは、どちらのやり方でも非表示にできます。

以下を参考にしてみてください。

Handsontableの場合

Handsontableの公式ドキュメントを確認すると、
Pro用のプラグインがあり、内容を確認すると幅のサイズを
0pxにしているもよう。
なので、単純に列の幅を0pxにしてみました。

今回は、オプションのcolWidthsを使用して列幅を指定しました。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {

    data: data,

    colWidths: [200, 0, 20, 20, 20],

  });
});

2列目が非表示になったと思います。
幅を0pxにしているだけなので、データの取得時によく使う getDataAtCellなどで非表示列のデータを取得することができます。

Handsontable Proの場合

Handsontable Proにはプラグインが用意されています。hiddenColumnsです。
hiddenColumnsプラグインは、特定の列を非表示にすることができます。

今回は、動的に非表示にしたい場合を紹介します。
hiddenColumnsプラグインhideColumnhideColumns
使用してみます。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,
    hiddenColumns: true,
    hiddenColumns: {
      columns: [1]
    },
  });

  var hiddenColumns = hot.getPlugin("hiddenColumns");

  // 非表示
  hiddenColumns.hideColumn(2, 3);

  // 非表示(配列)
  hiddenColumns.hideColumns([2, 3])

  // 表示
  //hiddenColumns.showColumn(1);

  hot.render();
});

showColumnで非表示にした列を表示させることができます。 showColumnsもあります。

列を非表示にしていても、データの取得時によく使う
getDataAtCellなどで非表示列のデータを取得することができます。

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com