Handsontable セルに配置したボタンのイベント

Handsontable で、セル内に配置したボタン押下にイベントから押された対象を参照するのは、
　event.realTarget　だと思っていたが、
Ver 8.0.0 以降では、この名称ではなく、 event.toElement　であった。
以下のようにする。
カラム定義で 指定する Renderer を書いておく。

var action01Renderer = function(instance, td, row, col, prop, value, cellProperties) {
    var button = $('<button class="action01">');
    button.html("実行");
    $(td).addClass("htCenter");
    $(td).addClass("htMiddle");
    $(td).empty().append(button);
    td.style.background = "#f0f0f0";
};

カラム定義

var hot = new Handsontable(document.getElementById("table"), {
    data: data,
    columns:[
        {    readOnly: true,
            renderer: action01Renderer,
        },
    ],

セル上のマウス down イベントのフック、afterOnCellMouseDown　を記述する

var hot = new Handsontable(document.getElementById("table"), {
    data: data,
    columns:[
        {    readOnly: true,
            renderer: action01Renderer,
        },
    ],

    afterOnCellMouseDown: function(event, cords, TD) {
        if (event.toElement.tagName=="BUTTON"){
            if (event.toElement.className.indexOf("action01") >= 0){
                // cords.row ＝行インデックス
                // cords.col ＝列インデックス
                // ボタン押下した行のデータを取得（配列）
                var ary = hot.getDataAtRow(cords.row);
                console.log(ary);
            }
        }
    },

event.toElement.tagName が、"BUTTON" であるか問い合わせることで、
確実にボタン押下を拾う。
event.toElement.className　を確認することで、他のセルに配置したボタンとも
区別する。⇒最初の ボタン Renderer で定義する ClassName で識別できるようにすることが
ミソである。

ボタン押下した行のデータを取得（配列）は、

     hot.getData(cords.row, 0, cords.row, hot.countCols());

でも、同様に取得はできるが、２次元配列として取得してしまうので、
getDataAtRow　の方が使いやすい

サンプルとしては、以下のように書き直した。。。
Handsontable に配置するボタンのサンプル - Oboe吹きプログラマの黙示録