JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="http://www.appelsiini.net/download/jquery.jeditable.js"></script>
</head>
<body>
  <table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1" class="gradeX">
            <td>Trident</td>
            <td>Internet
                 Explorer 
                4.0
                </td>
            <td>Win 95+</td>
            <td class="center">4</td>
            <td class="center">X</td>
        </tr>
        <tr id="2" class="gradeC">
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">5</td>
            <td class="center">C</td>
        </tr>
        <tr id="3" class="gradeA">
            <td>Trident</td>
            <td>Internet
                 Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="center">5.5</td>
            <td class="center">A</td>
        </tr>
        <tr id="4" class="gradeA">
            <td>Trident</td>
            <td>Internet
                ...

JavaScript

$(document).ready(function() { /* Init DataTables */
    var oTable = $('table').dataTable();

    /* Apply the jEditable handlers to the table */
    var theCallback = function(v, s) {
        console.debug("Element", this);
        console.debug("New value:", v);
        console.debug("Setting object:",s);
        return v;
    };
    $(oTable).find('td').editable(theCallback, {
        "callback": function(sValue, y) {
            console.log("jEditable callback is executed => updating dataTable");
            var aPos = oTable.fnGetPosition(this);
            oTable.fnUpdate(sValue, aPos[0], aPos[1]);
        },
        "data": "{'0':'0%', '.1':'10%', '.15': '15%', '.2': '20%', 'selected':'0'}",
        "type" : "select",
        "submit" : "OK",
        "style": {"height": "100%","width": "100%"}
    });
});