JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="table-responsive">
  <table id="example" cellspacing="0" class="table table-striped table-bordered table-condensed">
    <thead>
      <tr>
        <th scope="col">Country</th>
        <th scope="col">Capital</th>
        <th scope="col">Population</th>
        <th scope="col">Region</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="col">Country</th>
        <th scope="col">Capital</th>
        <th scope="col">Population</th>
        <th scope="col">Region</th>
      </tr>
    </tfoot>
    <tbody data-bind="foreach: Data">
      <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: capital"></td>
        <td data-bind="text: population"></td>
        <td data-bind="text: region"></td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

function viewModel() {

          var self = this;
          self.Data = ko.observableArray([]);

          $.getJSON('https://restcountries.eu/rest/v1/all', function(data) {
            self.Data(data);
          });
        }

        ko.applyBindings(viewModel());

        $(document).ready(function() {
          $('#example').dataTable();
        });