JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

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: $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 = ko.computed(function () {
        if (self.items().length === 0)
            return [];
        var props = [];
        
        for (var item in self.items())
        {
            for (var name in self.items()[item])
            {
                if (props.indexOf(name) == -1)
                    props.push(name);
            }
        }
                    
        return props;


    });

};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push({
    'Name': 'John',
    'Age': 25,
    'Weight' : 88
});
vm.items.push({
    'Name': 'Morgan',
    'Age': 26,
    'Height' : 176
});