JSFiddle - React, Tailwind, and code Playground

by matbeard

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="grid">
    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr class="k-master-row"> 
            # if (LastName) { #
          		<td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
          	# } else { #
          <td class="k-hierarchy-cell"></td>
          	# } #
            <td> #= FirstName # </td>
            <td> #= LastName # </td> 
        </tr>
    </script>

    <script id="detailTemplate" type="text/x-kendo-tmpl">
        <p>detail stuff</p>
    </script>
</div>

JavaScript

$("#grid").kendoGrid({
     columns:[
              {
                  field: "FirstName",
                  title: "First Name"
              },
              {
                  field: "LastName",
                  title: "Last Name"
              }
     ],
    
    dataSource: {
              data: [
                  {
                      FirstName: "Joe",
                      LastName: "Smith"
                  },
                  {
                      FirstName: "Jane",
                      LastName: "Smith"
                  },
                  {
                      FirstName: "Mat",
                    LastName: null
                  }]
    },
    
    rowTemplate:kendo.template($("#rowTemplate").html()),
    detailTemplate: kendo.template($("#detailTemplate").html()) 
});