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: fixedItems">
        <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"];
    
    self.fixedItems = ko.computed(function () {
        return ko.utils.arrayMap(self.items(), function (item) {
            var fixedItem = {};
            ko.utils.arrayForEach(item, function(column) {
                fixedItem[column.ColumnName] = column.Value;
            });
            return fixedItem;
        });
    });
};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'John'
    },
    {          
        'ColumnName': 'Age',
        'Value': '25'
    }
]);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'Jane'
    },
    {          
        'ColumnName': 'Age',
        'Value': 26
    },
    {          
        'ColumnName': 'Job',
        'Value': 'developer'
    }

]);