JSFiddle - React, Tailwind, and code Playground

by agasthyanavaneeth

HTML

<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    
    
</head>
<body>
    <div id="datatable" style="position:absolute;top:100px;left:200px; width:1000px;" 
    data-tabledata='[{ "continent": "asia", "country":"india", "population": 100, "gdp":4},{ "continent": "asia", "country":"china", "population": 130, "gdp":20},{ "continent": "asia", "country":"pakisthan", "population": 20, "gdp":1},{ "continent": "Europe", "country":"UK", "population": 2, "gdp":15},{ "continent": "Europe", "country":"France", "population": 4, "gdp":16},{ "continent": "Europe", "country":"Germany", "population": 5, "gdp":21},{ "continent": "asia", "country":"bangladesh", "population": 18, "gdp":1}]'></div>
    <!-- we provide the json source here in the custom attribute  -->
     
</body>
<script>
</script>    

  </html>

CSS

.header{
background: #666666;
padding: 10px;
}
span{
display:inline-block;
width:auto;
}
.colLabel{
font-family:'Segoe UI';
background: #666666;
font-size:20px;
color: #ffffff;
padding : 0px;
display: inline-block;
}
.footer
{
height:20px;
font-family:'Segoe UI';
font-weight:bold;
}
.tblbody
{
font-family:'Segoe UI';
font-size:20px;
color:#2A2A2A ;
padding : 0px;
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left:9px;
vertical-align:top;
}
#tblbdy div:nth-child(2N)
{
background-color: #f7f7f7;
}
.vrtclTop{
vertical-align:top;
}
.plusminus{
font-family:'segoe UI';
cursor:pointer;
display:inline-block;
margin-left:auto;
margin-right: 50px;
float: right;
}
#tblbdy div:nth-child(2N+1)
{
background-color: #FFF;
}
.circle {
 width: 18px;
 height: 18px;
 background: #666666; 
 -moz-border-radius: 9px; 
 -webkit-border-radius: 9px;
 border-radius: 9px; 
 }

JavaScript

var keys= [], JsonTree = {}, level=0,maxLevel=1, nodelevels=0,tempnodelevel,mspans=[],nodeNumber=0;
(function ($) {
    $.fn.tableJS = function (a,width) {
        this.each(function () {
                var header = $('<div/>', {class:'header'});
                var datadiv = $('<div/>', {id:'tblbdy'});    
                $(this).append(header);$(this).append(datadiv);    
                var i=0;
                $.each(a[0],function(key,value){
                var colLabel = $('<div/>',{class:'colLabel',text:key,'width' :width[i]});
                keys.push(key);
                header.append(colLabel);    
                i++;
                });
                calculateWidthInPx(width,$(this).outerWidth(true))
                CreateTree(a);
                ConstructTableTree(JsonTree,datadiv,width);
            }); // end for each
    }; // end of functions

})(jQuery);

// This is autility function that checks if an element exists in the array or not.
function isAvailable(a,b)    {
    var yes = false;
    $.each(a,function(index,ele)
        {
        if(ele == b)
            yes = true;
        });
    return yes;
}

// This method creates the jsonTree according to the given json Array.
function CreateTree(a)    {
    $.each(a,function(index,ele)    {
        var i=0;
        var nums=[]
        $.each(ele,function(key,value)    {
            var Nodetype;
            if(!isNaN(value))
            {
                Nodetype=true;
                nums.push(i);
            }else
                Nodetype=false;
            ProcessProperty(ele,i,Nodetype,nums)

        i++;
        }) // for each of json object
    }) // for each of json array
}

// This method processes the each and every key of the JSON object and creates the tree accordingly
function ProcessProperty(ele,i,Nodetype,nums)    {
    var path,skip=0,len=nums.length;
    for(var j=0;j<=i;j++)
    {
        if(j == 0 )
            path=ele[keys[j]];
        else    {
            if(Nodetype ===...