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.1407/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

$("#grid").kendoGrid({
     dataSource: {
         type: "odata",
         serverPaging: false,
         serverSorting: false,
         pageSize: 1000,
         transport: {
             read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
         },
         group: {
             field: "ShipCity", aggregates: [
                     { field: "OrderID", aggregate: "count" },
                     { field: "CustomerID", aggregate: "count" },
                     { field: "ShipName", aggregate: "count" },
                     { field: "ShipCity", aggregate: "count" }
                  ]
         },

        aggregate: [{ field: "OrderID", aggregate: "count" },
                      { field: "CustomerID", aggregate: "count" },
                      { field: "ShipName", aggregate: "count" },
         ]
     },
     height: 280,
     scrollable: {
         virtual:true
     },
     sortable: true,
     groupable: true,
     columns: [
        { field: "OrderID", aggregates: "count", groupHeaderTemplate: "OrderID: #= value # (Count: #= count#)" },
         { field: "CustomerID", aggregates: "count", groupHeaderTemplate: "CustomerID: #= value # (Count: #= count#)", footerTemplate: "Total Count: #=count#" },
         { field: "ShipName", title: "Ship Name", aggregates: "count", groupHeaderTemplate: "ShipName: #= value # (Count: #= count#)" },
         { field: "ShipCity", title: "Ship City", aggregates: "count", groupHeaderTemplate: "ShipCity: #= value # (Count: #= count#)" }
     ],
     dataBound: function () {
         var grid = this, idx, length;        
         grid.table.find(".k-grouping-row").each(function() {
             
         });
         
         
         var groups = grid.dataSource.group();
         for (idx = 0, length = groups.length; idx < length ; idx++) {
             console.log("Grouped on: " + groups[idx].field);
         }
     }
 });