JSFiddle - React, Tailwind, and code Playground

by Elak

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://exacttarget.github.io/fuelux/vendor/require.js"></script>
<div class="page-header">
     <h1>Permission matrix grid example</h1>

     <h1><small>User roles per app module</small></h1>

</div>
<div class="panel panel-default">
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hoover">
                <thead>
                    <tr>
                        <th>Role name</th>
                        <th>Module A</th>
                        <th>Module B</th>
                        <th>Module C Long Name</th>
                        <th>Module E</th>
                        <th>Module F</th>
                        <th>Module G</th>
                        <th>Module H</th>
                    </tr>
                </thead>
                <tbody id="tblbody">
                    <tr>
                        <td style="width:150px">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default" tabindex="-1">Some Role A</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>

                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#" class="assignAll">Assign All</a>
                                    </li>
                                    <li><a href="#" class="unassignAll">Unassign All</a>
                                    </li>
                                    <li><a href="#">Something else here</a>
                                    </li>
                                    <li...

JavaScript

(function () {
    var setAssigned = function (item) {
        $(item).button("toggle");
        $(item).text("Assign");
    };
    var setUnassigned = function (item) {
        $(item).button("toggle");
        $(item).text("Unassign");
    };
    var isAssigned = function (item) {
        return $(item).hasClass("active");
    };
    var toggleAssign = function (item) {
        if (isAssigned(item)) {
            setAssigned(item);
        } else {
            setUnassigned(item);
        }
    };

    $(".table .center-block").click(function () {
        toggleAssign(this);
    });

    $(".assignAll").click(function () {
        var p = $(this).parents("tr");
        $(".center-block", p).each(function () {
            if (!isAssigned(this)) {
                toggleAssign(this);
            }
        });
    });
    $(".unassignAll").click(function () {
        var p = $(this).parents("tr");
        $(".center-block", p).each(function () {
            if (isAssigned(this)) {
                toggleAssign(this);
            }
        });
    });
})();