JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<h3> Double click between column headers to auto size the column </h3>

<div id="grid"></div>

JavaScript

var grid = new kendo.ui.Grid($("#grid"), {
        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: 2,
            serverPaging: true           
        },
        height: 250,                     
        pageable: true,
        scrollable: true,
        resizable: true,
        columns: [{
                field:"OrderID",
                filterable: false
            },
              {
                  field: "Freight",
                  width: 150
              },
            {
                field: "OrderDate",
                title: "Order Date",
                width: 100,
                format: "{0:MM/dd/yyyy}"
            }, {
                field: "ShipName",
                title: "Ship Name",
                width: 50
            }, {
                field: "ShipCity",
                title: "Ship City"
            }
        ]     
 });

    grid.element.on("dblclick", ".k-resize-handle", function (e) {
        var th = $(this).data("th"),
         index = $.inArray(th[0], th.parent().children(":visible")),
         cloneTable = $("<div />").css({
             position: "absolute",
             visibility: "hidden"
         }).html(grid.element.clone().css({
             "table-layout": "auto",
             "white-space": "nowrap",
             "width": "auto"
         })
               .find("col").css("width", "auto").end()
           ).appendTo(grid.wrapper),
        widths = $("td:nth-child(" + (index + 1) + ")",...