JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<div id="grid" 
    data-role="grid" 
    data-bind="source: PersonData, events: { detailInit: onDetailInit }" 
    data-row-template="rowTemplate" 
    data-detail-template="detailTemplate"
    data-columns='[{"title":"FirstName", "width":"20%"}, {"title":"LastName", "width":"15%"}]'>
</div>
        
<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr class="k-master-row"> 
        <td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
        <td> ${FirstName} </td>
        <td> ${LastName} </td> 
    </tr>
</script>

<script id="detailTemplate" type="text/x-kendo-tmpl">
    <div  data-role="grid" 
        data-bind="source: children" 
    data-columns='[{template: "<span data-bind=\"text: Name\"></span>"}]'>
    </div>
</script>
                
<script id="detailTemplaterowtemplate" type="text/x-kendo-tmpl">
    <tr > 
         <td> ${Name} </td> 
    </tr>
</script>

JavaScript

var vm = function() {

    var self = {};
    self.PersonData = [
        {
        FirstName: "Joe",
        LastName: "Smith",
        children: [{
            Name: "JoeChild1"},
        {
            Name: "JoeChild2"}]},
    {
        FirstName: "Jane",
        LastName: "Smith",
        children: [{
            Name: "SmithChild1"},
        {
            Name: "SmithChild2"}]}];


    return self;

};

var ovm = kendo.observable(vm());

ovm.set("onDetailInit", function(e) { 
    var dataItem = $("#grid").data("kendoGrid").dataItem(e.masterRow);
    kendo.bind(e.detailCell, dataItem);
});

kendo.bind($('#grid'), ovm);