Backbone.Table — Basic Demo

by secretgspot

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js"></script>
<script src="https://raw.github.com/jsvine/Backbone.Table/master/backbone.table.js"></script>

<div class="table_description">The simplest way to define a column is with a <b>string</b>, which acts like Backbone's <code>Collection.pluck</code>.
    <pre>

columns: [ "tax_class", "description" ]
    </pre>
</div>
<div id="column_strings"></div>

<div class="table_description">If you want more control over the table headers, you can define a column as an <b>array</b>, where the first column is the value to pluck, and the second is the header.
    <pre>

columns: [ 
    [ "tax_class", "Class" ], 
    [ "description", "Description" ] 
]
    </pre>
</div>
<div id="column_arrays"></div>

<div class="table_description">Or, for more precision and flexibility, you can define  columns as objects.
    <pre>

columns: [
   {
        header: "Class",
        className: "vertebrate-class",
        getFormatted: function() {
            return this.get("tax_class");
        }
    },{
        header: "Description",
        className: "vertebrate-description",
        getFormatted: function() {
            return this.get("description").toUpperCase();
        }
    }
];
    </pre>
</div>
<div id="column_objects"></div>

CSS

.table_description { margin: 10px; padding: 5px 10px; background: papayaWhip; font-family: Helvetica; font-size: 16px; }

table { margin: 10px 10px 20px; font-family: Georgia, serif; font-size: 18px; }

thead, tfoot { background: #D8E2EB; }

/* Take advantage of the auto-assigned .even and .odd classes */
tr.even { background: #F2F4F5; }

th { font-weight: bold; }

th, td { padding: 5px 10px; }

th+th, td+td { border-left: 1px solid #FFF; }

/* Take advantage of being able to assign classNames to columns */
td.vertebrate-class { font-style: italic; }

JavaScript

var Vertebrate = {};

// Nothing special here, just a plain old Backbone.Model and Backbone.Collection
Vertebrate.Model = Backbone.Model.extend();

Vertebrate.Collection = Backbone.Collection.extend({
    model: Vertebrate.Model
});

// Add a model for each taxonomic class of vertebrates. 
// Source: http://en.wikipedia.org/wiki/Vertebrates
var vertebrates = new Vertebrate.Collection([
    {
        tax_class: "Angatha",
        description: "jawless fishes"
    },{
        tax_class: "Chondrichthyes",
        description: "cartilaginous fishes"
    },{
        tax_class: "Osteichthyes",
        description: "bony fishes"
    },{
        tax_class: "Amphibia",
        description: "amphibians"
    },{
        tax_class: "Reptilia",
        description: "reptiles"
    },{
        tax_class: "Aves",
        description: "birds"
    },{
        tax_class: "Mammalia",
        description: "mammals"
    }
]);


/* 
* The simplest way to define a column is with a string,
* which acts like Backbone's Collection.pluck. 
*/

var vertebrate_table_w_strings = new Backbone.Table({
    collection: vertebrates,
    columns: [ "tax_class", "description" ]
});

$("#column_strings").html(vertebrate_table_w_strings.render().el);

/*
* If you want more control over the table headers, 
* you can define a column as an array, where the 
* first column is the value to pluck, and the second 
* is the header.
*/

var vertebrate_table_w_arrays = new Backbone.Table({
    collection: vertebrates,
    columns: [ [ "tax_class", "Class" ], [ "description", "Description" ] ]
});

$("#column_arrays").html(vertebrate_table_w_arrays.render().el);

/* 
Or, for more precision and flexibility you can define columns as objects, with the following key/values:

- `header` is the desired column header.

- `className`, which is optional, will be applied to the header, footer, and each cell in the column.

- `getFormatted` is a function that returns what should appear inside each row's <td> tag. Inside the...