JSFiddle - React, Tailwind, and code Playground
HTML
<button id="btnGridPopulator">Bind grid</button>
<table id="myClientGridView">
<colgroup>
<col width="100px" />
<col width="200px" />
</colgroup>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</table>
CSS
table th {
text-align: left;
}
JavaScript
$(function() {
$("#btnGridPopulator").click(bindGrid);
});
function bindGrid() {
// here I'll simulate a message, as if it came from your SignalR
onmessage('[{"id":0,"title":"My videos"},{"id":1,"title":"My images"},{"id":2,"title":"My documents"}]');
}
function onmessage(msg)
{
var arr = JSON.parse(msg);
for(var i = 0; i < arr.length; i++) {
$("#myClientGridView").append("<tr><td>" + arr[i].id + "</td><td>" + arr[i].title + "</td></tr>");
}
}