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: $parent.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.observableArray();
    
    self.fixData = function(){
        $.each(self.items(), function(i, rows){
            var cell = new Object();
            $.each(rows, function(j, prop){
                cell[prop.ColumnName] = prop.Value;
                
            });
            self.fixedItems.push( cell );
        });
        console.log(self.fixedItems());
    };    
  
 
};
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'
    }
    
]);

vm.fixData();