JSFiddle - React, Tailwind, and code Playground

by blackjacketmack

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<table id="grid">
    <colgroup>
        <col class="photo" />
    </colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2"></td>
        </tr>
    </tbody>
</table>


<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td class='#= age <= 30 ? "underthirty" : "overthirty"#'>
            <strong>#= name #</strong>
        </td>
        <td>
            #= age #
        </td>
    </tr>
</script>

CSS

.underthirty{
    color:green;
}

.overthirty{
    color:red;
}

JavaScript

$(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ],
                        rowTemplate: kendo.template($("#rowTemplate").html()),
                        height: 430
                    });
               });