JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var localDataSource = new kendo.data.DataSource({
    data: [{firstName: "Mike", age: 25}, {firstName: "Chris", age: 30}, {firstName:"John", age: 29}],
    aggregate: [{field: "age", aggregate: "sum"}],
    schema: {model: {fields: {firstName: {editable: false}, age: {editable: true, type: "number"}}}},
    change: function(e){
                  var theGrid = $('#grid').data('kendoGrid');  
                  // only update the footer, don't want the whole grid refreshed
                  theGrid._footer();
    }        
});

function inputNumberType(container, options) {
    $("<input type='text' value='"+ options.field + "'/>")
        .appendTo(container);
};

var element = $(grid).kendoGrid({
    dataSource: localDataSource,
    columns: [{title: "First Name", field:"firstName"},
              {title: "Age", field:"age", aggregates:"sum", width:0, footerTemplate:"#= sum #", editor: inputNumberType}],
    autoBind: true,
    rowTemplate: "<tr data-uid='#= uid #'><td><span>${firstName}</span></td><td><input type='text' value='${age}'/></td></tr>",
    editable: true            
});