linkedinattic / backbone.tableview Goto Github PK

Backbone View to render collections as tables

License: Apache License 2.0

CoffeeScript 50.55% CSS 6.13% JavaScript 43.33%

backbone.tableview's Introduction

Backbone.TableView

Backbone View to render collections as tables. Currently it is targeted at bootstrap users, in the future it will be more css agnostic.

How To Use

Subclass TableView and add column definitions. Optionaly you can add a title, a search bar, pagination, and any number of filters (see supported filters below):

class UserTableView extends Backbone.TableView
    title: "My Users Table"
    columns:
        name:
            header: "My Name"
        type:
            header: "Type"
        last_login:
            header: "Last Login Time"
            draw: (model) ->
                new Date(model.get "time")
    pagination: true
    search:
        query: "name"
        detail: "Search by Name"
    filters:
        from:
            type: "input"
            className: "date"
            init: new Date()
            get: (val) ->
                ... process the date val ...
        my_button:
            type: "button"
        status:
            type: "option"
            options: ["all", "valid", "invalid"]

Use it as any other Backbone View, either setting the "el" property at creation, or letting backbone create if for you, eg (Users is a regular backbone collection):

user_table = new UserTableView collection: new Users()
$("#somewhere").html user_table.render().el

License

Apache Public License (APL) 2.0

Author

Juan Pablo Bottaro - https://github.com/jpbottaro

Demo

http://jsfiddle.net/jpbottaro/u7zQT/

Thanks

This was initialy inspired by the project https://github.com/jsvine/Backbone.Table

backbone.tableview's People

Contributors

Stargazers

Watchers

Forkers

jgrande gkleiman uxscripts jetume foxdog-studios ataki newsky quri jgritman alexodle benhakunamatata poorman cobjetwix thangnvdigdinos

backbone.tableview's Issues

Allow for zero-based page index

It would be great if there was a way to configure/allow for pagination page indexes to be zero-based.

There are probably more elegant solutions, but my current workaround is to overwrite TableView.prototype.update like so:

TableView.prototype.update = function(replace, skipFetch) {
    this.$("tbody").removeClass("in");
    this.trigger("updating");
    this.updateUrl(replace);
    if (!skipFetch) {
      this.collection.fetch({
        // instead of "data: this.data", a function is called
        data: this.filterUpdateData()
      });
    } else {
      this.renderData();
    }
    return this;
};

I then can "fix" the view's page data right before it's sent to this.collection.fetch(), with a separate function:

TableView.prototype.filterUpdateData= function() {
    var updateData = _.extend({}, this.data, {page:this.data.page - 1});
    return updateData;
};

This causes the data.page property to be decremented by 1, right before being submitted to this.collection.fetch().

Do you have any better ideas for how this could be implemented?

TableView.prototype.initialize = function() {
//...
this.data = $.extend({}, this.initialData, this.parseQueryString(Backbone.history.fragment));

this code block is called without checking to see if Backbone.history exists.

Yet elsewhere in the code, in TableView.prototype.updateUrl() (line 193 in JS):

TableView.prototype.updateUrl = function(replace) {
//...
if (this.router) {
    uri = Backbone.history.fragment;
}

You check for the existence of this.router before attempting to access Backbone.history.fragment.

Is the use of Backbone.History necessary for TableView, and if not, can this issue be corrected?

I "fixed" this by performing another check in TableView.prototype.initialize for this.router before merging data from this.parseQueryString(Backbone.history.fragment) into this.data. ex:

this.data = $.extend({}, this.initialData);
if (this.router) {
    this.data = $.extend(this.data, this.parseQueryString(Backbone.history.fragment));
}

SHA: ce3bd56
backbone.tableview.js: https://github.com/linkedin/Backbone.TableView/blob/ce3bd561e06b966aac0cfd4da336e8ea0de182b7/backbone.tableview.js

No package.json

We'd love to be able to install and use via NPM, but you've not published it!