JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<table width="100%">
    <thead>
        <tr>
            <th width="1%"><input type="checkbox" name="selectAll" id="selectAll"/></th>
            <th class="sort sortable" data-sortBy="firstName">First name</th>
            <th class="sort sortable" data-sortBy="lastName">Last name</th>
            <th class="sort sortable" data-sortBy="phone">Phone</th>
            <th class="sort sortable" data-sortBy="email">Email</th>
            <th class="sort sortable" data-sortBy="privileges">Privileges</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<input type="text" id="filter" placeholder="filter me" />
<script type="text/template" id="administratorTmpl">
<% _.each(administrators, function(administrator){ %>
    <tr data-id="<%= administrator.get('id') %>">
        <td><input type="checkbox" name="select" id="select"/></td>
        <td class="editable editTxt" title="First Name"><%= administrator.get('firstName') %></td>
        <td class="editable editTxt" title="Last Name"><%= administrator.get('lastName') %></td>
        <td class="editable editTel" title="Phone"><%= administrator.get('phone') %></td>
        <td class="editable editEmail" title="Email"><%= administrator.get('email') %></td>
        <td class="editable editRadio" title="Privileges"><%= administrator.get('privileges') %></td>
    </tr>
<% }) %>
</script>

CSS

table {
  margin: 10px;
  border: 1px solid #dddddd;
  border-collapse: collapse;
  border-spacing: 2px;
  width: 95%; }
  table tr:nth-child(even) {
    background-color: #dee3f8; }
  table td, table th {
    font-size: 0.875em;
    padding: 5px 5px; }
  table th {
    background-color: #2541b2;
    color: white;
    text-align: left;
    border-right: 1px solid #aaaaaa; }

JavaScript

var administrators = [
{
  id: 1,
  firstName: "User1",
  lastName: "Tester",
  phone: "781-000-0000",
  email: "[email protected]",
  privileges: "view-only"
}, {
  id: 2,
  firstName: "Mickey",
  lastName: "Mouse",
  phone: "781-123-4567",
  email: "[email protected]",
  privileges: "all"
}, {
  id: 3,
  firstName: "Snow",
  lastName: "White",
  phone: "781-890-1234",
  email: "[email protected]",
  privileges: "all"
}, {
  id: 4,
  firstName: "Anakin",
  lastName: "Skywalker",
  phone: "888-874-9084",
  email: "[email protected]",
  privileges: "view-only"
}, {
  id: 5,
  firstName: "Obi-one",
  lastName: "Kenobi",
  phone: "908-765-5432",
  email: "[email protected]",
  privileges: "all"
}, {
  id: 6,
  firstName: "Master",
  lastName: "Yoda",
  phone: "876-654-2134",
  email: "[email protected]",
  privileges: "view-only"
}, {
  id: 7,
  firstName: "Han",
  lastName: "Solo",
  phone: "781-456-3209",
  email: "[email protected]",
  privileges: "all"
}, {
  id: 8,
  firstName: "Neo",
  lastName: "TheOne",
  phone: "781-000-0000",
  email: "[email protected]",
  privileges: "all"
}];

var AdministratorsCollection = Backbone.Collection.extend({
});
var FilteredCollection = Backbone.Collection.extend();

var AdministratorView = Backbone.View.extend({
    el: 'table tbody',
    template: _.template($('#administratorTmpl').html()),
    render: function() {
        $(this.el).append(this.template({administrators: this.collection.models}));
    }
});

var administratorCollection = new AdministratorsCollection(administrators);

renderView = function() {
    var administratorView = new AdministratorView({
        collection: administratorCollection
    });
    
    administratorView.render();
};

renderView();

$('#filter').on('keyup', function(e) {
    filteredCollection = new FilteredCollection();
    filteredCollection.reset(filterTable(administratorCollection, $(e.currentTarget).val()));
    resetTable(filteredCollection);
});

resetTable =...