JSFiddle - React, Tailwind, and code Playground
HTML
<table width="300px;">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td>
<span data-bind="text: Name"></span>
</td>
<td>
<input type="radio" name="Status" value="true" data-bind="checked: Status" />
<input type="radio" name="Status" value="false" data-bind="checked: Status" />
</td>
<td><button data-bind="click: $root.changeStatus">Change Status</button></td>
</tr>
</tbody>
</table>
JavaScript
function People(data) {
var self = this;
self.Name= data.Name;
self.Status = ko.observable(data.Status);
}
function PeopleViewModel(userId) {
var self = this;
self.people = ko.observable([
{ Name: 'Bert', Status: true },
{ Name: 'Charles', Status: true },
{ Name: 'Denise', Status: false }
]);
self.changeStatus = function()
{
alert("Change " + this.Name + " to " + this.Status);
};
}
ko.applyBindings(new PeopleViewModel());