JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.css">
<table class="ui table" data-bind="table: table">
</table>

<script type="text/html" id="foo">
    <!-- if: head && head.length -->
<thead>
<tr data-bind="foreach: head">
    <th data-bind="text: $rawData"></th>
</tr>
</thead>
<!-- /ko -->

<tbody data-bind="foreach: rows">
<tr data-bind="foreach: $data">
    <td data-bind="text: $data">something</td>
</tr>
</tbody>

</script>

JavaScript

ko.bindingHandlers.table = {
    init: function tableBinding(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        console.log(foo.innerHTML);
        element.innerHTML = foo.innerHTML;

        var innerBindingContext = bindingContext.createChildContext(valueAccessor());

        ko.applyBindingsToDescendants(innerBindingContext, element);

        return {
            controlsDescendantBindings: true
        };
    }
}

ko.applyBindings({
    table: {
        head: ["Name", "Position"],
        rows: [
            ["John", "Janitor"],
            ["Mike", "IT"],
            ["Paul", "HR"],
            ["Rick", "Coffee Fetcher"]
        ]
    }
});