JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<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.3.1119/styles/kendo.default.min.css">
Source Length: <span data-bind="text: guarantorDataSourceLength"></span>
<div id="guarantorGrid"
     data-role="grid"
     data-editable='{"destroy":true}'
     data-sortable="true"
     data-pageable="false"
     data-selectable="true"
     data-bind="source: guarantorDataSource"
     data-columns='[
                        { "field": "ID", "title": "ID"},
                        { "field": "Name", "title": "Name", "width": "200px"},
                        { "field": "IsMan", "title": "IsMan"},
                        { "command": "destroy" }
                       ]'
     data-row-template="row-template">
</div>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td>
            <span data-bind="text: ID"></span>
        </td>
        <td>
            <span data-bind="text: Name"></span>
        </td>
        <td># if (IsMan === true) {# Y #} else {# N # } #</td>
        <td>
            <a class="k-button k-button-icontext k-grid-delete" href="\#" data-bind="click: delClick"><span class="k-icon k-delete"></span>Delete</a>
        </td>
    </tr>
</script>

JavaScript

$(document).ready(function () {

        var viewModel = kendo.observable({
            guarantorDataSource: [],
            guarantorDataSourceLength: function () {
                return this.get("guarantorDataSource").length;
            }
        });

        

        kendo.bind($("body"), viewModel);

        viewModel.set("guarantorDataSource", [
            { ID: "A001", Name: "Tom", IsMan: true },
            { ID: "A002", Name: "John", IsMan: true },
            { ID: "A003", Name: "Mary", IsMan: false }
        ]);
        
    });