JSFiddle - React, Tailwind, and code Playground

by whoamiwho

HTML

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

CSS

#grid {
    overflow-x: scroll;
}

JavaScript

$(document).ready(function () {
    var data = [];
    var colsDef = [];
    for (var row = 0; row < 60; row++) {
        var rowData = {};
        for (var col = 0; col < 20; col++) {
            rowData["col_" + col] = "value_" + row + "_" + col;
        }
        data.push(rowData);
    }
    for (col = 0; col < 20; col++) {
        colsDef.push({ field: "col_" + col, width: 70})
    }

    var grid = $("#grid").kendoGrid({
        dataSource: {
            data    : data,
            pageSize: 5
        },
        columns   : colsDef,
        pageable  : true
    }).data("kendoGrid");
});