Excel風一覧(handsontable)のリサイズ

WEBでExcel風の一覧を再現するHandsontable の表示サイズ（縦横）は、レスポンシブデザインに対応していません。(*)APIから変更することはできますが、それだけではユーザがサイズ変更できません。ユーザがある程度サイズをコントロールできるよう、コンテキストメニューから変更できるようにします。

完成系

下記のような表をサンプルに考えます。この表を確認したり、入力したりする際、表全体の大きさを変更できるようにします。この例では横３０、縦１００ピクセル大きくしています。

コンテキストメニューへの独自実装

コンテキストメニューを独自に実装は、下記インターフェイスで行えます。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