JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css">
<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>
<table id="grid">
<thead>
<tr>
<th>
</th>
<th>
Details
</th>
<th>
Comments
</th>
</thead>
<tbody>
<td colspan="3"></td>
</tbody>
</table>
<script id="detailsTemplate" type="text/x-kendo-template">
<tr class="row">
<td>
<div class="image">
<img src="<#= images.thumbnail.url #>" alt="<#= user.username #>" />
</div>
</td>
<td>
<div><span class="strong">Caption: </span><# if ( caption ) { #>
<#= caption.text #>
<# } #>
</div>
<div><span class="strong">Username: </span>
<#= user.username #>
</div>
<div><span class="strong">Filter: </span>
<#= filter #>
</div>
</td>
<td>
<div class="comments">
<# $.each(comments.data, function(data) { #>
<div class="comment">
<span class="strong"><#= this.from.username #>: </span><#= this.text #>
</div>
<# }); #>
</div>
</td>
</tr>
</script>
CSS
.row {
margin-bottom: 20px;
border-bottom: thin solid black;
}
.image {
text-align: center;
}
.comments {
height: 100px;
}
.comment {
margin-top: 3px;
margin-bottom: 3px;
width: 90%;
}
.strong {
font-weight: bold;
}
JavaScript
$(function() {
$("#grid").kendoGrid({
rowTemplate: kendo.template($("#detailsTemplate").html()),
dataSource: {
transport: {
read: {
url: "https://api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=25",
dataType: "jsonp"
}
},
schema: {
data: "data"
}
},
height: 500,
scrollable: true,
selectable: true
});
});