JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.blueopal.min.css">
<script src="http://demos.telerik.com/kendo-ui//content/shared/js/people.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<div id="grid"></div>
<button id="createGrid">Create grid</button>

JavaScript

$("#createGrid").click(function() {
    var oldgrid = $("#grid").data("kendoGrid");
    if (oldgrid) {
        oldgrid.destroy();
        
        $("#grid").html("");
        
    }
    var grid = $("#grid").kendoGrid({
        dataSource: {
            data: createRandomData(50),
            schema: {
                model: {
                    fields: {
                        City: { type: "string" },
                        Title: { type: "string" },
                        BirthDate: { type: "date" }
                    }
                }
            },
            pageSize: 15
        },
        height: 300,
        sortable: true,
        filterable: true,
        pageable: true,
        columns: [
            {
                title: "Name",
                width: 160,
                filterable: false,
                template: "#=FirstName# #=LastName#"
            },
            {
                field: "City",
                width: 130,
            },
            {
                field: "Title",
            },
            {
                field: "BirthDate",
                title: "Birth Date",
                format: "{0:MM/dd/yyyy HH:mm tt}",
                filterable: {
                    ui: "datetimepicker"
                }
            }
        ]
    });
});