Handsontable 7.3.0で、オブジェクト配列を使ったloadData()が動作しない

グリッドライブラリの Handsontable では、 loadData() を使ってグリッドのデータを更新できます。
https://handsontable.com/docs/7.3.0/Core.html#loadData

　
ただ、手元で試したたところ動作しないことがあったため、メモを残しておきます。

環境
現象
原因と対応
ソースコード

環境

Handsontable 7.3.0 / 8.0.0-beta.1

現象

以下のようなコードを実装しても、Handsontableのグリッドにデータが表示されませんでした。

// オブジェクト配列を用意
const objectData = [
    {name: 'りんご', price: 100},
    {name: 'みかん', price: 200}
]

// Handsontableを生成
const element = document.getElementById(divId);
const table = new Handsontable(element, {
    licenseKey: 'your license'
});

// loadDataでロード
table.loadData(objectData);

　
他にグリッドにデータを投入する方法としては、

loadData()に、二次元配列を渡す
Handsontableオブジェクト生成時に、オブジェクト配列を渡す

があったため、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- v7.3.0の場合は動作しない-->
    <script src="https://cdn.jsdelivr.net/npm/handsontable@7.3.0/dist/handsontable.full.min.js">
    </script>
    <link type="text/css"
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/handsontable@7.3.0/dist/handsontable.full.min.css">
</head>
<body>
    <h3>二次元配列版</h3>
    <div id="array"></div>
    <hr />

    <h3>オブジェクト配列版</h3>
    <div id="object"></div>
    <hr />

    <h3>オブジェクト生成時にオブジェクト配列を渡す版</h3>
    <div id="creation"></div>

    <script>
        document.addEventListener("DOMContentLoaded", () => {

            // 二次元配列データをloadData
            const arrayData = [
                ['りんご', 100],
                ['みかん', 200]
            ]
            load('array', arrayData);

            // オブジェクトの配列データをloadData
            const objectData = [
                {name: 'りんご', price: 100},
                {name: 'みかん', price: 200}
            ]
            load('object', objectData);

            // オブジェクトの配列データをオブジェクト生成時に渡す
            const element = document.getElementById('creation');
            const ht = new Handsontable(element, {
                data: objectData,
                licenseKey: 'your license'
            });
        });

        function load(divId, data) {
            const element = document.getElementById(divId);
            const table = new Handsontable(element, {
                licenseKey: 'your license'
            });
            table.loadData(data);
        }
    </script>
</body>
</html>

としたところ、オブジェクト配列をloadData()に渡した時のみ、表示されませんでした。

f:id:thinkAmi:20191223221041p:plain:w400

原因と対応

まさにそのものがissueにありました。
Using loadData on an object data doesn't work · Issue #4204 · handsontable/handsontable

　
現時点の最新版(7.3.0)で対応できる内容としては、上記

loadData()に、二次元配列を渡す
Handsontableオブジェクト生成時に、オブジェクト配列を渡す

のどちらかで実装する必要がありそうです。

　
なお、issueには、8.0.0-beta.1では修正されているとのコメントがあったため、

<!-- v8.0.0の場合は動作する -->
<script src="https://cdn.jsdelivr.net/gh/handsontable/handsontable@release/8.0.0-beta.1/dist/handsontable.full.js">
</script>
<!-- v7.3.0の場合は動作しない-->
<!--
<script src="https://cdn.jsdelivr.net/npm/handsontable@7.3.0/dist/handsontable.full.min.js">
</script>
-->