JSFiddle - React, Tailwind, and code Playground

by draunkin

HTML

<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="grid1" style="height: 300px;"></div>

JavaScript

$('#grid1').kendoGrid({
        groupable: false,
        selectable: false,
        sortable: true,
        filterable: true,
        autoBind: true,
        //scrollable: {
        //    virtual: true
        //},
        dataSource: new kendo.data.DataSource({
            data: [],
            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
            //pageSize: 100,
        }),
        columns: [{
                                field:"OrderID",
                                filterable: false
                            },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 120,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 260
                            }, {
                                field: "ShipCity",
                                title: "Ship City",
                                width: 150
                            }
                        
        ]
    });
            
            
            $.get("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders", function(data) {
                $('#grid1').data('kendoGrid').dataSource.data(data);
            });