This wiki contains the documentation for Tableling, a table plugin based on Backbone.Marionette. Check out the demo.

Tableling leverages Backbone and Backbone.Marionette components to provide an extensible table that can be easily integrated into a Marionette application. It leaves the styling to you, although the Bootstrap implementation generates markup with Twitter Bootstrap classes.

To get an idea of how to use Tableling, read the Usage section below which explains the code used for the demo. For further information, make your way through the components:

• Tableling.Table - a Backbone.Marionette.Layout which handles fetching data from a Backbone.Collection
• Tableling.Collection - a simple Backbone.Collection implementation that supports the expected data format
• Tableling.Bootstrap.Table - a Tableling.Table subclass with view implementations styled with Bootstrap

This documentation assumes basic knowledge of:

• Backbone
• Backbone.Marionette

This section describes how to use the Bootstrap table implementation. This is the code used in the demo.

Let's assume that you want to display a table listing books. You will probably have a model and a collection like these:

var Book = Backbone.Model.extend({});

var Books = Backbone.Collection.extend({
  url : '/books'
});

Now we need a table view. We shall use Tableling.Bootstrap.TableView which provides a sorting implementation. The table view does not provide a template; you can use whatever markup you need. Here I use Bootstrap classes and an Underscore template.

var BooksTableView = Tableling.Bootstrap.TableView.extend({
  tagName : 'table',
  className : 'table table-striped table-hover',
  template : _.template('<thead><tr><th class="sorting">Title</th><th class="sorting">Author</th><th class="sorting">Year</th></tr></thead><tbody />'),
  itemViewContainer : 'tbody'
});

We also want to define an item view for the table rows, as well as an empty view when no books are found:

var BookRow = Backbone.Marionette.ItemView.extend({
  tagName: 'tr',
  template: _.template('<td class="title" /><td class="author" /><td class="year" />'),

  ui : {
    title: '.title',
    author: '.author',
    year: '.year'
  },

  onRender : function() {
    this.ui.title.text(this.model.get('title'));
    this.ui.author.text(this.model.get('author'));
    this.ui.year.text(this.model.get('year'));
  }
});

var NoBookRow = Backbone.Marionette.ItemView.extend({
  tagName: 'tr',
  className: 'empty',
  template: _.template('<td colspan="3">No book found</td>')
});

We then add those to our table view:

var BooksTableView = Tableling.Bootstrap.TableView.extend({
  // ...
  itemView : BookRow,
  emptyView : NoBookRow
});

And we're almost done. The last thing we need is the actual table component which will manage the collection. Tableling.Bootstrap.Table does that and includes 4 default modules: a page size select box, a quick search field, an info notice showing the number of records, and a page switcher.

var BooksTable = Tableling.Bootstrap.Table.extend({

  tableView : BooksTableView,
  tableViewOptions : {
    collection: new Books({
      model: Book
    })
  }
});

The books table can now be shown wherever you need it:

new Backbone.Marionette.Region({
  el: '#books'
}).show(new BooksTable());

Check out the demo to see the result.