JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.dataviz.min.css">
<div id="grid"></div>

JavaScript

$(document).ready(function() {
    var dataVal = getData();

    var colList = new Array();

    var col1 = {
        field: "ProductLine",
        title: "ProductLine"
    };
    var col2 = {
        field: "Tier",
        title: "Tier2",
        aggregates: ["count"],
        groupFooterTemplate: "Count: #=count#"
    };
    colList.push(col1);
    colList.push(col2);


    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: function(options) {
                    options.success(getData());
                }
            },
            pageSize: 100,
            serverPaging: true,
            serverSorting: true,
            serverGrouping: true,
            serverAggregates: true,
            aggregate: [
                {
                "Tier": {
                    "count": 5
                }}
            ],
            schema: {
                data: "ViewData",
                total: "Count",
                groups: "groups",
                aggregates: "aggregates"
            },
            group: {
                field: "Tier",
                aggregates: [
                    { field: "Tier", aggregate: "count" }
                ]
            }
        },       
        height: 780,
        scrollable: true,
        sortable: false,
        pageable: true,        
        columns: colList
    });
})



function getData() {
    var dataVal = {

        "ViewData": [],
        "groups": [
            {
            "aggregates": {
                "Tier": {
                    "count": 5
                }
            },
            "field": "Tier",
            "value": "Tier 1",
            "items": [
                {
                "ProductLine": "CART for Commuters",
                "Tier": "Tier 1"},
            {
                "ProductLine": "CART for Commuters",
                "Tier": "Tier 1"},
            {
                "ProductLine": "Platinum",
                "Tier": "Tier 1"},
            {
   ...