JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

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.silver.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
 <div id="example" class="k-content">
      <button style="display:none" onclick='$("#grid").data("kendoGrid").dataSource.page(900)'>Goto Page 900</button>
            <div id="loading" class="demo-section" style="text-align:center">
                Generating test data...
            </div>
    
            <div id="grid"></div>

JavaScript

$(document).ready(function() {
                    generatePeople(100000, function(data) {
                        $("#loading").hide();
                        $("button").show();
                        $("#grid").kendoGrid({
                            dataSource: {
                                data: data,
                                pageSize: 50
                            },
                            height: 430,
                            scrollable: {
                                virtual: true
                            },
                            columns: [ { field: "Id", title: "ID", width: "70px" },
                                { field: "FirstName", title: "First Name", width: "130px" },
                                { field: "LastName", title: "Last Name", width: "130px" },
                                { field: "City", title: "City", width: "130px" },
                                "Title"
                            ]
                        });                          
                    });
                });