Grid.js　セルデータの編集について

　JavaScriptのグリッドライブラリのなかでも、よくできているGrid.jsですが、どうもセルデータの編集機能がない様です。セルデータを編集できるようにしてみたので、公開しておきます。
　仕組みとしては、テキストボックスをセルに表示させて、更新したデータでグリッドのセルデータも更新しています。ただ、Grid.jsのloadイベントは最新バージョンに対応していないようで、grid.config.store.subscribe()にて回避できました。


<a href="https://mwat33.github.io/49/">動作はこちら</a>から確認できます。

~~~index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Grid.jsの活用</title>  
  <!-- grid.js  -->
  <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
        rel="stylesheet">
  <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>

  <script type="text/javascript" src="index01.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="main">
    各行のデータを取得して出力します。テキストボックスにて編集したデータを取得することができます。
    <div id="gridTag"></div>
    <div id="output"></div>
</body>
</html>
~~~

~~~style.css
.g_input{
    font-size: 11pt;
    border: 1px solid rgb(220, 220, 220);
    color: rgb(0, 0, 0);
    border-radius: 2pt 2pt 2pt 2pt;
}
.g_bt{
    color: rgb(80,80,80);
}
~~~

~~~index01.js
window.onload = (e)=>{
    let data = [["データ1","編集データ1","データ取得"],["データ2","編集データ2","データ取得"]]
    let gr = toGrid(data);
    let g_input;    //グリッド中のテキストボックス
    let g_bt;   //グリッド中のボタン
    let output = document.getElementById("output");

    // Grid.jsにはloadイベントが実装されているようですが、機能していません
    // gr.on("load",() => {console.log("grid load")});
    // そのための回避策　参考　https://qiita.com/watmot/items/4b1e56604430f43c5ba6
    function tableStatesListener(state, prevState) {
        if (prevState.status < state.status) {
            if (prevState.status === 2 && state.status === 3) {
                //グリッド中のテキストボックス
                g_input = [...document.getElementsByName("g_input")];
                g_input.forEach((elem,i) => {
                    elem.onchange = (e) => {
                        //テキストボックスに入力したデータで、グリッドのデータを更新する
                        gr.config.data[i][1] = g_input[i].value;
                    }
                });
                //グリッド内のボタン
                g_bt = [...document.getElementsByName("g_bt")];
                g_bt.forEach((elem,i)=>{
                    elem.onclick = (e) => {
                        //出力
                        output.innerText = gr.config.data[i].join(",")
                    }
                });
            }
        }
    }
    
    function toGrid(d){
        let ret;
        ret = new gridjs.Grid({
            columns:[{name:"項目A",
                      formatter:(cell) => gridjs.html(`<span>${cell}</span>`),
                      width:"100px",
                     },
                     {name:"項目B",
                     formatter:(cell) => gridjs.html(`<input value=${cell} size="16" name="g_input" class="g_input">`),
                     width:"150px",
                     },
                     {name:"項目C",
                     formatter:(cell) => {console.log();
                                          return gridjs.html(`<button name="g_bt" class="g_bt">${cell}</button>`)},
                     }],
            data: d,
            width: "500px",
            style:{td:{"padding":"5px","font-size":"11pt","color":"rgb(80,80,80)"}}
        }).render(document.getElementById("gridTag"));
        //更新時tableStatesListenerを呼出し
        ret.config.store.subscribe(tableStatesListener);
        return ret;
    }
}

~~~