JSFiddle - React, Tailwind, and code Playground

by ahormazabal

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.css">
<script src="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js"></script>
<body>

<table id="myTable" class="display compact">
  <thead>
  <tr>
    <th class="unavailable">ID</th>
    <th>Posici&oacute;n</th>
    <th>Correlativo</th>
    <th>Nombre Caso</th>
    <th>Funcionalidad</th>
    <th>Estado</th>
    <th>Perfil de Ejecuci&oacute;n</th>
    <th>Resultado Esperado</th>
    <th>Tipo de Prueba</th>
    <th class="col-t-50">Asignado</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<br>
<br>
<button type="button" onclick="loadData()">Reload</button>
</body>

JavaScript

$(document).ready(function () {
  initAssign();
});

function initAssign() {
  initTable();
  loadData();
}

/** Initialize DataTable */
function initTable() {

  var tableConfig = {
    paging: false,
    rowId: "id",
    columns: [
      {
        data: "id"
      }, {
        name: "posicion",
        data: "posicion"
      }, {
        data: "correlativo"
      }, {
        data: "nombre"
      }, {
        data: "nombre_funcionalidad"
      }, {
        name: "estado_proceso",
        data: "estado_proceso"
      }, {
        data: "perfil_ejecucion"
      }, {
        data: "resultado_esperado"
      }, {
        data: "tipo_prueba"
      }, {
        defaultContent: "",
        render: function (data, type, row) {
          return buildActionColumn(row);
        }
      }]
  };

  $("#myTable").DataTable(tableConfig);

}

/**
 * Builds the action column.
 */
function buildActionColumn(row) {
  var currentTester = 'tuto@gmail.com';

  var assigneeID = row.id_asignado;
  var checked = false;
  if (typeof assigneeID === "undefined" || assigneeID == null) {
    checked = false;
  }
  else if (assigneeID == currentTester) {
    checked = true;
  }

  var html = '<input type="checkbox" ' + (checked ? "checked" : "") + ' onchange="assignCheckboxAction()">';
  html += '<button type="button" onclick="loadData()">Reload</button>';
  return html;
}

function assignCheckboxAction() {
  loadData();
}


/** Loads the data into the table. */
function loadData() {
  console.log("reloading");

  var table = $('#myTable').DataTable();
  table.clear();
  table.rows.add(data).draw();

}


/** The data */
var data = [
  {
    "id": 186,
    "nombre": "Caso Bacan",
    "id_proceso": 10,
    "id_proyecto": 32,
    "id_funcionalidad": 7,
    "id_asignado": "tuto@gmail.com",
    "id_creador": "alberto@witec.cl",
    "correlativo": "BC-01",
    "cambio_estado": 1453228631904,
    "tipo_prueba": "UAT",
    "categoria": "Positiva",
    "descripcion": "Vivamus sit amet tellus purus....