JSFiddle - React, Tailwind, and code Playground

by photo_tom

HTML

<table>
    <thead>
        <tr>
            <th>Permit</th>
            <th>Region</th>
            <th>Landowner</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: requestList, if: requestList().length > 0">
        <tr>
            <td><span data-bind="text: permit"></span></td>
            <td><span data-bind="text: region"></span></td>
            <td><span data-bind="text: landowner"></span></td>
        </tr>
    </tbody>
    <tbody data-bind="if: requestList().length === 0">
        <tr>
            <td colspan="3">No Data</td>
        </tr>
    </tbody>
</table>

<button id="loadData">Load Data</button>

CSS

td, th{
    
  padding-left: 2px;  
  padding-right: 2px;    
}

JavaScript

var a = [{
    permit: "permit1",
    region: 'region1',
    landowner: 'landowner'}];

var vm = {};
vm.requestList = ko.obserableArray([]);


ko.applyBindings(vm);

$('loadData').click(function() {

    vm.requestList(ko.mapping.fromJS(a));

});