JSFiddle - React, Tailwind, and code Playground

by Sagar Bendale

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="http://static.tumblr.com/1szuamz/ODin4qqkv/jquery.datatables.yadcf.js"></script>
<link rel="stylesheet" href="http://static.tumblr.com/1szuamz/stUn4qqlr/jquery.datatables.yadcf.css">
<div class="container">
      <div class="header">
        <h3 class="text-muted">Products in the System</h3>
      </div>
      <hr/>
      <div class="row">
          <div class="col-sm-12">

<table id="example">
    <thead>
        <tr>
          <th>ID</th>
          <th>Type</th>
        </tr>
    </thead>
    <tbody>
<tr>
    <td><a href="http://example.com">ABC-123</a></td>
    <td class="second_td"><a href="#" pk-data="ABC-123" data-type="select" data-value="5">Things</a></td>
</tr>
<tr>
    <td><a href="http://example.com">XYZ-890</a></td>
    <td class="second_td"><a href="#" pk-data="XYZ-890" data-type="select" data-value="5">Things</a></td>
</tr>
    </tbody>
</table>
              
                        </div>
      </div>
    </div>

JavaScript

$(document).ready(function() {
      $('#example').dataTable({
          "aaSorting": [[ 1, "desc" ]],
          "lengthMenu": [[50, 250, 500, 1000], [50, 250, 500, 1000]],
          "iDisplayLength": 250
        });
      });



$.fn.editable.defaults.mode = 'inline';
debugger;
$('#example .second_td a').editable({
    type: 'select',
    name: 'Type',
    title: 'Type',
    source: [
      {value: 0, text: 'Nothing'},
      {value: 1, text: 'Everything'},
      {value: 2, text: 'Something'},
      {value: 3, text: 'That Thing'},
      {value: 4, text: 'This Thing'},
      {value: 5, text: 'Things'}
    ]
});