JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/mbest/knockout-table/master/knockout-table.js"></script>
<h2>Knockout table output</h2>
<table data-bind="table: {
    columns: data().Columns,
    data: data().Rows,
    header: 'Label',
    dataItem: 'Key' }">
</table>

CSS

body {
    font-family: sans-serif;
}
table { 
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ccc;
    padding: 2px 5px;
}
h2 {
    font-size: 1.2em;
}

JavaScript

var ViewModel = function() {
    var self = this;
	var rows = ko.observableArray();
    
    self.data = ko.observable();

    self.data({
        Columns: [
            { Ordinal: 0, Key: "Id", Label: "User Id" },
            { Ordinal: 1, Key: "Age", Label: "Age" },
            { Ordinal: 2, Key: "Name", Label: "User Name" },
            { Ordinal: 3, Key: "Gender", Label: "Gender" }
        ],
        // note that rows will contain other data that may not be defined in columns and the order doesn't match
        Rows: [
            { Age: 27, Gender: "M", Id: 59, Name: "Bill", Town: "London" },
            { Age: 34, Gender: "M", Id: 52, Name: "Fred", Town: "Basingstoke" },
            { Age: 24, Gender: "F", Id: 51, Name: "Jane", Town: "Edinburgh" }
        ]
    })
    
};
ko.applyBindings(new ViewModel());