JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: { data: people, as: 'person' }">
        <tr>
            <td data-bind="text: person.firstName"></td>
            <td data-bind="text: person.lastName"></td>
            <!-- ko foreach: person.cars -->
                <td data-bind="text: ($data.brand + ' ' + $data.model)"></td>
            <!-- /ko -->
        </tr>
    </tbody>
</table>

JavaScript

ko.applyBindings({
    people: [ { 
        firstName: 'Bert', lastName: 'Bertington',
        cars: [ { brand: 'BMW', model: 'Z3' }, 
               { brand: 'Audi', model: 'A5' }]
    }, { 
        firstName: 'Charles', lastName: 'Charlesforth',
        cars: [ { brand: 'VW', model: 'Gol' }, 
               { brand: 'Ford', model: 'Focus' }]
    }, { 
        firstName: 'Denise', lastName: 'Dentiste',
        cars: [ { brand: 'Subaru', model: 'Impreza' }, 
               { brand: 'Toyota', model: 'Supra' }]
    }]
});