JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

Student Details:
<div id="grid">        
       
  </div>

CSS

.headercell {
    width: 20%;
    height: 25px;
    float: left;
    border: 1px solid black;   
    background-color: gray;
    text-align: center;
    color: white;
}
.row 
{
    display: table;
    width: 100%;
    table-layout: fixed;    
}
.cell {
    display: table-cell;
    width: 20%;
    height: 25px;
    float: left;
    border: 1px solid gray; 
    text-align: center;   
}

JavaScript

function createHeader(columns ) {
     var gridDiv = document.getElementById('grid');
    var headerDiv = document.createElement('div');
    headerDiv.id='gridHeader';
    headerDiv.class='gridHeader';
    gridDiv.appendChild(headerDiv); 
    for(var i = 0; i< columns.length;i++)
     {
         var columnDiv = document.createElement('div');         
         columnDiv.className='headercell';
         columnDiv.innerHTML = columns[i].Column;
         headerDiv.appendChild(columnDiv); 
     }
        
}

    var gridColumns = [{"Column":"Name"}, {"Column":"Age"},{"Column":"Gender"}];

    var data = [{"Name":"Ambirini", "Age":"22", "Gender":"Female"},
                {"Name":"Usha", "Age":"22", "Gender":"Female"}];  

    createHeader(gridColumns );	

   var gridDiv = document.getElementById('grid');
    for(var i = 0; i< data.length;i++)
     {
            var rowDiv = document.createElement('div');   
            rowDiv.className="row";
            gridDiv.appendChild(rowDiv); 
         
 for (var prop in data[i]) {
     if (data[i].hasOwnProperty(prop)) { 
         var cellDiv = document.createElement('div');         
         cellDiv.className='cell';
         cellDiv.innerHTML = data[i][prop];
         rowDiv.appendChild(cellDiv); 
   // alert("prop: " + prop + " value: " + data[i][prop])
  }
     
}
     
       
 }