Knockoutjs.com - Simple list example

http://knockoutjs.com/examples/simpleList.html

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<div class='liveExample'> 
 <table id="awesome-table" data-bind="with: items">
    <thead><tr><th>Name</th><th>Surname</th><th>Type</th></tr></thead>
    <tbody data-bind="foreach: $data">
      <tr class="parent">
        <td data-bind="text: name"></td>
        <td data-bind="text: surname"></td>
        <td data-bind="text: type"></td>
      </tr>
      <!-- ko foreach: children -->
      <tr class="child">
        <td data-bind="text: name"></td>
        <td data-bind="text: surname"></td>
        <td data-bind="text: type"></td>
      </tr>
      <!-- /ko -->
    </tbody>
    </table>
     <button data-bind="click: clearFamilies">
       Clear familiies
     </button>
     <button data-bind="click: addFamiliesBack">
       Add familiies back
     </button>
  </div>

CSS

th {
  background: rgb(243, 156, 18);
}
th, td{
  border: 1px solid black;
  padding: 10px;
}
.parent td{
  background: rgb(52, 152, 219);
}

JavaScript

var SimpleListModel = function() {
    var sarah = {name: "Sara", surname: "Smith", type: "Child"};
    var dina = {name: "Dina", surname: "Smith", type: "Child"};
		var john = {name: "John", surname: "Smith", type: "Parent", children: [sarah, dina]};
   
    var david = {name: "David", surname: "Dylan", type: "Child"};
    var sean = {name: "Sean", surname: "Dylan", type: "Child"};
    var bob = {name: "Bob", surname: "Dylan", type: "Parent", children: [david, sean]};
    this.table = null;
    this.items = ko.observableArray([john, bob]);
    var that = this;
    this.clearFamilies = function(){
			that.items.removeAll();
      that.items(null);
    }
    
    this.addFamiliesBack = function(){
     that.items([john, bob]);
     if(that.table !== null)
     	that.table.destroy();
      
     that.table = $("#awesome-table").DataTable({"ordering": false});
    }
};

var model = new SimpleListModel();
ko.applyBindings(model);
model.table = $("#awesome-table").DataTable({"ordering": false});