Grid.jsでセル内でHTMLタグを使う方法

Grid.jsは、高速で軽量なテーブルグリッドライブラリで、機能豊富な表の生成・操作が可能。 シンプルで使いやすく、データのソート、フィルタリング、ページネーションがサポートされており、クライアント側で動作する。

とても便利なライブラリであるが、セル内でHTMLを使いたいときにどうすればよいか悩んだ。 Tableタグで表組みをしてからGrid.jsを適用すればいけそうだが、遅そうだ。

結論を言えば、gridjs.html()で記述すればよい。 具体的には、

new gridjs.Grid({
  columns: ["Name", "Email", "Phone Number"],
  data: [
    [gridjs.html("<strong>John</strong>"), "john@example.com", "(353) 01 222 3333"],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("wrapper"));

こんな感じ。最初のJohnにタグが適用される。 たったこれだけのことだが、かなり悩んだので参考になれば幸いだ。