JSFiddle - React, Tailwind, and code Playground

HTML

<table id="categoryTbl" class="table dataTable 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">Edit</a></td>
            <td><a href="#" data-bind="click:deleteRow">Delete</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">Save</a>
                        <a href="#" data-bind="click:cancel">Cancel</a>
                    </td>
                    <td>
                        <a href="#" data-bind="click:deleteRow">Delete</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) {                
                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"]));
                };
            },
            
        error: function (err) {
                alert("err");
            }
    }); //ajax close