【Handsontable】hiddenColumns 列を非表示にする
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
プラグインのhideColumn
とhideColumns
を
使用してみます。
$(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
などで非表示列のデータを取得することができます。