Backbone.TableView example

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

by secretgspot

HTML

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

CSS

.container {
    width: 540px;
}

# backbone.tableview.css

div.tableview-info {
    padding-top: 8px;
}

div.tableview-pagination {
    float: right;
    margin: 0;
}

.tableview-table {
    margin-top: 1em;
}

.tableview-table th, .tableview-table td {
    text-align: center;
}

.tableview-filterbox {
    padding-right: 10px;
}

.tableview-sorting:after {
    content: "";
    float: right;
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: black transparent;
    visibility: hidden;
}

.tableview-sorting:hover:after {
    visibility: visible;
}

.tableview-sorting-asc:after {
    visibility: visible;
}

.tableview-sorting-desc:after {
    border-bottom: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid black;
    visibility: visible;
}

CoffeeScript

class UserTableView extends Backbone.TableView
    title: "My Users"
    columns:
        name:
            header: "My Name"
        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) =>
        @filteredModels = _.chain(@allModels)
            .filter((m) -> not options.data.type? or m.type == options.data.type)
            .filter((m) -> not options.data.name? or                                                   
                           m.name.toLowerCase().indexOf(options.data.name.toLowerCase()) >= 0)
    ...