JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2013.1.319/styles/kendo.silver.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<div id="grid" style="width:100%;height:600px;"></div>

JavaScript

$(function () {
    var totalToGen = 10000000;
    var data = new kendo.data.DataSource({
        pageSize: 50,
        serverPaging: true,
        serverSorting: true,
        transport: {
            read: function (options) {
                var _options = options;
                console.log(options);
                var tmp = [];
                for (var i = 0; i < options.data.take; i++) {
                    tmp.push({
                        Index: (i + options.data.skip + 1),
                        Name: "Item " + (i + options.data.skip + 1)
                    });
                }
                options.success(tmp);
            }
        },
        schema: {
            total: function () {
                return totalToGen;
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: data,
        scrollable: {
            virtual: true
        },
        navigatable: true,
        selectable: true,
        columns: ["Index", "Name"]
    });

    alert("Ready to display " + numeral(data.total()).format('0,0') + " records");
});