【Handsontable】hiddenRows 行を非表示にする

f:id:coogi-se:20210804235542p:plain

Handsontable（ハンズオンテーブル）で行の非表示について紹介します。
HandsontableとHandsontable Proとでやり方が違うので注意してください。
※Handsontable Proは、どちらのやり方でも非表示にできます。

以下を参考にしてみてください。
たぶん、そのままコピペで動くと思います。

Handsontableの場合

Handsontableの公式ドキュメントを確認すると、
Pro用のプラグインがあり、内容を確認すると高さサイズを0pxにしているもよう。
なので、Proでなくても非表示は可能でした。

$(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,
    rowHeights: [50, 0, 30, 30, 30],
  });
});

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

Handsontable Proの場合

Handsontable Proにはプラグインが用意されています。hiddenRowsです。
hiddenRowsプラグインは、指定した行を非表示にすることができます。

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

$(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,
    hiddenRows: true,
    hiddenRows: {
      rows: [1]
    },
  });

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

  hiddenRows. showRow(1);         // 表示
  hiddenRows.hideRow(2, 3);       // 非表示
  hiddenRows.hideRows([2, 3])   // 非表示（配列）
  hot.render();
});

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

coogi-memo.hatenablog.com

はしくれSEめも

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

【Handsontable】hiddenRows 行を非表示にする

Handsontableの場合

Handsontable Proの場合

関連記事