JSFiddle - React, Tailwind, and code Playground

HTML

<button>Add</button>
<table class="tablesorter2">
    <thead>
    <tr data-tid='12'>
        <th>Name</th>
        <th>Age</th>
        <th>Conditions</th>
        <th>Notes</th>
        <th>Del</th>
    </tr>
    </thead>
    <tbody>
        <tr data-tid='13'>
            <td><div>Peter</div></td>
            <td contenteditable="true" data-name='age'>18<span class='j_input'></span></td>
            <td contenteditable="true" data-name='conditions'>Good<span class='j_input'></span></td>
            <td contenteditable="true" data-name='notes'>...<span class='j_input'></span></td>
            <td><input type='checkbox'/></td>
        </tr>
         <tr>
            <td>Tom</td>
            <td data-name='age'>12<span class='j_input'></span></td>
            <td contenteditable="true" data-name='conditions'>Good<span class='j_input'></span></td>
            <td contenteditable="true" data-name='notes'>On medication<span class='j_input'></span></td>
            <td><input type='checkbox'/></td>
        </tr>
    </tbody></table>

CSS

a {margin:10px;cursor:pointer;}
.font-bold
{
    padding:0px 10px 0px 10px;
    font-weight:bold;
}
.italic
{
    padding:0px 10px 0px 10px;
     font-style:italic;  
}
.selected
{
    background-color: orange;
}
/*************
Default Theme
*************/
/* overall */
.tablesorter {
	font: 12px/18px Arial, Sans-serif;
	color: #333;
	background-color: #fff;
	border-spacing: 0;
	text-align: left;
}

/* header */
.tablesorter th,
.tablesorter thead td {
	font: bold 12px/18px Arial, Sans-serif;
	color: #000;
	background-color: #fff;
	border-collapse: collapse;
	border-bottom: #ccc 2px solid;
	padding: 0;
}

.internal {font-weight:normal!important;}

.tablesorter tfoot th,
.tablesorter tfoot td {
	border: 0;
}
.tablesorter .header,
.tablesorter .tablesorter-header {
	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
	background-position: center right;
        background-color:#8CB3D9;
	background-repeat: no-repeat;
	cursor: pointer;
	white-space: normal;
	padding: 4px 20px 4px 4px;
}

#table4 > thead > tr > td.tablesorter-header {color:#fff;background:#222;}

.tablesorter thead .headerSortUp,
.tablesorter thead .tablesorter-headerSortUp,
.tablesorter thead .tablesorter-headerAsc {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
	border-bottom: red 2px solid;
}
.tablesorter thead .headerSortDown,
.tablesorter thead .tablesorter-headerSortDown,
.tablesorter thead .tablesorter-headerDesc {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
	border-bottom: red 2px solid;
}
.tablesorter thead .sorter-false {
	background-image: none;
	cursor: default;
	padding: 4px;
}

/* tfoot */
.tablesorter tfoot .tablesorter-headerSortUp,
.tablesorter tfoot .tablesorter-headerSortDown,
.tablesorter tfoot .tablesorter-headerAsc,
.tablesorter tfoot...

JavaScript

var options = {
        theme: 'default',
        widgets: ['editable'],
        widgetOptions : {
          editable_columns       : [0,1,2],      
          editable_enterToAccept : true,          
          editable_autoAccept    : true,          
          editable_autoResort    : false,         
          editable_validate      : null,         
          editable_noEdit        : 'no-edit',     
          editable_editComplete  : 'editComplete'
       }
}
$('.tablesorter2').tablesorter(options).children('tbody').on('editComplete','td', function(event, config){
    var $this = $(this),
        tr = $this.parent('tr'),
        $allRows = config.$tbodies.children('tr'), 
        tid = tr.data('tid'),
        input="",
        name = $(this).data('name'),
        newContent = $(this).text();
        input = '<input value="'+newContent+'" name="'+name+'[]" type="hidden">';
        
        $this.find('.j_input').html(input);
    });

$('button').click(function(){
    var item_html = "";
    item_html += '<tr><td>Mary</td><td>5</td><td>Good</td><td>...</td><td><input type="checkbox"/></td></tr>';
   $('tbody').append(item_html);
    $('.tablesorter2').trigger('update');
    var sorting = [[3,0]]; 
    $('.tablesorter2').trigger('sorton',sorting);
});