JSFiddle - React, Tailwind, and code Playground

by Peter de Jong

HTML

<table id="table" class="table"
            data-toggle="table"
            data-search="true"
            data-filter-control="true" 
            data-show-export="true"
            data-click-to-select="true"
            data-toolbar="#toolbar">
            <thead>
               <tr>
                  <th id="0" style="visibility: hidden; display: none;"></th>
                  <th data-field="state" data-checkbox="true"></th>
                  <th data-field="prenom" data-filter-control="input" data-sortable="true">Prénom</th>
                  <th data-field="date" data-filter-control="select" data-sortable="true">Date</th>
                  <th data-field="examen" data-filter-control="select" data-sortable="true">Examen</th>
                  <th data-field="note" data-sortable="true">Note</th>
               </tr>
            </thead>
            <tbody id="tbody">
               <tr id="tabs1" class="tabs">

                  <!-- <table class="table">
                        <thead class="thead-dark"> -->
                            <!-- <tr>
                                <th scope="col">#</th>
                                <th class="col">Name</th>
                                <th class="col">Job</th>
                                <th class="col">Attribut</th>
                                <th class="col">Email</th>
                            </tr> -->
                        <!-- </thead> -->
                    <!-- </table> -->

               <tr>
                  <td id="1" style="visibility: hidden; display: none;"></td>
                  <td class="bs-checkbox ">      <input data-index="0" name="btSelectItem" type="checkbox">      </td>
                  <td>Valérie</td>
                  <td>01/09/2015</td>
                  <td>Français</td>
                  <td>12/20</td>
               </tr>

                  </div>
            </tbody>
         </table>

JavaScript

var utilisateur = [
  {
    id: 51,
    checked: false,
    prenom: "Dolores",
    date: "Fermière",
    examen: "host",
    note: "ww.dolores@gmail.com"
  },
  {
    id: 52,
    checked: true,
    prenom: "Bernard",
    date: "Robopsycologue",
    examen: "human",
    note: "ww.bernard@gmail.com"
  }
  // {
  //   id: 3,
  //   name: "Robert",
  //   job: "Directeur",
  //   specie: "human",
  //   email: "ww.robert@gmail.com"
  // },
  // {
  //   id: 4,
  //   name: "Maeve",
  //   job: "Maquerelle",
  //   specie: "host",
  //   email: "ww.maeve@gmail.com"
  // },
  // {
  //   id: 5,
  //   name: "Teddy",
  //   job: "Inconnu",
  //   specie: "host",
  //   email: "ww.teddy@gmail.com"
  // },
  // {
  //   id: 6,
  //   name: "William",
  //   job: "Actionnaire",
  //   specie: "human",
  //   email: "ww.william@gmail.com"
  // },
  // {
  //   id: 7,
  //   name: "Elsie",
  //   job: "Programmeuse",
  //   specie: "human",
  //   email: "ww.elsie@gmail.com"
  // },
  // {
  //  id: 8,
  //  name: "Nathanael",
  //  job: "Dev",
  //  specie: "human",
  //  email: "s.nathanael@outlook.fr" 
  // }
];

for (let i = 0; i < 100; i++) {
  var row = document.createElement("tr");
  var cell0 = document.createElement("td");
  var cell1 = document.createElement("td");

  var atr = document.createAttribute("class");
  atr.value = "bs-checkbox";
  cell1.setAttributeNode(atr);
  var para = document.createElement("input");
  var para1 = document.createAttribute("data-index");
  var para2 = document.createAttribute("name");
  var para3 = document.createAttribute("type");
  para1.value = "0";
  para2.value = "btSelectItem";
  para3.value = "checkbox";
  para.setAttributeNode(para1);
  para.setAttributeNode(para2);
  para.setAttributeNode(para3)
  cell1.appendChild(para);



  // var cell1 = '<td class="bs-checkbox"></td>'
  //alert(cell1).innerText;
  var cell2 = document.createElement("td");
  var cell3 = document.createElement("td");
  var cell4 =...