TableView is a Backbone.js view that provides full lifecycle support for tables, including headers, filtering and sorting. It remains simple, fluent, and idiomatic by relying on KinView for the underlying view management.
TableView has been designed to
require'd by browserify,
and is currently only supported in that environment. To install:
npm install backbone-tableview --save
TableView continuous integrations is handled by Wercker:
TableView maintains 100% test coverage. To manually run the tests, install with with --dev (as above) and run:
You can generate a HTML code coverage report by appending the
Issues can be opened in the usual location, pull requests welcome!
Getting started with TableView is as simple as creating a new Backbone view:
var TableView =var table = TableView
this in TableView contains an extremely limited amount of table manipulation tools. To access most methods, call their containers. I.e.
Adding Columns (table headers)
Adding table headers is straightforward:
Adding rows to the table requires passing a valid Backbone.Model to the table:
var m = foo: 'bar'this
Passing a collection to the table will allow the table to auto-append all items of the collection to the table and manage their lifecycle including adding items as they get added to the collection, appending the items to the table, and cleaning up when the child view is removed. To pass a collection to the table:
var collection = /* models */tablebody
TabelView includes a generic
tr generator which simple takes all attributes in a model and appends them as a
td. In some cases, it may be desirable to have a more elaborate
tr build that can use a custom template or manipulate values before appending them.
To do that, create a custom view that extends
TableView.tbodyTr. Here is an example of what such a view might look like:
var Backbone =TableView =_ =moduleexports = TableViewtbodyTr
Set the body to use the custom tr view by setting the
tr attribute of the body. i.e.:
Filtering & Sorting
Filtering and Sorting has been delegated to backbone-collectionview
TableView delegates to Backbone CollectionView for filtering the data displayed in the table. TableView can also sort the table based on the table header (
thead > tr > th, herein 'column'). Sorting is done when a click event is received on the
th element. To learn more about filtering, please see the CollectionView documentation. Currently, only the tbody view implements collectionview.
Sorting will soon be removed from TableView It will be replaced by sorting via CollectionView
To specify that a column should be sortable, pass it a sorter when creating it:
Sorter class includes two simple sorters, 'string' and 'int'. You can use either like:
There are three sort 'states': 1. up, 2. down, 3. reset. The first two are obvious; reset resets the collection to its original order but sorting based on the the models
cid attribute. TableView should handle the states without any intervention.
Adding a custom sorter
Custom sorters can be passed as shown above. A sorter takes two models and returns a
true if the first model sorts higher than the second.
A sorter should have the following signature:
b are the models that will be compared.
Sorting methods should use the
getAttr(model, attribute) method to retrieve the value to compare:
var firstValue =var secondValue =
The function should check the boolean
this.isReverse to determine the sort order and should return
a should be sorted higher than
false. See the builtin sorter methods for an example.