JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- BEGIN: Underscore Template Definition. -->
<script type="text/template" class="template">    
    <!-- collect some info, better to do outside of temmplate,
         but to keep with the idea of doing it all in a template -->
    <% 
    //////
    // Collect the header data into the hdrs variable
    ////
    
    var colsUnderSubCols = data["Columns under subColumns"]
    var hdrs = [[]]; // Initialize the hdrs array as an array with one array element.

    // Walk through each column header
    _.each(data["Column Headers"], function(tophdr, tind){ 
        var n=1;
    
        // First take the first row of headers, since they are specified in a different format
        // than subsequent headers (they are specified as strings, not arrays).
    
        hdrs[0].push(tophdr.slice(0, 1));

        // Next, take the subsequent arrays that represent the rest of the sub-columns.
        // Note that these do not include the final columns, as those are also specified
        // differently due to the awkward JSON structure and are tacked on at the very end.
    
        var otherhdrs = tophdr.slice(1, tophdr.length);

        // walk through each of the array-based sub-columns
    
        for(var m=0; m<otherhdrs.length; m++){
    
            // As we are building the header columns by name, we need to iterate over the
            // over the number of headers that will be in the row representing this depth
            // of sub-column, so we aggregate the multiplicative value of each:
    
            n *= otherhdrs[m].length;

            // using the final number of columns for this depth, we can determine the 
            // column name by the remainder of our iteration index divided by the length
            // of unique column names at our current column header...

CSS

td{
    text-align:center;
    border:1px solid gray;
}

JavaScript

var data11 = { "Column Headers" : [ // Hierarchy is not limited to two levels, it is n level
    [  "Column1" , ["1", "2", "3"],["11", "12", "13"],["111", "121", "133"] ], 
    [  "Column2" , ["1", "2", "3"],["21", "22", "23"],["211", "222", "223"] ],
    [  "Column3" , ["1", "2", "3"],["31", "32", "33"],["311", "322", "333"] ]  
],
"Columns under subColumns" : ["I am column 1", "I am column 2", "I am column 3", "I am column 4"],
"Data for Table" :[
    { "name": ["Group 1", "GA", "G1", "ga"], "data" : [[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6],[0,1,5,6],[1,2,5,6],[45,20,5,6]]},
    { "name": ["Group 1", "GA", "G2", "gb"], "data" :...