<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>商品名</th>
      <th>在庫数</th>
      <th>金額</th>
    </tr>
  </thead>
  <tbody id='tbody'>
  </tbody>
</table>
var tbody = document.getElementById("tbody");

var productData = [
  { id: 10348071, name: "フレッシュバター", unit: 100, price: 22500 },
  { id: 73947292, name: "ブラックペッパー", unit: 129, price: 40800 },
  { id: 33749733, name: "ロッキーチーズ", unit: 144, price: 12000 },
  { id: 90740274, name: "ホワイトソルト", unit: 207, price: 42240 },
  { id: 68679705, name: "極上マカロニ", unit: 309, price: 11400 }
];

for (var i = 0; i < productData.length; i++) {
  var row = tbody.insertRow();
  row.innerHTML = wijmo.format(
    "<tr><td>{id}</td><td>{name}</td><td>{unit}</td><td>{price:c}</td></tr>",
    productData[i]
  );
}

External CSS

  1. https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css
  2. https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js
  2. https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js