JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Task ID</th>
                <th>Task name</th>
                <th>Parent</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: tasks">
            <tr>
                <td data-bind="text: TaskID"></td>
                <td data-bind="text: TaskName"></td>
                <td data-bind="text: Parent"></td>
            </tr>
        </tbody>
    </table>

JavaScript

var viewModel = function(data) {
    var self = this;
   
    // variables
    self.currentTask = ko.observable();
   
    self.tasks = ko.observableArray([
   	{TaskID: 1, TaskName: "ManualItems", Parent: 3},
    {TaskID: 2, TaskName: "Trades", Parent: null},
    {TaskID: 3, TaskName: "Positions", Parent: null},
    {TaskID: 4, TaskName: "Rec", Parent: 3},
    {TaskID: 5, TaskName: "Cash", Parent: null},
    {TaskID: 6, TaskName: "ReportA", Parent: 5},
    {TaskID: 7, TaskName: "FileIn", Parent: 2},
    {TaskID: 8, TaskName: "ReportB", Parent: 5}
    ]); 
   
};

ko.applyBindings(new viewModel());