Backbone.TableView example

An example using LocalStorage to simulate an API serving a collection.

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://linkedin.github.io/Backbone.TableView/javascripts/backbone.tableview.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://linkedin.github.io/Backbone.TableView/stylesheets/backbone.tableview.css">
<div class="container">
  <div id="content" class="content"></div>
  <footer>
    source: <strong></strong>
  </footer>
</div>

CSS

.container {
  width: 540px;
}

CoffeeScript

class UserTableView extends Backbone.TableView
    columns:
        name:
            header: "My"
        type:
            header: "Type"
        last_login:
            header: "Last Login Time"
            draw: (model) ->
                new Date(model.get "last_login").toISOString()
    pagination: true
    size: 5
    search:
        query: "name"
        detail: "Search..."
    filters:
        type:
            type: "option"
            options: [["All", ""], "Admin", "User"]

class User extends Backbone.Model
    urlRoot: "api/users"

# Mock of a backbone.collection, in reality this would likely hit an API,
# but here we override the fetch() call to simulate it in jsfiddle, and add
# a couple of dummy models
class Users extends Backbone.Collection
    model: User
    url: "api/users"
    initialize: ->
        @allModels = [
            name: "Juan"
            type: "Admin"
            last_login: 1342802572000
        ,
            name: "Maria"
            type: "User"
            last_login: 1352518672000
        ,
            name: "Pablo"
            type: "Admin"
            last_login: 1352718272000
        ,
            name: "Rosa"
            type: "User"
            last_login: 1352718572000
        ,
            name: "Pedro"
            type: "User"
            last_login: 1352808572000
        ,
            name: "Julia"
            type: "User"
            last_login: 1351817572000
        ,
            name: "Celeste"
            type: "Admin"
            last_login: 1352815572000
        ]
        @reset @allModels
    count: =>
        @filteredModels.length
    fetch: (options) =>
        @trigger "requested"
        @filteredModels = _.chain(@allModels)
            .filter((m) -> not options.data.type? or options.data.type == "" or
                           m.type == options.data.type)
            .filter((m) -> not options.data.name? or
                           m.name.toLowerCase().indexOf(options.data.name.toLowerCase()) >=...