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">
    <thead><tr><th>Name</th><th>Surname</th><th>Type</th></tr></thead>
    <tbody data-bind="foreach: items">
      <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.items = ko.observableArray([john, bob]);
    var that = this;
    this.clearFamilies = function(){
			that.items.removeAll();
    }
    
    this.addFamiliesBack = function(){
     that.items.push(john);
     that.items.push(bob);
    }
};
 
ko.applyBindings(new SimpleListModel());
$("#awesome-table").DataTable({"ordering": false});