JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<table id="devtable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr data-bind="click: $parent.select">
            <td data-bind="text: ID"></td>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Status"></td>
        </tr>
    </tbody>
</table>ID :
<input type="text" name="ID" data-bind="value: selected().ID, enable: enableEdit" />
<br>Name :
<input type="text" name="Name" data-bind="value: selected().Name, enable: enableEdit" />
<br>Status :
<input type="text" name="Status" data-bind="value: selected().Status, enable: enableEdit" />
<br>
<input type="button" value="Send" disabled/>

JavaScript

var rowModel = function (id, name, status) {
    this.ID = ko.observable(id);
    this.Name = ko.observable(name);
    this.Status = ko.observable(status);
};

var myData = [{
    id: "001",
    name: "Jhon",
    status: "Single"
}, {
    id: "002",
    name: "Mike",
    status: "Married"
}, {
    id: "003",
    name: "Marrie",
    status: "Complicated"
}];

function MyVM(data) {
    var self = this;

    self.items = ko.observableArray(data.map(function (i) {
        return new rowModel(i.id, i.name, i.status);
    }));
    
    self.select = function(item) {
        self.selected(item);
        self.enableEdit(true);
    };

    self.selected = ko.observable(self.items()[0]);
    
    self.enableEdit = ko.observable(false);
}

ko.applyBindings(new MyVM(myData));