JSFiddle - React, Tailwind, and code Playground

by Neeraj

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <section class="section-header">
        <div class="app-header-div-title">
          <h1>Book Club</h1>
          <div style="display:inline;float:right;">
            <input id="loginName" type="text" placeholder="Login User" />
            <input type="submit" value="login" onClick="login()" />
          </div>
        </div>
        <div id="loggedIN">
          No Logged in User
        </div>
        <div class="app-header-div">
          <input type="search" id="myInput" name="myInput" placeholder="Search .." onkeyup="myFunction()" />
        </div>
      </section>
      <section id="showData"></section>
      <section>
        <table id="myTable">
          <tr>
            <!-- <td>4</td> -->
            <td><input type="text" id="title" name="title" placeholder="title" /></td>
            <td><input type="text" id="author" name="author" placeholder="Author" /></td>
            <td><input type="text" id="lendor" name="lendor" placeholder="Lendor" /></td>
            <td><input type="text" id="borrower" name="borrower" placeholder="Borrower" /></td>
            <td><input type="submit" value=" ADD" onclick=add(); /></td>
          </tr>
        </table>
      </section>
    </div>

  </body>

</html>

CSS

body {
  font-family: sans-serif;
}

.section-header {
  margin-top: 20px;
  margin-bottom: 20px;
}

.app-header-div {
  margin-top: 20px;
  margin-bottom: 20px;
}

.app-header-div-title h1 {
  display: inline;
}



#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;
}

JavaScript

let myBooks = [{
    ID: "1",
    Title: "Book 1",
    Author: "Author 1",
    lendor: "User C",
    Borrower: "User B",
    Actions: `<input type="submit" value=" Request Next" />`
  },
  {
    ID: "2",
    Title: "Book 2",
    Author: "Author 2",
    lendor: "User C",
    Borrower: "-",
    Actions: `<input type="submit" value=" Borrow" />`
  },
  {
    ID: "3",
    Title: "Book 3",
    Author: "Author 3",
    lendor: "User A",
    Borrower: "User B",
    Actions: `-`
  },
  {
    ID: "4",
    Title: "Book 4",
    Author: "Author 4",
    lendor: "User B",
    Borrower: "User C",
    Actions: `<input type="submit" value=" Return" />`
  },
  {
    ID: "5",
    Title: "Book 5",
    Author: "Author 5",
    lendor: "User A",
    Borrower: "-",
    Actions: `<input type="submit" value=" Return" />`
  }
];

let tableFromJson = () => {
  // the json data.


  // Extract value from table header.

  let col = [];
  for (let i = 0; i < myBooks.length; i++) {
    for (let key in myBooks[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }

  // Create a table.
  const table = document.createElement("table");
  table.setAttribute("id", "myTable");

  // Create table header row using the extracted headers above.
  let tr = table.insertRow(-1); // table row.

  for (let i = 0; i < col.length; i++) {
    let th = document.createElement("th"); // table header.
    th.innerHTML = col[i];
    tr.appendChild(th);
  }

  // add json data to the table as rows.
  for (let i = 0; i < myBooks.length; i++) {
    tr = table.insertRow(-1);

    for (let j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      // console.log(tabCell)
      
      //tabCell.innerHTML = myBooks[i][col[j]];
      //if(myBooks[i][col[col.length]])
      //debugger;
      tabCell.innerHTML = myBooks[i][col[j]];
      
      //console.log("tabCell ", tabCell.childNodes[5])

    }
    
  }
  
  var inputVal;
      inputVal = document.getElementById("loginName");
  ...