JSFiddle - React, Tailwind, and code Playground

by Raja Ovi

CSS

*{font-family:'verdana'}table{margin-bottom:15px}input{margin:5px}th,td{border:1px solid #ccc;font:13px 'verdana';padding:5px}th{font-weight:bold}table [type="text"],table [type="email"],table [type="number"]{display:block;width:90px}[value="Delete"],[value="Copy"]{display:block}

JavaScript

var obj = [{
  Firstname: "Bob",
  Lastname: "Mayer",
  Email: "bob@mayer.com",
  Number: "123456789"
}, {
  Firstname: "Steven",
  Lastname: "Spil",
  Email: "steven@spill.com",
  Number: "987654321"
}, {
  Firstname: "Paul",
  Lastname: "Taucker",
  Email: "paul@tack.com",
  Number: "578954321"
}, {
  Firstname: "computer",
  Lastname: "Tech",
  Email: "comp@tech.com",
  Number: "418741876"
}, {
  Firstname: "User",
  Lastname: "Interface",
  Email: "user@inter.in",
  Number: "949796928"
}];

var editCounter = 0;

var table = document.createElement('table');
table.id = "table";

var headcell = document.createElement('th');
var cell = document.createElement('td');
var input = document.createElement('input');

var tableContainer = document.createElement('div');
document.body.appendChild(tableContainer);

var filter = document.createElement('input');
filter.type = "text";
filter.placeholder = "Filter";
filter.id = "tabFilter";
filter.setAttribute("onkeyup", "filterTable()");
tableContainer.appendChild(filter);

var formContainer = document.createElement('form');
formContainer.id="details";
document.body.appendChild(formContainer);

function createTable() {

  tableContainer.appendChild(table);
  var row = document.createElement('tr');
  table.appendChild(row);

  headcell = document.createElement('th');
  row.appendChild(headcell);
  headcell.innerHTML = "Select";

  headcell = document.createElement('th');
  row.appendChild(headcell);
  headcell.innerHTML = "Sl.No";

  Object.keys(obj[0]).forEach(function(val) {
    headcell = document.createElement('th');
    row.appendChild(headcell);
    headcell.innerHTML = val;
  });
  
  for (var i = 0; i < obj.length; i++) {

    var btnSave = document.createElement('button');
    btnSave.innerHTML = "Save";
 
    var btnEdit = document.createElement('input');
    btnEdit.type = "button";
    btnEdit.value = "Edit";
 
    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.id =...