JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<span>scrollable: <b>false</b></span>

<div id="example" class="k-content">
    <div id="loading" class="demo-section" style="text-align:center">Generating test data...</div>
    <div id="headerWrap">
    </div>
    <div id="gridWrap">
        <div id="grid"></div>
    </div>
</div>

CSS

#gridWrap{    
    overflow: auto;
    height: 500px;    
}

#headerWrap{    
     padding-right: 17px;
}

JavaScript

function extractColHeaders(){
      

    var gridClone = $('#grid').clone();
    gridClone.attr('id', 'grid2');
    gridClone.css('height', 'auto');
    gridClone.find('tbody').remove();
    gridClone.find('colgroup').remove();
    $('#headerWrap').append(gridClone);

    $.each($('#grid').find('th'), function (i, el) {
        var width = $(el).width();
        gridClone.find('th').eq(i).css('min-width',width+'px');
    });

    
}


generatePeople(500, function (data) {
    $("#loading").hide();


    $("#grid").kendoGrid({
        dataSource: {
            data: data,
            pageSize: 300
        },
        height: 500,
        scrollable: false,
        columns: [
            "Title",
            "BirthDate",
            "Age", {
            field: "Id",
            title: "ID",
            width: 100
        }, {
            field: "FirstName",
            title: "First Name",
            width: 330
        }, {
            field: "LastName",
            title: "Last Name",
            width: 330
        }, {
            field: "City",
            title: "City",
            width: 330
        }]
    });


extractColHeaders();


});