JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/js-data/northwind-products"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<script id="colTmpl" type="text/template">
        $ ${UnitPrice} 
        {{if parseInt(${UnitPrice}) >= parseInt(${DeltaPrice}) }} 
        <img width='10' height='15' src= 'https://jp.igniteui.com/images/samples/templating-engine/colTemplateWithConditionalCell/arrowUp.gif' />
        {{else}}
        <img width='10' height='15' src= 'https://jp.igniteui.com/images/samples/templating-engine/colTemplateWithConditionalCell/arrowDown.gif' />
        {{/if}}
    </script>

<table id="resultGrid"></table>

JavaScript

$(function () {
            var headerTextValues = ["製品名", "単価", "在庫数", "入荷待ち"];
            $('#resultGrid').igGrid({
                dataSource: northwindProducts,
                responseDataKey: "results",
                dataSourceType: "json",
                width: "100%",
                autoGenerateColumns: false,
                columns: [
                    { headerText: headerTextValues[0], key: "ProductName", width: 300 },
                    { headerText: headerTextValues[1], key: "UnitPrice", type: 'number', width: 150, template: $( "#colTmpl" ).html() },
                    { headerText: headerTextValues[2], key: "UnitsInStock", width: 125 },
                    { headerText: headerTextValues[3], key: "UnitsOnOrder", width: 125 },
                    { headerText: " ", key: "DeltaPrice", hidden: true }
                ],
                dataBinding: function (evt, ui) {
                    var ds = ui.owner.options.dataSource.results;
                    $.each(ds, function (index, el) {
                        if (Math.random() > 0.5) {
                            el["DeltaPrice"] = parseFloat(el.UnitPrice) + 2.00;
                        } else {
                            el["DeltaPrice"] = parseFloat(el.UnitPrice) - 2.00;
                        }
                    });
                },
                features: [
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 8,
                        pageSizeList: [4, 8, 12, 16, 20]
                    }
                ]
            });
        });