JSFiddle - React, Tailwind, and code Playground

by steakpi

HTML

<div id="dataOut"></div>
<div id="jsonOut"></div>

CSS

body{
    font-size:10px;
    font-family:arial;
}
tr{
    background:#ddd;
}
.row1{
    background:#ccc;
}

JavaScript

url ='https://spreadsheets.google.com/feeds/cells/0Aut4ETkSs0cFdGphZlgtUk16OHhVNjVIdk5jU3huX2c/od6/public/values?alt=json'

$.getJSON(url, function(data) {
    entries = data.feed.entry;
    var row = 0;
    var col = 0;
    var content = "";
    var html;
    var arr =[];
    var obj ={};
    var numberOfColumns = {};
    //console.log(entries);
    
    //loops through all cells
    for(i=0;i<entries.length;i++){
        //console.log(entries[i].gs$cell.row);
        row = entries[i].gs$cell.row;
        col = entries[i].gs$cell.col;
        content = entries[i].gs$cell.$t;
        
        numberOfColumns = col;
        
       
       //console.log(i + " " +col)
       //obj.content = content;
       //obj.row = row; 
       //obj.column = col;
       // arr.push(obj);
       // console.log(obj.row)
       
        //bum = [{column: col, row: row}];
        //  arr.push(bum)
        
        /*
        html = "<div>";
        html +="<span class='row"+row+ " " + 'col'+col+"'>"+content+"</span>";
        html +="</div>";
        $('#dataOut').append(html);
        */
    }
    
 //console.log(numberOfColumns)
     
    //flat version
        html = "<table><tr class='row1'>";
    
        html +="<td>"+entries[0].gs$cell.$t+"</td>";
        html +="<td>"+entries[1].gs$cell.$t+"</td>";
        html +="<td>"+entries[2].gs$cell.$t+"</td>";
        html +="<td>"+entries[3].gs$cell.$t+"</td>";
        html +="<td>"+entries[4].gs$cell.$t+"</td>";
        html +="<td>"+entries[5].gs$cell.$t+"</td>";
        html +="<td>"+entries[6].gs$cell.$t+"</td>";
        html +="<td>"+entries[7].gs$cell.$t+"</td>";
        html +="<td>"+entries[8].gs$cell.$t+"</td>";
        html +="<td>"+entries[9].gs$cell.$t+"</td>";
    
        html +="</tr>";
        html += "<tr class='row2'>";
    
        html +="<td>"+entries[10].gs$cell.$t+"</td>";
        html +="<td>"+entries[11].gs$cell.$t+"</td>";
        html +="<td>"+entries[12].gs$cell.$t+"</td>";
        html...