JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<body>
  <table id="insumos" class="table table-hover">
    <thead>
      <tr>
        <th>ID do Insumo</th>
        <th>Insumo</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>Insumo 1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Insumo 2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Insumo 3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Insumo 4</td>
      </tr>

    </tbody>
  </table>
</body>

JavaScript

$(document).ready(function() {
  $('#insumos').dataTable({
    //"bServerSide": true,
    //"sAjaxSource": "/Insumo/BuscarInsumosDataTable",
    "bProcessing": true,
    "language": {
      "url": "/DataTables/Traducao"
    },
    "aoColumns": [{
      "sName": "InsumoId",
      "mData": "InsumoId",
      "render": function(data, type, full, meta) {
        return '<td class="idInsumo">' + data + '</td>';
      }
    }, {
      "sName": "Nome",
      "mData": "Nome",
      "render": function(data, type, full, meta) {
        return '<a href="#" onclick="selecionarInsumo(\''+data+'\');">' + data + '</a>';
      }
    }]

  });
  $('a').on('click',function(e){e.preventDefault();});
});

function selecionarInsumo(nome) {
  alert("deu certo " + nome);
}