JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<div id="grid"></div>


<script id="template" type="text/kendo-tmpl">
    The value for column: `#=this.column#` is `#=ShipCity#` 
</script>

JavaScript

$("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true           
        },
        height: 250,        
        groupable: true,                     
        pageable: true,
        columns: [{
                field:"OrderID",
                filterable: false
            },            
             {               
                title: "Ship City",
                template: $.proxy(kendo.template($("#template").html()), { column: "ShipCity" }) 
            }
        ]     
});