JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id='myTable'>
  <thead>
    <td>Id</td>
    <td>Name</td>
  </thead>
  <tbody data-bind="foreach: people">
    <tr>
      <td data-bind="text: Id"></td>
      <td>
        <input type='text' data-bind="value: Name" />
      </td>
    </tr>
  </tbody>
</table>

JavaScript

var viewModel = {
  people: ko.observableArray([
      {Id: 1, Name: "Joe"},
      {Id: 2, Name: "Sally"}
    ])
};

// Knockout viewModel draws DOM table with viewModel
ko.applyBindings(viewModel);

// Create DataTable
// Column for Name should be a text input as per the DOM
var dt = $('#myTable').DataTable({
    columns: [
      { data: "Id"},
      { data: "Name"}
    ]
});

// Add new person object to viewModel.people
// Knockout will automatically add it to DOM table
var newPerson = {Id: 3, Name: 'harry'};
viewModel.people.push(newPerson);
// Add new person to DataTable and draw it
dt.row.add(newPerson).draw();