JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<table>
<thead>
<tr data-bind="foreach: columnNames">
<th> <span data-bind="text: $data"></span>
</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr data-bind="foreach: $root.columnNames">
<td data-bind="text: $parent[$data]"></td>
</tr>
</tbody>
</table>
JavaScript
var VM = function () {
var self = this;
self.items = ko.observableArray();
self.columnNames = [ "Name", "Age", "Job"];
};
var vm = new VM();
ko.applyBindings(vm);
vm.items([
{
'Name': 'Jonn',
'Age': '10',
'Job': 'Developer'
},
{
'Name': 'Jonn',
'Age': '25',
'Job': 'Developer'
}
]
);