JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<table border="1">
    <tr>
        <th colspan="3">Patient List Name</th>
    </tr>
    <!-- ko foreach: doctors -->
    <!-- ko foreach: children -->
    <tr>
        <!-- ko if: $index()==0 -->
        <td data-bind="text: $parent.name, attr: { rowspan: $parent.children.length }" valign="top"></td>
        <!-- /ko -->
        <td data-bind="text: lastname" />
        <td data-bind="text: firstname" />
    </tr>
    <!-- /ko -->
    <!-- /ko -->
</table>

JavaScript

var vm = {
    doctors: [
         { name: 'bland, sally',
            children: [{
                lastname: 'catfield',
                firstname: 'test'
            }, {
                lastname: 'gonzalez',
                firstname: 'jay'
            }]
        }
    ]
};

ko.applyBindings(vm);