WEBでExcel風の一覧を再現するHandsontable の表示サイズ(縦横)は、レスポンシブデザインに対応していません。(*)APIから変更することはできますが、それだけではユーザがサイズ変更できません。ユーザがある程度サイズをコントロールできるよう、コンテキストメニューから変更できるようにします。
完成系
下記のような表をサンプルに考えます。この表を確認したり、入力したりする際、表全体の大きさを変更できるようにします。この例では横30、縦100ピクセル大きくしています。



コンテキストメニューへの独自実装
コンテキストメニューを独自に実装は、下記インターフェイスで行えます。nameはコンテキストメニュー上のメニュー文字列、処理はcallbackに実装します。
hot.updateSettings({
data: data,
width: 820,
height: 400,
(省略)
contextMenu: {
items: {
"resize_increase": {
name: function() { return "拡大" },
callback: function() {
//ここにリサイズを実装
}
},
"resize_decrease": {
name: function() { return "縮小" },
callback: function() {
//ここにリサイズを実装
}
}
}
},
(省略)
});
簡単な共通化
何カ所かHandsontableを使った表があるので、共通化しました。
hot.updateSettings({
data: data,
width: 820,
height: 400,
(省略)
contextMenu: concreateContextMenuResize(hot, 30, 100);
(省略)
});
function concreateContextMenuResize(hot, w, h) {
return {
"resize_increase": {
name: function() { return "拡大" },
callback: function() {
var f = handsontableSizeIncrease(hot, w, h)
f();
}
},
"resize_decrease": {
name: function() { return "縮小" },
callback: function() {
var f = handsontableSizeIncrease(hot, -w, -h)
f();
}
}
};
}
function handsontableResize(hot, w, h) {
return function() {
hot.updateSettings({
width: w,
height: h
});
}
}
function handsontableSizeIncrease(hot, width, height) {
return function() {
var settings = hot.getSettings();
var afterW = settings.width + width;
var afterH = settings.height + height;
f = handsontableResize(hot, afterW, afterH);
f();
}
}
* https://forum.handsontable.com/t/responsive-hansontable/1943