JSFiddle - React, Tailwind, and code Playground

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.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div data-role="grid"
     data-scrollable="true"
     data-columns="[{ field:'Id'},
                    { field: 'CaseNum'},
                    { field: 'Keywords'}]"
     data-bind="source: itemsDS"
     data-row-template="rowTemplate"
     data-resizable="true" data-filterable="true" data-groupable="true" id="grid">
 
<script id="rowTemplate" type="text">             
     <tr>         
         #= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
         <td>#=Id#</td>
         <td>#=CaseNum#</td>
         <td>#=Keywords#</td>
     </tr>
</script>

JavaScript

var items = [
    {Id: 1, CaseNum: "001", Keywords: "Commission 1"},
    {Id: 2, CaseNum: "002", Keywords: "Commission 2"},
    {Id: 3, CaseNum: "003", Keywords: "Commission 3"}
];

var viewModel = kendo.observable({
    itemsDS: new kendo.data.DataSource({
            data: items,
            schema: {
                model: {
                    fields: {
                        Id: { type: "number" },
                        CaseNum: { type: "string" },
                        Keywords: { type: "string" }
                    }
                }
            }
        })
    });
kendo.bind($("#grid"), viewModel);