JSFiddle - React, Tailwind, and code Playground

by Shrikrishna Gupta

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
<table id="membersTable" class="table table-striped table-bordered bootstrap-datatable datatable" data-bind="dataTable: membersTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>   
</table>

JavaScript

$(document).ready(function () {

    /* Custom binding */
    ko.bindingHandlers.dataTable = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            var binding = ko.utils.unwrapObservable(valueAccessor());
            
            // If the binding is an object with an options field,
            // initialise the dataTable with those options. 
            if (binding.options) {
                $(element).dataTable(binding.options);
            }
            
            return { controlsDescendantBindings: true };
        },
        update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            var binding = ko.utils.unwrapObservable(valueAccessor());
            
            // If the binding isn't an object, turn it into one. 
            if (!binding.data) {
                binding = {
                    data: valueAccessor()
                };
            }
            
            // Clear table
            $(element).dataTable().fnClearTable();
            // Rebuild table from data source specified in binding
            $(element).dataTable().fnAddData(binding.data());
            ko.applyBindingsToDescendants(viewModel, element);
        }
    };


    /* Object code */
    function GroupMember(id, name, isGroupLeader) {
        var self = this;
        self.id = id;
        self.name = name;
        self.isGroupLeader = ko.observable(isGroupLeader);

        self.link = ko.computed(function () {
            return "/#user/" + self.id;
        });

        self.nameWithLink = ko.computed(function () {
            return '<a href="' + self.link() + '">' + self.name + '</a>';
        });

        self.actions = ko.computed(function () {
            return '<a class="btn btn-danger" data-bind="click: removeMember.bind($data, ' + self.id + ')">' + '<i class="icon-minus-sign"></i>' + '</a>';
        });
    }

    /* View model */
    var groupViewModel = {
       ...