JSFiddle - React, Tailwind, and code Playground

by empie

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<div id="grid"></div>

JavaScript

$("#grid").kendoGrid({
    pageable: true,
    scrollable: false,
    dataSource: {
        serverPaging: true,
        schema: {
            data: "data",
            total: "total"
        },
        pageSize: 10,
        transport: {
            read: function(options) {
                var data = getData(options.data.page);
                options.success(data);
            }
        },
        update: function() {}
    }
});

function getData(page)
{
    var dataArr = [];
    for (var i = 0; i < 10; i++)
        dataArr.push({ text: "Item " + (i + 1) + " on page " + page, value: 1});
    
    return {data: dataArr, total: 100};
}