JSFiddle - React, Tailwind, and code Playground

HTML

<div id=results>
    <div data-bind="text: elapsed"></div>
    <table border>
    <thead>
        <tr data-bind="foreach: columnLabels">
            <td data-bind="text: label"></td>
        </tr>
    </thead>
    <tbody data-bind="foreach: results">
        <tr data-bind="foreach: $root.columnLabels">
            <td data-bind="text: $parent[id]"></td>
        </tr>
    </tbody>
    </table>
</div>

CSS

table {
    border-collapse: collapse;
}

th, td {
    padding: 1em;
}

JavaScript

var viewModel = {
    columnLabels: ko.observableArray([
        {id: 'a', label: 'Column A'},
        {id: 'b', label: 'Column B'},
        {id: 'c', label: 'Column C'},
        {id: 'd', label: 'Column D'},
    ]),
    results: ko.observableArray(),
    elapsed: ko.observable(0)
};

var start = new Date().getTime();

ko.applyBindings(viewModel, document.getElementById('results'));

function addNextItem(i) {
    viewModel.results.push({ a: 'A' + i, b: 'B' + i, c: 'C' + i, d: 'D' + i });

    if (i == 1000)
        viewModel.elapsed((new Date().getTime() - start)/1000 + 'ms');
    else
        setTimeout(function(){ addNextItem(i + 1); }, 0);
}

addNextItem(1);