JSFiddle - React, Tailwind, and code Playground

by jearles

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Demo/Knockout.Extensions.Demo.Web/Scripts/DataTables-1.8.2/media/js/jquery.dataTables.js"></script>
<table data-bind="dataTable: {}">
    <thead>
        <tr>
            <th>Fixed</th>
            <!-- ko foreach: headers -->
                <th data-bind="text: $data"></th>
            <!-- /ko -->
        </tr>
    </thead>
</table>

CSS

td { padding: 5px; }

JavaScript

var viewModel = {
    headers: ['foo', 'bar', 'baz'],
}

ko.bindingHandlers.dataTable = {
    init: function (element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor()) || {};
        setTimeout(function() {
            $(element).dataTable(options);
        }, 0);
    }
}; 
    
ko.applyBindings(viewModel);