JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<link href="http://www.igniteui.com/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js"></script>
<script src="https://rawgit.com/IgniteUI/igniteui-angular/master/src/igniteui-angular.js"></script>
<script src="http://www.igniteui.com/data-files/northwindProducts.js"></script>
<script id="colTmpl" type="text/template">
{{if parseInt(${key}) > 5 }}
<font color='green'>${key}</font>
{{else}}
<font color='red'>${key}</font>
{{/if}}
</script>
<script type="text/javascript">
$(function () {
var products = [
{ "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "Avalibility": 5, "Count": 12 },
{ "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "Avalibility": 15, "Count": 5 },
{ "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "Avalibility": 12, "Count": 1 },
{ "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" , "Avalibility": 8, "Count": 4 },
{ "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036", "Avalibility": 7, "Count": 10 },
{ "ProductID": 317, "Name": "LL Crankarm",...