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>
<table id="grid" style="width: 100%;">
</table>
 
<script id="rowTemplate" type="text">             
     <tr>         
         #= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
         <td>${Id}</td>
         <td>${StatusText}</td>
         <td>${CommissionTypeText}</td>
     </tr>
</script>

JavaScript

var localData = [
    {Id: 1, StatusText: "Status 1", CommissionTypeText: "Commission 1"},
    {Id: 2, StatusText: "Status 2", CommissionTypeText: "Commission 2"},
    {Id: 3, StatusText: "Status 3", CommissionTypeText: "Commission 3"}
];

var dataSource = new kendo.data.DataSource( {
     data: localData,
     schema: {
         model: {
             fields: {
                 Id: { type: "number" },
                 StatusText: { type: "string" },
                 CommissionTypeText: { type: "string" }
             }
         }
     }
});

$("#grid").kendoGrid({
     dataSource: dataSource,
     rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
     scrollable: true,
     height: 500,
     sortable: true,
     filterable: true,
     groupable: true,
     pageable: true,
     columns: [
         {
             field: "Id",
             title: "Id",
             filterable: false
         },
         {
             field: "StatusText",
             title: "StatusText"
         },
         {
             field: "CommissionTypeText",
             title: "CommissionTypeText"
         }
     ]
});