JSFiddle - React, Tailwind, and code Playground

by Anil D

HTML

<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<button type="button" id="new">New</button>
<button type="button" id="delete">Delete</button>
<table class="display" id="example" border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>Date</th>
            <th>Symbol</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr class="gradeA">
            <td>07/02/2015</td>
            <td>xxx</td>
            <td>4</td>
        </tr>
        <tr class="gradeA">
            <td>27/12/2014</td>
            <td>yyy</td>
            <td>9</td>
        </tr>
        <tr class="gradeA">
            <td>27/12/2014</td>
            <td>aaa</td>
            <td>9</td>
        </tr>
        <tr class="gradeA">
            <td>05/12/2014</td>
            <td>cd</td>
            <td>3</td>
        </tr>
        <tr class="gradeA">
            <td>07/10/2014</td>
            <td>vvv</td>
            <td>1</td>
        </tr>
        
    </tbody>
</table>

JavaScript

var type1 = ["aaa","a2","cd","vvv","xxx","eee","zzz","fff","nnn","hhh","ttt"];
var row_num, col_num, row_cell, col_cell;


function attachTableClickEventHandlers(){
  //row/column indexing is zero based
  $("#example thead tr th").click(function() {     
            col_num = parseInt( $(this).index() );
            console.log("column_num ="+ col_num );   
    });
    $("#example tbody tr td").click(function() {     
            col_cell = parseInt( $(this).index() );
            row_cell = parseInt( $(this).parent().index() );    
            console.log("Row_num =" + row_cell + "  ,  column_num ="+ col_cell );
    });  
};


function restoreRow ( oTable, nRow ){
    var aData = oTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);
    
    for ( var i=0, iLen=jqTds.length ; i<iLen ; i++ ) 
    {
        oTable.fnUpdate( aData[i], nRow, i, false );
    }
    
    //oTable.fnDraw();
};
            
function editRow ( oTable, nRow ){
    var aData = oTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);
    //jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'"/>';
    jqTds[col_cell].innerHTML = '<input type="text" id ="typ" value="'+aData[col_cell]+'"/>';
    //jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'"/>';
    
    $("#typ").autocomplete({source:type1});
}
            
function saveRow ( oTable, nRow ){
    var jqInputs = $('input', nRow);
    oTable.fnUpdate( $('input',nRow.cells[col_cell])[0].value, row_cell, col_cell, false );
}
    
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-uk-pre": function ( a ) {
        var ukDatea = a.split('/');
        return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1
    },
    
    "date-uk-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    
    "date-uk-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal ){
    var aReturn = new...