JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

td {
    white-space: nowrap;
}

JavaScript

function visible_in_container(p, e) {
    var z = p.getBoundingClientRect();
    var r = e.getBoundingClientRect();

    // Check style visiblilty and off-limits
    return (!e.style.opacity || e.style.opacity > 0) && e.style.display !== 'none' && e.style.visibility !== 'hidden' && !(r.top > z.bottom || r.bottom < z.top || r.left > z.right || r.right < z.left);
}

function onDataBound(e) {
    $("#myGrid").on("keyup", function (e) {
        var $ele = $(".k-state-focused");
        var $grd = $("#myGrid").find(".k-virtual-scrollable-wrap");
        if (!visible_in_container($grd[0], $ele[0])) {
            $grd.animate({
                scrollTop: $ele.offset().top - $grd.offset().top + $grd.scrollTop()
            });
        }
    });
}
var savings = [{
    month: "January",
    saving: "$200",
    kind: 1
}, {
    month: "March",
    saving: "$100",
    kind: 1
}, {
    month: "March sdjhf as dfjh;as",
    saving: "$100",
    kind: 1
}, {
    month: "March",
    saving: "$100",
    kind: 1
}, {
    month: "March",
    saving: "$10000",
    kind: 1
}, {
    month: "December",
    saving: "$100",
    kind: 1
}, {
    month: "March",
    saving: "$100",
    kind: 1
}, {
    month: "March",
    saving: "$100",
    kind: 2
}, {
    month: "March",
    saving: "$100",
    kind: 3
}, {
    month: "March",
    saving: "$100",
    kind: 1
}];

var savingsDataSource = new kendo.data.DataSource({
    data: savings
});


var grid = $("#myGrid").kendoGrid({
    dataSource: savingsDataSource,
    navigatable: true,
    pageable: {
        numeric: false,
        previousNext: false
    },
    scrollable: {
        virtual: true
    },
    sortable: {
        mode: "single",
        allowUnsort: false
    },
    selectable: "row",
    height: 300,
    columns: [{
        field: "month"
    }, {
        field: "saving"
    }, {
        field: "saving"
    }, {
        field: "kind"
    }],
    dataBound: onDataBound,
}).data("kendoGrid");