JSFiddle - React, Tailwind, and code Playground

by Checha Man

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<div id="example">
    <table id="grid" data-bind="source: gridRows">
    </table>
</div>

JavaScript

var rows = [];
    var colTitles = ['id','index','str','cent','triplet'];
    var dataTypes = ['str','num','str','num','num'];
    var dataArray = [ ['id1','1','str1','100','111'],
                      ['id2','2','str2','200','222'],
                      ['id3','3','str3','300','333'],
                      ['id4','4','str4','400','444'],
                      ['id5','3','str4','300','222'],
                      ['id1','4','str3','300','444'],
                      ['id3','2','str3','500','333'],
                      ['id5','5','str5','500','555'],
                      ['id1','4','str1','200','444']
                ];

    for (var i = 0; i < dataArray.length; i++) {
        var entryArray = [];
        for (var j = 0; j < dataArray[i].length; j++) {
            var cell = dataArray[i][j];
            entryArray.push(cell);
        }
        rows.push(kendo.observable({
            entries: entryArray
        }));
    }

var viewModel = kendo.observable({
            gridRows: rows
        });

        var columns = [];

        for (var i = 0; i < colTitles.length; i++) {
            var entryIndex = "entries[" + i + "]";
            if(dataTypes[i] === 'num'){
                columns.push({
                    field: entryIndex,
                    title: colTitles[i],
                    encoded: false,
                    aggregates: ["sum"],
                    groupFooterTemplate: "Sum: #= sum #"
                });
            }
            else {
                columns.push({
                    field: entryIndex,
                    title: colTitles[i],
                    encoded: false
                });
            }
        }

        var configuration = {
            sortable: true,
            scrollable: false,
            groupable: true,
            encoded: true,
            columns: columns
        };

        var timeEditGrid = $("#grid").kendoGrid(configuration).data("kendoGrid");

        kendo.bind($('#example'), viewModel);