JSFiddle - React, Tailwind, and code Playground
HTML
<table id="categoryTbl" class="table table-bordered">
<thead>
<tr>
<th>Category Name</th>
<th>Category Description</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: tableData">
<tr data-bind="visible: isEdit">
<td data-bind="text: categoryName"></td>
<td data-bind="text: categoryDescription"></td>
<td><a href="#" data-bind="click:edit"><img src="<?php echo base_url('img/editIcon.png');?>"/></a></td>
<td><a href="#" data-bind="click:deleteRow"><img src="<?php echo base_url('img/deleteIcon.png');?>"/></a></td>
</tr>
<tr data-bind="visible: isSave">
<td>
<input type="text" data-bind="value:categoryName">
</td>
<td>
<input type="text" data-bind="value:categoryDescription">
</td>
<td>
<a href="#" data-bind="click:save"><img src="<?php echo base_url('img/saveIcon.png');?>"/></a>
<a href="#" data-bind="click:cancel"><img src="<?php echo base_url('img/cancelIcon.png');?>"/></a>
</td>
<td>
<a href="#" data-bind="click:deleteRow"><img src="<?php echo base_url('img/deleteIcon.png');?>"/></a>
</td>
</tr>
</tbody>
</table>
JavaScript
$.ajax({
type: "GET",
url: "<?php echo $this->config->base_url('api/categoryList')?>",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var lastActivity = getDateTime();
for (var i = 0; i < result.aaData.length; i++) {
vm.tableData.push(new obj(result.aaData[i]["cat_clientId"],result.aaData[i]["categoryId"],result.aaData[i]["categoryName"],result.aaData[i]["categoryDescription"],result.aaData[i]["cat_last_activity"]));
};
oTable = $('#categoryTbl').dataTable();
},
error: function (err) {
alert("err");
}
}); //ajax close