JSFiddle - React, Tailwind, and code Playground

by deostroll

HTML

<table border="1" style="border-collapse:collapse">
    <thead>
        <tr data-bind="foreach: Headers">
            <th data-bind="text: $data.name"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Rows">
        <tr data-bind="foreach: $data">
            <!-- ko if: renderTextBox -->
            <td>
                <input type="text" data-bind="value: $data"/>
            </td>
            <!-- /ko -->
            <!-- ko ifnot: renderTextBox -->
            <td>
                <span data-bind="text: $data"/>
            </td>
            <!-- /ko -->
        </tr>
    </tbody>
</table>

JavaScript

var js = {
    headers: [{
        name: 'Id',
        editable: false
    }, {
        name: 'Name',
        editable: true
    }],
    data: [
        [1, 'Ajay'],
        [2, 'Ankur']
    ]
};

function ViewModel(data) {
    this.Headers = (function (headers) {
        var arr = [];
        headers.forEach(function (item, ctxt) {
            arr.push(ko.observable(item));
        });
        return ko.observableArray(arr);
    })(data.headers);

    this.Rows = (function (rows) {
        var arr = [];
        rows.forEach(function (item) {
            arr.push(ko.observable(item));
        });
        return ko.observableArray(arr);
    })(data.data);
    this.renderTextBox = ko.observable(false);
}

window.model = new ViewModel(js);
ko.applyBindings(window.model);