JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.silver.min.css">
<div id="example">
    
    <div data-role="grid"
    date-scrollable="true"
    data-editable="true"
    data-toolbar="['pdf', 'excel']"
    data-columns="[
                                 { 'field': 'ProductName', 'width': 270 },
                                 { 'field': 'UnitPrice' },
                              ]"
    data-bind="source: products,
                            visible: isVisible,
                            events: {
                              save: onSave
                            }"
    style="width: 480px; height: 200px">
       
    </div>

JavaScript

var viewModel = kendo.observable({
    isVisible: true,
    products: new kendo.data.DataSource({
        data: [{
            ProductID: 1,
            ProductName: "Product 1",
            UnitPrice: 22.33
        }],
        schema: {
            model: {
                id: "ProductID"
            }
        }
    })
});

kendo.bind($("#example"), viewModel);
	
viewModel.products.add({ProductID: 9, ProductName: "Product 2", UnitPrice: 211});