backgridjs-rails 0.2.6 → 0.3.5

data/vendor/assets/javascripts/backgrid-extensions/backgrid-select-all.js

@@ -5,7 +5,18 @@
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
   Licensed under the MIT @license.
 */
-(function (window, $, _, Backbone, Backgrid)  {
+(function (root, factory) {
+
+  // CommonJS
+  if (typeof exports == "object") {
+    module.exports = factory(require("backbone"), require("backgrid"), require("underscore"));
+  }
+  // Browser
+  else factory(root.Backbone, root.Backgrid, root._);
+
+}(this, function (Backbone, Backgrid, _) {
+
+  "use strict";
 
   /**
      Renders a checkbox for row selection.
@@ -23,9 +34,9 @@
 
     /** @property */
     events: {
-      "keydown :checkbox": "onKeydown",
-      "change :checkbox": "onChange",
-      "click :checkbox": "enterEditMode"
+      "keydown input[type=checkbox]": "onKeydown",
+      "change input[type=checkbox]": "onChange",
+      "click input[type=checkbox]": "enterEditMode"
     },
 
     /**
@@ -37,31 +48,43 @@
        @param {Backbone.Model} options.model
     */
     initialize: function (options) {
-      Backgrid.requireOptions(options, ["model", "column"]);
 
       this.column = options.column;
       if (!(this.column instanceof Backgrid.Column)) {
         this.column = new Backgrid.Column(this.column);
       }
 
-      this.listenTo(this.model, "backgrid:select", function (model, selected) {
-        this.$el.find(":checkbox").prop("checked", selected).change();
+      var column = this.column, model = this.model, $el = this.$el;
+      this.listenTo(column, "change:renderable", function (column, renderable) {
+        $el.toggleClass("renderable", renderable);
       });
 
+      if (Backgrid.callByNeed(column.renderable(), column, model)) $el.addClass("renderable");
+
+      this.listenTo(model, "backgrid:select", function (model, selected) {
+        this.checkbox().prop("checked", selected).change();
+      });
+    },
+
+    /**
+       Returns the checkbox.
+     */
+    checkbox: function () {
+      return this.$el.find("input[type=checkbox]");
     },
 
     /**
        Focuses the checkbox.
     */
     enterEditMode: function () {
-      this.$el.find(":checkbox").focus();
+      this.checkbox().focus();
     },
 
     /**
        Unfocuses the checkbox.
     */
     exitEditMode: function () {
-      this.$el.find(":checkbox").blur();
+      this.checkbox().blur();
     },
 
     /**
@@ -72,7 +95,7 @@
       if (command.passThru()) return true; // skip ahead to `change`
       if (command.cancel()) {
         e.stopPropagation();
-        this.$el.find(":checkbox").blur();
+        this.checkbox().blur();
       }
       else if (command.save() || command.moveLeft() || command.moveRight() ||
                command.moveUp() || command.moveDown()) {
@@ -87,8 +110,10 @@
        `backgrid:selected` event with a reference of the model and the
        checkbox's `checked` value.
     */
-    onChange: function (e) {
-      this.model.trigger("backgrid:selected", this.model, $(e.target).prop("checked"));
+    onChange: function () {
+      var checked = this.checkbox().prop("checked");
+      this.$el.parent().toggleClass("selected", checked);
+      this.model.trigger("backgrid:selected", this.model, checked);
     },
 
     /**
@@ -135,7 +160,6 @@
        @param {Backbone.Collection} options.collection
     */
     initialize: function (options) {
-      Backgrid.requireOptions(options, ["column", "collection"]);
 
       this.column = options.column;
       if (!(this.column instanceof Backgrid.Column)) {
@@ -144,49 +168,86 @@
 
       var collection = this.collection;
       var selectedModels = this.selectedModels = {};
-      this.listenTo(collection, "backgrid:selected", function (model, selected) {
-        if (selected) selectedModels[model.id || model.cid] = model;
+      this.listenTo(collection.fullCollection || collection,
+                    "backgrid:selected", function (model, selected) {
+        if (selected) selectedModels[model.id || model.cid] = 1;
         else {
           delete selectedModels[model.id || model.cid];
-          this.$el.find(":checkbox").prop("checked", false);
+          this.checkbox().prop("checked", false);
+        }
+        if (_.keys(selectedModels).length === (collection.fullCollection|| collection).length) {
+          this.checkbox().prop("checked", true);
         }
       });
 
-      this.listenTo(collection, "remove", function (model) {
-        delete selectedModels[model.cid];
+      this.listenTo(collection.fullCollection || collection, "remove", function (model) {
+        delete selectedModels[model.id || model.cid];
+        if ((collection.fullCollection || collection).length === 0) {
+          this.checkbox().prop("checked", false);
+        }
       });
 
       this.listenTo(collection, "backgrid:refresh", function () {
-        this.$el.find(":checkbox").prop("checked", false);
-        for (var i = 0; i < collection.length; i++) {
-          var model = collection.at(i);
-          if (selectedModels[model.id || model.cid]) {
-            model.trigger('backgrid:select', model, true);
+        if ((collection.fullCollection || collection).length === 0) {
+          this.checkbox().prop("checked", false);
+        }
+        else {
+          var checked = this.checkbox().prop("checked");
+          for (var i = 0; i < collection.length; i++) {
+            var model = collection.at(i);
+            if (checked || selectedModels[model.id || model.cid]) {
+              model.trigger("backgrid:select", model, true);
+            }
           }
         }
       });
+
+      var column = this.column, $el = this.$el;
+      this.listenTo(column, "change:renderable", function (column, renderable) {
+        $el.toggleClass("renderable", renderable);
+      });
+
+      if (Backgrid.callByNeed(column.renderable(), column, collection)) $el.addClass("renderable");
     },
 
     /**
-       Progagates the checked value of this checkbox to all the models of the
+       Propagates the checked value of this checkbox to all the models of the
        underlying collection by triggering a Backbone `backgrid:select` event on
-       the models themselves, passing each model and the current `checked` value
-       of the checkbox in each event.
+       the models on the current page, passing each model and the current
+       `checked` value of the checkbox in each event.
+
+       A `backgrid:selected` event will also be triggered with the current
+       `checked` value on all the models regardless of whether they are on the
+       current page.
+
+       This method triggers a 'backgrid:select-all' event on the collection
+       afterwards.
     */
-    onChange: function (e) {
-      var checked = $(e.target).prop("checked");
+    onChange: function () {
+      var checked = this.checkbox().prop("checked");
 
       var collection = this.collection;
       collection.each(function (model) {
         model.trigger("backgrid:select", model, checked);
       });
+
+      if (collection.fullCollection) {
+        collection.fullCollection.each(function (model) {
+          if (!collection.get(model.cid)) {
+            model.trigger("backgrid:selected", model, checked);
+          }
+        });
+      }
+
+      this.collection.trigger("backgrid:select-all", this.collection, checked);
     }
 
   });
 
   /**
      Convenient method to retrieve a list of selected models. This method only
-     exists when the `SelectAll` extension has been included.
+     exists when the `SelectAll` extension has been included. Selected models
+     are retained across pagination.
 
      @member Backgrid.Grid
      @return {Array.<Backbone.Model>}
@@ -204,12 +265,28 @@
 
     var result = [];
     if (selectAllHeaderCell) {
-      for (var modelId in selectAllHeaderCell.selectedModels) {
-        result.push(this.collection.get(modelId));
+      var selectedModels = selectAllHeaderCell.selectedModels;
+      var collection = this.collection.fullCollection || this.collection;
+      for (var modelId in selectedModels) {
+        result.push(collection.get(modelId));
       }
     }
 
     return result;
   };
 
-}(window, jQuery, _, Backbone, Backgrid));
+  /**
+     Convenient method to deselect the selected models. This method is only
+     available when the `SelectAll` extension has been included.
+
+     @member Backgrid.Grid
+   */
+  Backgrid.Grid.prototype.clearSelectedModels = function () {
+    var selectedModels = this.getSelectedModels();
+    for (var i = 0, l = selectedModels.length; i < l; i++) {
+      var model = selectedModels[i];
+      model.trigger("backgrid:select", model, false);
+    }
+  };
+
+}));

data/vendor/assets/javascripts/backgrid-extensions/backgrid-select2-cell.js

@@ -5,8 +5,21 @@
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
   Licensed under the MIT @license.
 */
+(function (root, factory) {
 
-(function (window, $, _, Backbone, Backgrid)  {
+  // CommonJS
+  if (typeof exports == "object") {
+    require("select2");
+    module.exports = factory(root,
+                             require("underscore"),
+                             require("backgrid"));
+  }
+  // Browser
+  else factory(root, root._, root.Backgrid);
+
+}(this, function (root, _, Backgrid)  {
+
+  "use strict";
 
   /**
      Select2CellEditor is a cell editor that renders a `select2` select box
@@ -23,12 +36,13 @@
 
     /** @property */
     events: {
-      "close": "save",
       "change": "save"
     },
 
     /** @property */
-    select2Options: null,
+    select2Options: {
+      openOnEnter: false
+    },
 
     initialize: function () {
       Backgrid.SelectCellEditor.prototype.initialize.apply(this, arguments);
@@ -40,8 +54,7 @@
        edit mode.
      */
     setSelect2Options: function (options) {
-      this.select2Options = _.extend({containerCssClass: "select2-container"},
-                                     options || {});
+      this.select2Options = _.extend(options || {});
     },
 
     /**
@@ -53,7 +66,6 @@
     render: function () {
       Backgrid.SelectCellEditor.prototype.render.apply(this, arguments);
       this.$el.select2(this.select2Options);
-      this.delegateEvents();
       return this;
     },
 
@@ -62,13 +74,29 @@
     */
     postRender: function () {
       var self = this;
-      this.$el.parent()
-        .find("." + this.select2Options.containerCssClass)
-        .on("blur", function (e) {
-          if (!e.relatedTarget) self.close(e);
-        })
-        .on("keydown", this.close)
-        .attr("tabindex", -1).focus();
+      if (self.multiple) self.$el.select2("container").keydown(self.close);
+      else self.$el.data("select2").focusser.keydown(self.close);
+
+      self.$el.on("select2-blur", function (e) {
+        if (!self.multiple) {
+          e.type = "blur";
+          self.close(e);
+        }
+        else {
+          // HACK to get around https://github.com/ivaynberg/select2/issues/2011
+          // select2-blur is triggered from blur and is fired repeatibly under
+          // multiple select. Since blue is fired before everything, but focus
+          // is set in focus and click, we need to wait for a while so other
+          // event handlers may have a chance to run.
+          var id = root.setTimeout(function () {
+            root.clearTimeout(id);
+            if (!self.$el.select2("isFocused")) {
+              e.type = "blur";
+              self.close(e);
+            }
+          }, 200);
+        }
+      }).select2("focus");
     },
 
     remove: function () {
@@ -118,4 +146,4 @@
 
   });
 
-}(window, jQuery, _, Backbone, Backgrid));
+}));

data/vendor/assets/javascripts/backgrid-extensions/backgrid-text-cell.js

@@ -5,8 +5,17 @@
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
   Licensed under the MIT @license.
 */
+(function (root, factory) {
 
-(function (window, $, _, Backbone, Backgrid)  {
+  // CommonJS
+  if (typeof exports == "object") {
+    module.exports = factory(require("underscore"),
+                             require("backgrid"));
+  }
+  // Browser
+  else factory(root._, root.Backgrid);
+
+}(this, function (_, Backgrid)  {
 
   /**
      Renders a form with a text area and a save button in a modal dialog.
@@ -20,10 +29,10 @@
     tagName: "div",
 
     /** @property */
-    className: "modal hide fade",
+    className: "modal fade",
 
     /** @property {function(Object, ?Object=): string} template */
-    template: _.template('<form><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h3><%- column.get("label") %></h3></div><div class="modal-body"><textarea cols="<%= cols %>" rows="<%= rows %>"><%- content %></textarea></div><div class="modal-footer"><input class="btn" type="submit" value="Save"/></div></form>'),
+    template: _.template('<div class="modal-dialog"><div class="modal-content"><form><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h3><%- column.get("label") %></h3></div><div class="modal-body"><textarea cols="<%= cols %>" rows="<%= rows %>"><%- content %></textarea></div><div class="modal-footer"><input class="btn btn-primary" type="submit" value="Save"/></div></form></div></div>', null, {variable: null}),
 
     /** @property */
     cols: 80,
@@ -35,9 +44,9 @@
     events: {
       "keydown textarea": "clearError",
       "submit": "saveOrCancel",
-      "hide": "saveOrCancel",
-      "hidden": "close",
-      "shown": "focus"
+      "hide.bs.modal": "saveOrCancel",
+      "hidden.bs.modal": "close",
+      "shown.bs.modal": "focus"
     },
 
     /**
@@ -100,7 +109,7 @@
       else if (!e || e.type == "submit" ||
                (e.type == "hide" &&
                 newValue !== (this.model.get(this.column.get("name")) || '').replace(/\r/g, '') &&
-                window.confirm("Would you like to save your changes?"))) {
+                confirm("Would you like to save your changes?"))) {
 
         model.set(column.get("name"), newValue);
         this.$el.modal("hide");
@@ -146,7 +155,7 @@
      @class Backgrid.Extension.TextCell
      @extends Backgrid.StringCell
   */
-  var TextCell = Backgrid.Extension.TextCell = Backgrid.StringCell.extend({
+  Backgrid.Extension.TextCell = Backgrid.StringCell.extend({
 
     /** @property */
     className: "text-cell",
@@ -156,4 +165,4 @@
 
   });
 
-}(window, jQuery, _, Backbone, Backgrid));
+}));

data/vendor/assets/javascripts/backgrid.js

@@ -1,23 +1,36 @@
-/*
-  backgrid
+/*!
+  backgrid 0.3.5
   http://github.com/wyuenho/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Copyright (c) 2014 Jimmy Yuen Ho Wong and contributors <wyuenho@gmail.com>
+  Licensed under the MIT license.
 */
-(function (root, $, _, Backbone) {
+
+(function (root, factory) {
+
+  if (typeof define === "function" && define.amd) {
+    // AMD (+ global for extensions)
+    define(["underscore", "backbone"], function (_, Backbone) {
+      return (root.Backgrid = factory(_, Backbone));
+    });
+  } else if (typeof exports === "object") {
+    // CommonJS
+    module.exports = factory(require("underscore"), require("backbone"));
+  } else {
+    // Browser
+    root.Backgrid = factory(root._, root.Backbone);
+  }}(this, function (_, Backbone) {
 
   "use strict";
+
 /*
   backgrid
   http://github.com/wyuenho/backgrid
 
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Licensed under the MIT license.
 */
 
-var window = root;
-
 // Copyright 2009, 2010 Kristopher Michael Kowal
 // https://github.com/kriskowal/es5-shim
 // ES5 15.5.4.20
@@ -41,10 +54,6 @@ if (!String.prototype.trim || ws.trim()) {
   };
 }
 
-function capitalize(s) {
-  return String.fromCharCode(s.charCodeAt(0) - 32) + s.slice(1);
-}
-
 function lpad(str, length, padstr) {
   var paddingLen = length - (str + '').length;
   paddingLen =  paddingLen < 0 ? 0 : paddingLen;
@@ -55,24 +64,17 @@ function lpad(str, length, padstr) {
   return padding + str;
 }
 
-var Backgrid = root.Backgrid = {
+var $ = Backbone.$;
 
-  VERSION: "0.2.6",
+var Backgrid = {
 
   Extension: {},
 
-  requireOptions: function (options, requireOptionKeys) {
-    for (var i = 0; i < requireOptionKeys.length; i++) {
-      var key = requireOptionKeys[i];
-      if (_.isUndefined(options[key])) {
-        throw new TypeError("'" + key  + "' is required");
-      }
-    }
-  },
-
   resolveNameToClass: function (name, suffix) {
     if (_.isString(name)) {
-      var key = _.map(name.split('-'), function (e) { return capitalize(e); }).join('') + suffix;
+      var key = _.map(name.split('-'), function (e) {
+        return e.slice(0, 1).toUpperCase() + e.slice(1);
+      }).join('') + suffix;
       var klass = Backgrid[key] || Backgrid.Extension[key];
       if (_.isUndefined(klass)) {
         throw new ReferenceError("Class '" + key + "' not found");
@@ -81,7 +83,17 @@ var Backgrid = root.Backgrid = {
     }
 
     return name;
+  },
+
+  callByNeed: function () {
+    var value = arguments[0];
+    if (!_.isFunction(value)) return value;
+
+    var context = arguments[1];
+    var args = [].slice.call(arguments, 2);
+    return value.apply(context, !!(args + '') ? args : []);
   }
+
 };
 _.extend(Backgrid, Backbone.Events);
 
@@ -99,7 +111,7 @@ _.extend(Backgrid, Backbone.Events);
 var Command = Backgrid.Command = function (evt) {
   _.extend(this, {
     altKey: !!evt.altKey,
-    char: evt.char,
+    "char": evt["char"],
     charCode: evt.charCode,
     ctrlKey: !!evt.ctrlKey,
     key: evt.key,
@@ -165,7 +177,7 @@ _.extend(Command.prototype, {
   http://github.com/wyuenho/backgrid
 
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Licensed under the MIT license.
 */
 
 /**
@@ -189,9 +201,10 @@ _.extend(CellFormatter.prototype, {
 
      @member Backgrid.CellFormatter
      @param {*} rawData
+     @param {Backbone.Model} model Used for more complicated formatting
      @return {*}
   */
-  fromRaw: function (rawData) {
+  fromRaw: function (rawData, model) {
     return rawData;
   },
 
@@ -204,16 +217,18 @@ _.extend(CellFormatter.prototype, {
 
      @member Backgrid.CellFormatter
      @param {string} formattedData
+     @param {Backbone.Model} model Used for more complicated formatting
      @return {*|undefined}
   */
-  toRaw: function (formattedData) {
+  toRaw: function (formattedData, model) {
     return formattedData;
   }
 
 });
 
 /**
-   A floating point number formatter. Doesn't understand notation at the moment.
+   A floating point number formatter. Doesn't understand scientific notation at
+   the moment.
 
    @class Backgrid.NumberFormatter
    @extends Backgrid.CellFormatter
@@ -221,8 +236,7 @@ _.extend(CellFormatter.prototype, {
    @throws {RangeError} If decimals < 0 or > 20.
 */
 var NumberFormatter = Backgrid.NumberFormatter = function (options) {
-  options = options ? _.clone(options) : {};
-  _.extend(this, this.defaults, options);
+  _.extend(this, this.defaults, options || {});
 
   if (this.decimals < 0 || this.decimals > 20) {
     throw new RangeError("decimals must be between 0 and 20");
@@ -259,9 +273,10 @@ _.extend(NumberFormatter.prototype, {
 
      @member Backgrid.NumberFormatter
      @param {number} number
+     @param {Backbone.Model} model Used for more complicated formatting
      @return {string}
   */
-  fromRaw: function (number) {
+  fromRaw: function (number, model) {
     if (_.isNull(number) || _.isUndefined(number)) return '';
 
     number = number.toFixed(~~this.decimals);
@@ -279,13 +294,18 @@ _.extend(NumberFormatter.prototype, {
 
      @member Backgrid.NumberFormatter
      @param {string} formattedData
+     @param {Backbone.Model} model Used for more complicated formatting
      @return {number|undefined} Undefined if the string cannot be converted to
      a number.
   */
-  toRaw: function (formattedData) {
+  toRaw: function (formattedData, model) {
+    formattedData = formattedData.trim();
+
+    if (formattedData === '') return null;
+
     var rawData = '';
 
-    var thousands = formattedData.trim().split(this.orderSeparator);
+    var thousands = formattedData.split(this.orderSeparator);
     for (var i = 0; i < thousands.length; i++) {
       rawData += thousands[i];
     }
@@ -306,6 +326,76 @@ _.extend(NumberFormatter.prototype, {
 
 });
 
+/**
+   A number formatter that converts a floating point number, optionally
+   multiplied by a multiplier, to a percentage string and vice versa.
+
+   @class Backgrid.PercentFormatter
+   @extends Backgrid.NumberFormatter
+   @constructor
+   @throws {RangeError} If decimals < 0 or > 20.
+ */
+var PercentFormatter = Backgrid.PercentFormatter = function () {
+  Backgrid.NumberFormatter.apply(this, arguments);
+};
+
+PercentFormatter.prototype = new Backgrid.NumberFormatter(),
+
+_.extend(PercentFormatter.prototype, {
+
+  /**
+     @member Backgrid.PercentFormatter
+     @cfg {Object} options
+
+     @cfg {number} [options.multiplier=1] The number used to multiply the model
+     value for display.
+
+     @cfg {string} [options.symbol='%'] The symbol to append to the percentage
+     string.
+   */
+  defaults: _.extend({}, NumberFormatter.prototype.defaults, {
+    multiplier: 1,
+    symbol: "%"
+  }),
+
+  /**
+     Takes a floating point number, where the number is first multiplied by
+     `multiplier`, then converted to a formatted string like
+     NumberFormatter#fromRaw, then finally append `symbol` to the end.
+
+     @member Backgrid.PercentFormatter
+     @param {number} rawValue
+     @param {Backbone.Model} model Used for more complicated formatting
+     @return {string}
+  */
+  fromRaw: function (number, model) {
+    var args = [].slice.call(arguments, 1);
+    args.unshift(number * this.multiplier);
+    return (NumberFormatter.prototype.fromRaw.apply(this, args) || "0") + this.symbol;
+  },
+
+  /**
+     Takes a string, possibly appended with `symbol` and/or `decimalSeparator`,
+     and convert it back to a number for the model like NumberFormatter#toRaw,
+     and then dividing it by `multiplier`.
+
+     @member Backgrid.PercentFormatter
+     @param {string} formattedData
+     @param {Backbone.Model} model Used for more complicated formatting
+     @return {number|undefined} Undefined if the string cannot be converted to
+     a number.
+  */
+  toRaw: function (formattedValue, model) {
+    var tokens = formattedValue.split(this.symbol);
+    if (tokens && tokens[0] && tokens[1] === "" || tokens[1] == null) {
+      var rawValue = NumberFormatter.prototype.toRaw.call(this, tokens[0]);
+      if (_.isUndefined(rawValue)) return rawValue;
+      return rawValue / this.multiplier;
+    }
+  }
+
+});
+
 /**
    Formatter to converts between various datetime formats.
 
@@ -320,8 +410,7 @@ _.extend(NumberFormatter.prototype, {
    @throws {Error} If both `includeDate` and `includeTime` are false.
 */
 var DatetimeFormatter = Backgrid.DatetimeFormatter = function (options) {
-  options = options ? _.clone(options) : {};
-  _.extend(this, this.defaults, options);
+  _.extend(this, this.defaults, options || {});
 
   if (!this.includeDate && !this.includeTime) {
     throw new Error("Either includeDate or includeTime must be true");
@@ -355,6 +444,8 @@ _.extend(DatetimeFormatter.prototype, {
   ISO_SPLITTER_RE: /T|Z| +/,
 
   _convert: function (data, validate) {
+    if ((data + '').trim() === '') return null;
+
     var date, time = null;
     if (_.isNumber(data)) {
       var jsDate = new Date(data);
@@ -413,10 +504,11 @@ _.extend(DatetimeFormatter.prototype, {
 
      @member Backgrid.DatetimeFormatter
      @param {string} rawData
+     @param {Backbone.Model} model Used for more complicated formatting
      @return {string|null|undefined} ISO-8601 string in UTC. Null and undefined
      values are returned as is.
   */
-  fromRaw: function (rawData) {
+  fromRaw: function (rawData, model) {
     if (_.isNull(rawData) || _.isUndefined(rawData)) return '';
     return this._convert(rawData);
   },
@@ -430,12 +522,13 @@ _.extend(DatetimeFormatter.prototype, {
 
      @member Backgrid.DatetimeFormatter
      @param {string} formattedData
+     @param {Backbone.Model} model Used for more complicated formatting
      @return {string|undefined} ISO-8601 string in UTC. Undefined if a date is
      found when `includeDate` is false, or a time is found when `includeTime` is
      false, or if `includeDate` is true and a date is not found, or if
      `includeTime` is true and a time is not found.
   */
-  toRaw: function (formattedData) {
+  toRaw: function (formattedData, model) {
     return this._convert(formattedData, true);
   }
 
@@ -458,9 +551,10 @@ _.extend(StringFormatter.prototype, {
 
      @member Backgrid.StringFormatter
      @param {*} rawValue
+     @param {Backbone.Model} model Used for more complicated formatting
      @return {string}
    */
-  fromRaw: function (rawValue) {
+  fromRaw: function (rawValue, model) {
     if (_.isUndefined(rawValue) || _.isNull(rawValue)) return '';
     return rawValue + '';
   }
@@ -483,9 +577,10 @@ _.extend(EmailFormatter.prototype, {
 
      @member Backgrid.EmailFormatter
      @param {*} formattedData
+     @param {Backbone.Model} model Used for more complicated formatting
      @return {string|undefined}
    */
-  toRaw: function (formattedData) {
+  toRaw: function (formattedData, model) {
     var parts = formattedData.trim().split("@");
     if (parts.length === 2 && _.all(parts)) {
       return formattedData;
@@ -496,6 +591,11 @@ _.extend(EmailFormatter.prototype, {
 /**
    Formatter for SelectCell.
 
+   If the type of a model value is not a string, it is expected that a subclass
+   of this formatter is provided to the SelectCell, with #toRaw overridden to
+   convert the string value returned from the DOM back to whatever value is
+   expected in the model.
+
    @class Backgrid.SelectFormatter
    @extends Backgrid.CellFormatter
    @constructor
@@ -509,9 +609,10 @@ _.extend(SelectFormatter.prototype, {
 
      @member Backgrid.SelectFormatter
      @param {*} rawValue
+     @param {Backbone.Model} model Used for more complicated formatting
      @return {Array.<*>}
   */
-  fromRaw: function (rawValue) {
+  fromRaw: function (rawValue, model) {
     return _.isArray(rawValue) ? rawValue : rawValue != null ? [rawValue] : [];
   }
 });
@@ -521,7 +622,7 @@ _.extend(SelectFormatter.prototype, {
   http://github.com/wyuenho/backgrid
 
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Licensed under the MIT license.
 */
 
 /**
@@ -546,7 +647,6 @@ var CellEditor = Backgrid.CellEditor = Backbone.View.extend({
      `model` or `column` are undefined.
   */
   initialize: function (options) {
-    Backgrid.requireOptions(options, ["formatter", "column", "model"]);
     this.formatter = options.formatter;
     this.column = options.column;
     if (!(this.column instanceof Column)) {
@@ -605,7 +705,7 @@ var InputCellEditor = Backgrid.InputCellEditor = CellEditor.extend({
      @param {string} [options.placeholder]
   */
   initialize: function (options) {
-    CellEditor.prototype.initialize.apply(this, arguments);
+    InputCellEditor.__super__.initialize.apply(this, arguments);
 
     if (options.placeholder) {
       this.$el.attr("placeholder", options.placeholder);
@@ -617,7 +717,8 @@ var InputCellEditor = Backgrid.InputCellEditor = CellEditor.extend({
      exists.
   */
   render: function () {
-    this.$el.val(this.formatter.fromRaw(this.model.get(this.column.get("name"))));
+    var model = this.model;
+    this.$el.val(this.formatter.fromRaw(model.get(this.column.get("name")), model));
     return this;
   },
 
@@ -654,7 +755,7 @@ var InputCellEditor = Backgrid.InputCellEditor = CellEditor.extend({
       e.stopPropagation();
 
       var val = this.$el.val();
-      var newValue = formatter.toRaw(val);
+      var newValue = formatter.toRaw(val, model);
       if (_.isUndefined(newValue)) {
         model.trigger("backgrid:error", model, column, val);
       }
@@ -703,9 +804,9 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
   tagName: "td",
 
   /**
-     @property {Backgrid.CellFormatter|Object|string} [formatter=new CellFormatter()]
+     @property {Backgrid.CellFormatter|Object|string} [formatter=CellFormatter]
   */
-  formatter: new CellFormatter(),
+  formatter: CellFormatter,
 
   /**
      @property {Backgrid.CellEditor} [editor=Backgrid.InputCellEditor] The
@@ -732,17 +833,43 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
      said name cannot be found in the Backgrid module.
   */
   initialize: function (options) {
-    Backgrid.requireOptions(options, ["model", "column"]);
     this.column = options.column;
     if (!(this.column instanceof Column)) {
       this.column = new Column(this.column);
     }
-    this.formatter = Backgrid.resolveNameToClass(this.column.get("formatter") || this.formatter, "Formatter");
+
+    var column = this.column, model = this.model, $el = this.$el;
+
+    var formatter = Backgrid.resolveNameToClass(column.get("formatter") ||
+                                                this.formatter, "Formatter");
+
+    if (!_.isFunction(formatter.fromRaw) && !_.isFunction(formatter.toRaw)) {
+      formatter = new formatter();
+    }
+
+    this.formatter = formatter;
+
     this.editor = Backgrid.resolveNameToClass(this.editor, "CellEditor");
-    this.listenTo(this.model, "change:" + this.column.get("name"), function () {
-      if (!this.$el.hasClass("editor")) this.render();
+
+    this.listenTo(model, "change:" + column.get("name"), function () {
+      if (!$el.hasClass("editor")) this.render();
     });
-    this.listenTo(this.model, "backgrid:error", this.renderError);
+
+    this.listenTo(model, "backgrid:error", this.renderError);
+
+    this.listenTo(column, "change:editable change:sortable change:renderable",
+                  function (column) {
+                    var changed = column.changedAttributes();
+                    for (var key in changed) {
+                      if (changed.hasOwnProperty(key)) {
+                        $el.toggleClass(key, changed[key]);
+                      }
+                    }
+                  });
+
+    if (Backgrid.callByNeed(column.editable(), column, model)) $el.addClass("editable");
+    if (Backgrid.callByNeed(column.sortable(), column, model)) $el.addClass("sortable");
+    if (Backgrid.callByNeed(column.renderable(), column, model)) $el.addClass("renderable");
   },
 
   /**
@@ -751,7 +878,8 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
   */
   render: function () {
     this.$el.empty();
-    this.$el.text(this.formatter.fromRaw(this.model.get(this.column.get("name"))));
+    var model = this.model;
+    this.$el.text(this.formatter.fromRaw(model.get(this.column.get("name")), model));
     this.delegateEvents();
     return this;
   },
@@ -779,7 +907,8 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
     var model = this.model;
     var column = this.column;
 
-    if (column.get("editable")) {
+    var editable = Backgrid.callByNeed(column.editable(), column, model);
+    if (editable) {
 
       this.currentEditor = new this.editor({
         column: this.column,
@@ -828,10 +957,10 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
   */
   remove: function () {
     if (this.currentEditor) {
-      this.currentEditor.remove.apply(this, arguments);
+      this.currentEditor.remove.apply(this.currentEditor, arguments);
       delete this.currentEditor;
     }
-    return Backbone.View.prototype.remove.apply(this, arguments);
+    return Cell.__super__.remove.apply(this, arguments);
   }
 
 });
@@ -847,7 +976,7 @@ var StringCell = Backgrid.StringCell = Cell.extend({
   /** @property */
   className: "string-cell",
 
-  formatter: new StringFormatter()
+  formatter: StringFormatter
 
 });
 
@@ -867,14 +996,33 @@ var UriCell = Backgrid.UriCell = Cell.extend({
   /** @property */
   className: "uri-cell",
 
+  /**
+     @property {string} [title] The title attribute of the generated anchor. It
+     uses the display value formatted by the `formatter.fromRaw` by default.
+  */
+  title: null,
+
+  /**
+     @property {string} [target="_blank"] The target attribute of the generated
+     anchor.
+  */
+  target: "_blank",
+
+  initialize: function (options) {
+    UriCell.__super__.initialize.apply(this, arguments);
+    this.title = options.title || this.title;
+    this.target = options.target || this.target;
+  },
+
   render: function () {
     this.$el.empty();
-    var formattedValue = this.formatter.fromRaw(this.model.get(this.column.get("name")));
+    var rawValue = this.model.get(this.column.get("name"));
+    var formattedValue = this.formatter.fromRaw(rawValue, this.model);
     this.$el.append($("<a>", {
       tabIndex: -1,
-      href: formattedValue,
-      title: formattedValue,
-      target: "_blank"
+      href: rawValue,
+      title: this.title || formattedValue,
+      target: this.target
     }).text(formattedValue));
     this.delegateEvents();
     return this;
@@ -895,11 +1043,12 @@ var EmailCell = Backgrid.EmailCell = StringCell.extend({
   /** @property */
   className: "email-cell",
 
-  formatter: new EmailFormatter(),
+  formatter: EmailFormatter,
 
   render: function () {
     this.$el.empty();
-    var formattedValue = this.formatter.fromRaw(this.model.get(this.column.get("name")));
+    var model = this.model;
+    var formattedValue = this.formatter.fromRaw(model.get(this.column.get("name")), model);
     this.$el.append($("<a>", {
       tabIndex: -1,
       href: "mailto:" + formattedValue,
@@ -945,12 +1094,11 @@ var NumberCell = Backgrid.NumberCell = Cell.extend({
      @param {Backgrid.Column} options.column
   */
   initialize: function (options) {
-    Cell.prototype.initialize.apply(this, arguments);
-    this.formatter = new this.formatter({
-      decimals: this.decimals,
-      decimalSeparator: this.decimalSeparator,
-      orderSeparator: this.orderSeparator
-    });
+    NumberCell.__super__.initialize.apply(this, arguments);
+    var formatter = this.formatter;
+    formatter.decimals = this.decimals;
+    formatter.decimalSeparator = this.decimalSeparator;
+    formatter.orderSeparator = this.orderSeparator;
   }
 
 });
@@ -974,6 +1122,43 @@ var IntegerCell = Backgrid.IntegerCell = NumberCell.extend({
   decimals: 0
 });
 
+/**
+   A PercentCell is another Backgrid.NumberCell that takes a floating number,
+   optionally multiplied by a multiplier and display it as a percentage.
+
+   @class Backgrid.PercentCell
+   @extends Backgrid.NumberCell
+ */
+var PercentCell = Backgrid.PercentCell = NumberCell.extend({
+
+  /** @property */
+  className: "percent-cell",
+
+  /** @property {number} [multiplier=1] */
+  multiplier: PercentFormatter.prototype.defaults.multiplier,
+
+  /** @property {string} [symbol='%'] */
+  symbol: PercentFormatter.prototype.defaults.symbol,
+
+  /** @property {Backgrid.CellFormatter} [formatter=Backgrid.PercentFormatter] */
+  formatter: PercentFormatter,
+
+  /**
+     Initializes this cell and the percent formatter.
+
+     @param {Object} options
+     @param {Backbone.Model} options.model
+     @param {Backgrid.Column} options.column
+  */
+  initialize: function () {
+    PercentCell.__super__.initialize.apply(this, arguments);
+    var formatter = this.formatter;
+    formatter.multiplier = this.multiplier;
+    formatter.symbol = this.symbol;
+  }
+
+});
+
 /**
    DatetimeCell is a basic cell that accepts datetime string values in RFC-2822
    or W3C's subset of ISO-8601 and displays them in ISO-8601 format. For a much
@@ -1019,12 +1204,11 @@ var DatetimeCell = Backgrid.DatetimeCell = Cell.extend({
      @param {Backgrid.Column} options.column
   */
   initialize: function (options) {
-    Cell.prototype.initialize.apply(this, arguments);
-    this.formatter = new this.formatter({
-      includeDate: this.includeDate,
-      includeTime: this.includeTime,
-      includeMilli: this.includeMilli
-    });
+    DatetimeCell.__super__.initialize.apply(this, arguments);
+    var formatter = this.formatter;
+    formatter.includeDate = this.includeDate;
+    formatter.includeTime = this.includeTime;
+    formatter.includeMilli = this.includeMilli;
 
     var placeholder = this.includeDate ? "YYYY-MM-DD" : "";
     placeholder += (this.includeDate && this.includeTime) ? "T" : "";
@@ -1107,7 +1291,8 @@ var BooleanCellEditor = Backgrid.BooleanCellEditor = CellEditor.extend({
      uncheck otherwise.
   */
   render: function () {
-    var val = this.formatter.fromRaw(this.model.get(this.column.get("name")));
+    var model = this.model;
+    var val = this.formatter.fromRaw(model.get(this.column.get("name")), model);
     this.$el.prop("checked", val);
     return this;
   },
@@ -1145,12 +1330,12 @@ var BooleanCellEditor = Backgrid.BooleanCellEditor = CellEditor.extend({
         command.moveDown()) {
       e.preventDefault();
       e.stopPropagation();
-      var val = formatter.toRaw($el.prop("checked"));
+      var val = formatter.toRaw($el.prop("checked"), model);
       model.set(column.get("name"), val);
       model.trigger("backgrid:edited", model, column, command);
     }
     else if (e.type == "change") {
-      var val = formatter.toRaw($el.prop("checked"));
+      var val = formatter.toRaw($el.prop("checked"), model);
       model.set(column.get("name"), val);
       $el.focus();
     }
@@ -1184,10 +1369,13 @@ var BooleanCell = Backgrid.BooleanCell = Cell.extend({
   */
   render: function () {
     this.$el.empty();
+    var model = this.model, column = this.column;
+    var editable = Backgrid.callByNeed(column.editable(), column, model);
     this.$el.append($("<input>", {
       tabIndex: -1,
       type: "checkbox",
-      checked: this.formatter.fromRaw(this.model.get(this.column.get("name")))
+      checked: this.formatter.fromRaw(model.get(column.get("name")), model),
+      disabled: !editable
     }));
     this.delegateEvents();
     return this;
@@ -1214,10 +1402,11 @@ var SelectCellEditor = Backgrid.SelectCellEditor = CellEditor.extend({
   },
 
   /** @property {function(Object, ?Object=): string} template */
-  template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>'),
+  template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>', null, {variable: null}),
 
   setOptionValues: function (optionValues) {
     this.optionValues = optionValues;
+    this.optionValues = _.result(this, "optionValues");
   },
 
   setMultiple: function (multiple) {
@@ -1231,7 +1420,7 @@ var SelectCellEditor = Backgrid.SelectCellEditor = CellEditor.extend({
       options = options + this.template({
         text: nvps[i][0],
         value: nvps[i][1],
-        selected: selectedValues.indexOf(nvps[i][1]) > -1
+        selected: _.indexOf(selectedValues, nvps[i][1]) > -1
       });
     }
     return options;
@@ -1248,9 +1437,10 @@ var SelectCellEditor = Backgrid.SelectCellEditor = CellEditor.extend({
     this.$el.empty();
 
     var optionValues = _.result(this, "optionValues");
-    var selectedValues = this.formatter.fromRaw(this.model.get(this.column.get("name")));
+    var model = this.model;
+    var selectedValues = this.formatter.fromRaw(model.get(this.column.get("name")), model);
 
-    if (!_.isArray(optionValues)) throw TypeError("optionValues must be an array");
+    if (!_.isArray(optionValues)) throw new TypeError("optionValues must be an array");
 
     var optionValue = null;
     var optionText = null;
@@ -1268,17 +1458,17 @@ var SelectCellEditor = Backgrid.SelectCellEditor = CellEditor.extend({
         this.$el.append(this.template({
           text: optionText,
           value: optionValue,
-          selected: selectedValues.indexOf(optionValue) > -1
+          selected: _.indexOf(selectedValues, optionValue) > -1
         }));
       }
       else if (_.isObject(optionValue)) {
         optgroupName = optionValue.name;
         optgroup = $("<optgroup></optgroup>", { label: optgroupName });
-        optgroup.append(this._renderOptions(optionValue.values, selectedValues));
+        optgroup.append(this._renderOptions.call(this, optionValue.values, selectedValues));
         this.$el.append(optgroup);
       }
       else {
-        throw TypeError("optionValues elements must be a name-value pair or an object hash of { name: 'optgroup label', value: [option name-value pairs] }");
+        throw new TypeError("optionValues elements must be a name-value pair or an object hash of { name: 'optgroup label', value: [option name-value pairs] }");
       }
     }
 
@@ -1288,14 +1478,12 @@ var SelectCellEditor = Backgrid.SelectCellEditor = CellEditor.extend({
   },
 
   /**
-     Saves the value of the selected option to the model attribute. Triggers a
-     `backgrid:edited` Backbone event from the model.
+     Saves the value of the selected option to the model attribute.
   */
   save: function (e) {
     var model = this.model;
     var column = this.column;
-    model.set(column.get("name"), this.formatter.toRaw(this.$el.val()));
-    model.trigger("backgrid:edited", model, column, new Command(e));
+    model.set(column.get("name"), this.formatter.toRaw(this.$el.val(), model));
   },
 
   /**
@@ -1314,9 +1502,7 @@ var SelectCellEditor = Backgrid.SelectCellEditor = CellEditor.extend({
              command.moveUp() || command.moveDown() || e.type == "blur") {
       e.preventDefault();
       e.stopPropagation();
-      if (e.type == "blur" && this.$el.find("option").length === 1) {
-        model.set(column.get("name"), this.formatter.toRaw(this.$el.val()));
-      }
+      this.save(e);
       model.trigger("backgrid:edited", model, column, new Command(e));
     }
   }
@@ -1367,7 +1553,7 @@ var SelectCell = Backgrid.SelectCell = Cell.extend({
   multiple: false,
 
   /** @property */
-  formatter: new SelectFormatter(),
+  formatter: SelectFormatter,
 
   /**
      @property {Array.<Array>|Array.<{name: string, values: Array.<Array>}>} optionValues
@@ -1387,8 +1573,7 @@ var SelectCell = Backgrid.SelectCell = Cell.extend({
      @throws {TypeError} If `optionsValues` is undefined.
   */
   initialize: function (options) {
-    Cell.prototype.initialize.apply(this, arguments);
-    Backgrid.requireOptions(this, ["optionValues"]);
+    SelectCell.__super__.initialize.apply(this, arguments);
     this.listenTo(this.model, "backgrid:edit", function (model, column, cell, editor) {
       if (column.get("name") == this.column.get("name")) {
         editor.setOptionValues(this.optionValues);
@@ -1405,8 +1590,9 @@ var SelectCell = Backgrid.SelectCell = Cell.extend({
   render: function () {
     this.$el.empty();
 
-    var optionValues = this.optionValues;
-    var rawData = this.formatter.fromRaw(this.model.get(this.column.get("name")));
+    var optionValues = _.result(this, "optionValues");
+    var model = this.model;
+    var rawData = this.formatter.fromRaw(model.get(this.column.get("name")), model);
 
     var selectedText = [];
 
@@ -1445,7 +1631,7 @@ var SelectCell = Backgrid.SelectCell = Cell.extend({
     }
     catch (ex) {
       if (ex instanceof TypeError) {
-        throw TypeError("'optionValues' must be of type {Array.<Array>|Array.<{name: string, values: Array.<Array>}>}");
+        throw new TypeError("'optionValues' must be of type {Array.<Array>|Array.<{name: string, values: Array.<Array>}>}");
       }
       throw ex;
     }
@@ -1456,12 +1642,13 @@ var SelectCell = Backgrid.SelectCell = Cell.extend({
   }
 
 });
+
 /*
   backgrid
   http://github.com/wyuenho/backgrid
 
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Licensed under the MIT license.
 */
 
 /**
@@ -1473,9 +1660,77 @@ var SelectCell = Backgrid.SelectCell = Cell.extend({
 
    @class Backgrid.Column
    @extends Backbone.Model
- */
+*/
 var Column = Backgrid.Column = Backbone.Model.extend({
 
+  /**
+     @cfg {Object} defaults Column defaults. To override any of these default
+     values, you can either change the prototype directly to override
+     Column.defaults globally or extend Column and supply the custom class to
+     Backgrid.Grid:
+
+         // Override Column defaults globally
+         Column.prototype.defaults.sortable = false;
+
+         // Override Column defaults locally
+         var MyColumn = Column.extend({
+           defaults: _.defaults({
+             editable: false
+           }, Column.prototype.defaults)
+         });
+
+         var grid = new Backgrid.Grid(columns: new Columns([{...}, {...}], {
+           model: MyColumn
+         }));
+
+     @cfg {string} [defaults.name] The default name of the model attribute.
+
+     @cfg {string} [defaults.label] The default label to show in the header.
+
+     @cfg {string|Backgrid.Cell} [defaults.cell] The default cell type. If this
+     is a string, the capitalized form will be used to look up a cell class in
+     Backbone, i.e.: string => StringCell. If a Cell subclass is supplied, it is
+     initialized with a hash of parameters. If a Cell instance is supplied, it
+     is used directly.
+
+     @cfg {string|Backgrid.HeaderCell} [defaults.headerCell] The default header
+     cell type.
+
+     @cfg {boolean|string|function(): boolean} [defaults.sortable=true] Whether
+     this column is sortable. If the value is a string, a method will the same
+     name will be looked up from the column instance to determine whether the
+     column should be sortable. The method's signature must be `function
+     (Backgrid.Column, Backbone.Model): boolean`.
+
+     @cfg {boolean|string|function(): boolean} [defaults.editable=true] Whether
+     this column is editable. If the value is a string, a method will the same
+     name will be looked up from the column instance to determine whether the
+     column should be editable. The method's signature must be `function
+     (Backgrid.Column, Backbone.Model): boolean`.
+
+     @cfg {boolean|string|function(): boolean} [defaults.renderable=true]
+     Whether this column is renderable. If the value is a string, a method will
+     the same name will be looked up from the column instance to determine
+     whether the column should be renderable. The method's signature must be
+     `function (Backrid.Column, Backbone.Model): boolean`.
+
+     @cfg {Backgrid.CellFormatter | Object | string} [defaults.formatter] The
+     formatter to use to convert between raw model values and user input.
+
+     @cfg {"toggle"|"cycle"} [defaults.sortType="cycle"] Whether sorting will
+     toggle between ascending and descending order, or cycle between insertion
+     order, ascending and descending order.
+
+     @cfg {(function(Backbone.Model, string): *) | string} [defaults.sortValue]
+     The function to use to extract a value from the model for comparison during
+     sorting. If this value is a string, a method with the same name will be
+     looked up from the column instance.
+
+     @cfg {"ascending"|"descending"|null} [defaults.direction=null] The initial
+     sorting direction for this column. The default is ordered by
+     Backbone.Model.cid, which usually means the collection is ordered by
+     insertion order.
+  */
   defaults: {
     name: undefined,
     label: undefined,
@@ -1483,6 +1738,9 @@ var Column = Backgrid.Column = Backbone.Model.extend({
     editable: true,
     renderable: true,
     formatter: undefined,
+    sortType: "cycle",
+    sortValue: undefined,
+    direction: null,
     cell: undefined,
     headerCell: undefined
   },
@@ -1490,42 +1748,105 @@ var Column = Backgrid.Column = Backbone.Model.extend({
   /**
      Initializes this Column instance.
 
-     @param {Object} attrs Column attributes.
-     @param {string} attrs.name The name of the model attribute.
-     @param {string|Backgrid.Cell} attrs.cell The cell type.
-     If this is a string, the capitalized form will be used to look up a
-     cell class in Backbone, i.e.: string => StringCell. If a Cell subclass
-     is supplied, it is initialized with a hash of parameters. If a Cell
-     instance is supplied, it is used directly.
-     @param {string|Backgrid.HeaderCell} [attrs.headerCell] The header cell type.
-     @param {string} [attrs.label] The label to show in the header.
-     @param {boolean} [attrs.sortable=true]
-     @param {boolean} [attrs.editable=true]
-     @param {boolean} [attrs.renderable=true]
-     @param {Backgrid.CellFormatter|Object|string} [attrs.formatter] The
-     formatter to use to convert between raw model values and user input.
+     @param {Object} attrs
+
+     @param {string} attrs.name The model attribute this column is responsible
+     for.
+
+     @param {string|Backgrid.Cell} attrs.cell The cell type to use to render
+     this column.
+
+     @param {string} [attrs.label]
+
+     @param {string|Backgrid.HeaderCell} [attrs.headerCell]
+
+     @param {boolean|string|function(): boolean} [attrs.sortable=true]
+
+     @param {boolean|string|function(): boolean} [attrs.editable=true]
+
+     @param {boolean|string|function(): boolean} [attrs.renderable=true]
+
+     @param {Backgrid.CellFormatter | Object | string} [attrs.formatter]
+
+     @param {"toggle"|"cycle"}  [attrs.sortType="cycle"]
+
+     @param {(function(Backbone.Model, string): *) | string} [attrs.sortValue]
 
      @throws {TypeError} If attrs.cell or attrs.options are not supplied.
-     @throws {ReferenceError} If attrs.cell is a string but a cell class of
+
+     @throws {ReferenceError} If formatter is a string but a formatter class of
      said name cannot be found in the Backgrid module.
 
      See:
 
+     - Backgrid.Column.defaults
      - Backgrid.Cell
      - Backgrid.CellFormatter
    */
-  initialize: function (attrs) {
-    Backgrid.requireOptions(attrs, ["cell", "name"]);
-
+  initialize: function () {
     if (!this.has("label")) {
       this.set({ label: this.get("name") }, { silent: true });
     }
 
     var headerCell = Backgrid.resolveNameToClass(this.get("headerCell"), "HeaderCell");
+
     var cell = Backgrid.resolveNameToClass(this.get("cell"), "Cell");
-    this.set({ cell: cell, headerCell: headerCell }, { silent: true });
+
+    this.set({cell: cell, headerCell: headerCell}, { silent: true });
+  },
+
+  /**
+     Returns an appropriate value extraction function from a model for sorting.
+
+     If the column model contains an attribute `sortValue`, if it is a string, a
+     method from the column instance identifified by the `sortValue` string is
+     returned. If it is a function, it it returned as is. If `sortValue` isn't
+     found from the column model's attributes, a default value extraction
+     function is returned which will compare according to the natural order of
+     the value's type.
+
+     @return {function(Backbone.Model, string): *}
+   */
+  sortValue: function () {
+    var sortValue = this.get("sortValue");
+    if (_.isString(sortValue)) return this[sortValue];
+    else if (_.isFunction(sortValue)) return sortValue;
+
+    return function (model, colName) {
+      return model.get(colName);
+    };
   }
 
+  /**
+     @member Backgrid.Column
+     @protected
+     @method sortable
+     @return {function(Backgrid.Column, Backbone.Model): boolean | boolean}
+  */
+
+  /**
+     @member Backgrid.Column
+     @protected
+     @method editable
+     @return {function(Backgrid.Column, Backbone.Model): boolean | boolean}
+  */
+
+  /**
+     @member Backgrid.Column
+     @protected
+     @method renderable
+     @return {function(Backgrid.Column, Backbone.Model): boolean | boolean}
+  */
+});
+
+_.each(["sortable", "renderable", "editable"], function (key) {
+  Column.prototype[key] = function () {
+    var value = this.get(key);
+    if (_.isString(value)) return this[value];
+    else if (_.isFunction(value)) return value;
+
+    return !!value;
+  };
 });
 
 /**
@@ -1541,12 +1862,13 @@ var Columns = Backgrid.Columns = Backbone.Collection.extend({
    */
   model: Column
 });
+
 /*
   backgrid
   http://github.com/wyuenho/backgrid
 
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Licensed under the MIT license.
 */
 
 /**
@@ -1562,8 +1884,6 @@ var Row = Backgrid.Row = Backbone.View.extend({
   /** @property */
   tagName: "tr",
 
-  requiredOptions: ["columns", "model"],
-
   /**
      Initializes a row view instance.
 
@@ -1575,8 +1895,6 @@ var Row = Backgrid.Row = Backbone.View.extend({
   */
   initialize: function (options) {
 
-    Backgrid.requireOptions(options, this.requiredOptions);
-
     var columns = this.columns = options.columns;
     if (!(columns instanceof Backbone.Collection)) {
       columns = this.columns = new Columns(columns);
@@ -1587,22 +1905,11 @@ var Row = Backgrid.Row = Backbone.View.extend({
       cells.push(this.makeCell(columns.at(i), options));
     }
 
-    this.listenTo(columns, "change:renderable", function (column, renderable) {
-      for (var i = 0; i < cells.length; i++) {
-        var cell = cells[i];
-        if (cell.column.get("name") == column.get("name")) {
-          if (renderable) cell.$el.show(); else cell.$el.hide();
-        }
-      }
-    });
-
     this.listenTo(columns, "add", function (column, columns) {
       var i = columns.indexOf(column);
       var cell = this.makeCell(column, options);
       cells.splice(i, 0, cell);
 
-      if (!cell.column.get("renderable")) cell.$el.hide();
-
       var $el = this.$el;
       if (i === 0) {
         $el.prepend(cell.render().$el);
@@ -1646,11 +1953,8 @@ var Row = Backgrid.Row = Backbone.View.extend({
     this.$el.empty();
 
     var fragment = document.createDocumentFragment();
-
     for (var i = 0; i < this.cells.length; i++) {
-      var cell = this.cells[i];
-      fragment.appendChild(cell.render().el);
-      if (!cell.column.get("renderable")) cell.$el.hide();
+      fragment.appendChild(this.cells[i].render().el);
     }
 
     this.el.appendChild(fragment);
@@ -1687,19 +1991,17 @@ var EmptyRow = Backgrid.EmptyRow = Backbone.View.extend({
   /** @property */
   tagName: "tr",
 
-  /** @property */
+  /** @property {string|function(): string} */
   emptyText: null,
 
   /**
      Initializer.
 
      @param {Object} options
-     @param {string} options.emptyText
+     @param {string|function(): string} options.emptyText
      @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
    */
   initialize: function (options) {
-    Backgrid.requireOptions(options, ["emptyText", "columns"]);
-
     this.emptyText = options.emptyText;
     this.columns =  options.columns;
   },
@@ -1712,20 +2014,21 @@ var EmptyRow = Backgrid.EmptyRow = Backbone.View.extend({
 
     var td = document.createElement("td");
     td.setAttribute("colspan", this.columns.length);
-    td.textContent = this.emptyText;
+    td.appendChild(document.createTextNode(_.result(this, "emptyText")));
 
-    this.el.setAttribute("class", "empty");
+    this.el.className = "empty";
     this.el.appendChild(td);
 
     return this;
   }
 });
+
 /*
   backgrid
   http://github.com/wyuenho/backgrid
 
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Licensed under the MIT license.
 */
 
 /**
@@ -1746,12 +2049,6 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
     "click a": "onClick"
   },
 
-  /**
-    @property {null|"ascending"|"descending"} _direction The current sorting
-    direction of this column.
-  */
-  _direction: null,
-
   /**
      Initializer.
 
@@ -1761,43 +2058,50 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
      @throws {TypeError} If options.column or options.collection is undefined.
    */
   initialize: function (options) {
-    Backgrid.requireOptions(options, ["column", "collection"]);
     this.column = options.column;
     if (!(this.column instanceof Column)) {
       this.column = new Column(this.column);
     }
-    this.listenTo(this.collection, "backgrid:sort", this._resetCellDirection);
+
+    var column = this.column, collection = this.collection, $el = this.$el;
+
+    this.listenTo(column, "change:editable change:sortable change:renderable",
+                  function (column) {
+                    var changed = column.changedAttributes();
+                    for (var key in changed) {
+                      if (changed.hasOwnProperty(key)) {
+                        $el.toggleClass(key, changed[key]);
+                      }
+                    }
+                  });
+    this.listenTo(column, "change:direction", this.setCellDirection);
+    this.listenTo(column, "change:name change:label", this.render);
+
+    if (Backgrid.callByNeed(column.editable(), column, collection)) $el.addClass("editable");
+    if (Backgrid.callByNeed(column.sortable(), column, collection)) $el.addClass("sortable");
+    if (Backgrid.callByNeed(column.renderable(), column, collection)) $el.addClass("renderable");
+
+    this.listenTo(collection.fullCollection || collection, "sort", this.removeCellDirection);
   },
 
   /**
-     Gets or sets the direction of this cell. If called directly without
-     parameters, returns the current direction of this cell, otherwise sets
-     it. If a `null` is given, sets this cell back to the default order.
-
-     @param {null|"ascending"|"descending"} dir
-     @return {null|string} The current direction or the changed direction.
+     Event handler for the collection's `sort` event. Removes all the CSS
+     direction classes.
    */
-  direction: function (dir) {
-    if (arguments.length) {
-      if (this._direction) this.$el.removeClass(this._direction);
-      if (dir) this.$el.addClass(dir);
-      this._direction = dir;
-    }
-
-    return this._direction;
+  removeCellDirection: function () {
+    this.$el.removeClass("ascending").removeClass("descending");
+    this.column.set("direction", null);
   },
 
   /**
-     Event handler for the Backbone `backgrid:sort` event. Resets this cell's
-     direction to default if sorting is being done on another column.
-
-     @private
+     Event handler for the column's `change:direction` event. If this
+     HeaderCell's column is being sorted on, it applies the direction given as a
+     CSS class to the header cell. Removes all the CSS direction classes
+     otherwise.
    */
-  _resetCellDirection: function (sortByColName, direction, comparator, collection) {
-    if (collection == this.collection) {
-      if (sortByColName !== this.column.get("name")) this.direction(null);
-      else this.direction(direction);
-    }
+  setCellDirection: function (column, direction) {
+    this.$el.removeClass("ascending").removeClass("descending");
+    if (column.cid == this.column.cid) this.$el.addClass(direction);
   },
 
   /**
@@ -1808,115 +2112,47 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
   onClick: function (e) {
     e.preventDefault();
 
-    var columnName = this.column.get("name");
-
-    if (this.column.get("sortable")) {
-      if (this.direction() === "ascending") {
-        this.sort(columnName, "descending", function (left, right) {
-          var leftVal = left.get(columnName);
-          var rightVal = right.get(columnName);
-          if (leftVal === rightVal) {
-            return 0;
-          }
-          else if (leftVal > rightVal) { return -1; }
-          return 1;
-        });
-      }
-      else if (this.direction() === "descending") {
-        this.sort(columnName, null);
-      }
-      else {
-        this.sort(columnName, "ascending", function (left, right) {
-          var leftVal = left.get(columnName);
-          var rightVal = right.get(columnName);
-          if (leftVal === rightVal) {
-            return 0;
-          }
-          else if (leftVal < rightVal) { return -1; }
-          return 1;
-        });
-      }
-    }
-  },
-
-  /**
-     If the underlying collection is a Backbone.PageableCollection in
-     server-mode or infinite-mode, a page of models is fetched after sorting is
-     done on the server.
-
-     If the underlying collection is a Backbone.PageableCollection in
-     client-mode, or any
-     [Backbone.Collection](http://backbonejs.org/#Collection) instance, sorting
-     is done on the client side. If the collection is an instance of a
-     Backbone.PageableCollection, sorting will be done globally on all the pages
-     and the current page will then be returned.
-
-     Triggers a Backbone `backgrid:sort` event from the collection when done
-     with the column name, direction, comparator and a reference to the
-     collection.
-
-     @param {string} columnName
-     @param {null|"ascending"|"descending"} direction
-     @param {function(*, *): number} [comparator]
-
-     See [Backbone.Collection#comparator](http://backbonejs.org/#Collection-comparator)
-  */
-  sort: function (columnName, direction, comparator) {
-
-    comparator = comparator || this._cidComparator;
-
+    var column = this.column;
     var collection = this.collection;
+    var event = "backgrid:sort";
 
-    if (Backbone.PageableCollection && collection instanceof Backbone.PageableCollection) {
-      var order;
-      if (direction === "ascending") order = -1;
-      else if (direction === "descending") order = 1;
-      else order = null;
-
-      collection.setSorting(order ? columnName : null, order);
-
-      if (collection.mode == "client") {
-        if (!collection.fullCollection.comparator) {
-          collection.fullCollection.comparator = comparator;
-        }
-        collection.fullCollection.sort();
-      }
-      else collection.fetch({reset: true});
-    }
-    else {
-      collection.comparator = comparator;
-      collection.sort();
+    function cycleSort(header, col) {
+      if (column.get("direction") === "ascending") collection.trigger(event, col, "descending");
+      else if (column.get("direction") === "descending") collection.trigger(event, col, null);
+      else collection.trigger(event, col, "ascending");
     }
 
-    this.collection.trigger("backgrid:sort", columnName, direction, comparator, this.collection);
-  },
-
-  /**
-     Default comparator for Backbone.Collections. Sorts cids in ascending
-     order. The cids of the models are assumed to be in insertion order.
-
-     @private
-     @param {*} left
-     @param {*} right
-  */
-  _cidComparator: function (left, right) {
-    var lcid = left.cid, rcid = right.cid;
-    if (!_.isUndefined(lcid) && !_.isUndefined(rcid)) {
-      lcid = lcid.slice(1) * 1, rcid = rcid.slice(1) * 1;
-      if (lcid < rcid) return -1;
-      else if (lcid > rcid) return 1;
+    function toggleSort(header, col) {
+      if (column.get("direction") === "ascending") collection.trigger(event, col, "descending");
+      else collection.trigger(event, col, "ascending");
     }
 
-    return 0;
+    var sortable = Backgrid.callByNeed(column.sortable(), column, this.collection);
+    if (sortable) {
+      var sortType = column.get("sortType");
+      if (sortType === "toggle") toggleSort(this, column);
+      else cycleSort(this, column);
+    }
   },
 
   /**
-     Renders a header cell with a sorter and a label.
+     Renders a header cell with a sorter, a label, and a class name for this
+     column.
    */
   render: function () {
     this.$el.empty();
-    var $label = $("<a>").text(this.column.get("label")).append("<b class='sort-caret'></b>");
-    this.$el.append($label);
+    var column = this.column;
+    var sortable = Backgrid.callByNeed(column.sortable(), column, this.collection);
+    var label;
+    if(sortable){
+      label = $("<a>").text(column.get("label")).append("<b class='sort-caret'></b>");
+    } else {
+      label = document.createTextNode(column.get("label"));
+    }
+
+    this.$el.append(label);
+    this.$el.addClass(column.get("name"));
+    this.$el.addClass(column.get("direction"));
     this.delegateEvents();
     return this;
   }
@@ -1931,8 +2167,6 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
  */
 var HeaderRow = Backgrid.HeaderRow = Backgrid.Row.extend({
 
-  requiredOptions: ["columns", "collection"],
-
   /**
      Initializer.
 
@@ -1983,8 +2217,6 @@ var Header = Backgrid.Header = Backbone.View.extend({
      @throws {TypeError} If options.columns or options.model is undefined.
    */
   initialize: function (options) {
-    Backgrid.requireOptions(options, ["columns", "collection"]);
-
     this.columns = options.columns;
     if (!(this.columns instanceof Backbone.Collection)) {
       this.columns = new Columns(this.columns);
@@ -2016,12 +2248,13 @@ var Header = Backgrid.Header = Backbone.View.extend({
   }
 
 });
+
 /*
   backgrid
   http://github.com/wyuenho/backgrid
 
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Licensed under the MIT license.
 */
 
 /**
@@ -2044,14 +2277,13 @@ var Body = Backgrid.Body = Backbone.View.extend({
      @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns
      Column metadata.
      @param {Backgrid.Row} [options.row=Backgrid.Row] The Row class to use.
-     @param {string} [options.emptyText] The text to display in the empty row.
+     @param {string|function(): string} [options.emptyText] The text to display in the empty row.
 
      @throws {TypeError} If options.columns or options.collection is undefined.
 
      See Backgrid.Row.
   */
   initialize: function (options) {
-    Backgrid.requireOptions(options, ["columns", "collection"]);
 
     this.columns = options.columns;
     if (!(this.columns instanceof Backbone.Collection)) {
@@ -2076,6 +2308,7 @@ var Body = Backgrid.Body = Backbone.View.extend({
     this.listenTo(collection, "remove", this.removeRow);
     this.listenTo(collection, "sort", this.refresh);
     this.listenTo(collection, "reset", this.refresh);
+    this.listenTo(collection, "backgrid:sort", this.sort);
     this.listenTo(collection, "backgrid:edited", this.moveToNextCell);
   },
 
@@ -2121,8 +2354,6 @@ var Body = Backgrid.Body = Backbone.View.extend({
       return;
     }
 
-    options = _.extend({render: true}, options || {});
-
     var row = new this.row({
       columns: this.columns,
       model: model
@@ -2135,14 +2366,14 @@ var Body = Backgrid.Body = Backbone.View.extend({
     var $children = $el.children();
     var $rowEl = row.render().$el;
 
-    if (options.render) {
-      if (index >= $children.length) {
-        $el.append($rowEl);
-      }
-      else {
-        $children.eq(index).before($rowEl);
-      }
+    if (index >= $children.length) {
+      $el.append($rowEl);
     }
+    else {
+      $children.eq(index).before($rowEl);
+    }
+
+    return this;
   },
 
   /**
@@ -2184,6 +2415,8 @@ var Body = Backgrid.Body = Backbone.View.extend({
 
     this.rows.splice(options.index, 1);
     this._unshiftEmptyRowMayBe();
+
+    return this;
   },
 
   /**
@@ -2247,18 +2480,115 @@ var Body = Backgrid.Body = Backbone.View.extend({
     return Backbone.View.prototype.remove.apply(this, arguments);
   },
 
+  /**
+     If the underlying collection is a Backbone.PageableCollection in
+     server-mode or infinite-mode, a page of models is fetched after sorting is
+     done on the server.
+
+     If the underlying collection is a Backbone.PageableCollection in
+     client-mode, or any
+     [Backbone.Collection](http://backbonejs.org/#Collection) instance, sorting
+     is done on the client side. If the collection is an instance of a
+     Backbone.PageableCollection, sorting will be done globally on all the pages
+     and the current page will then be returned.
+
+     Triggers a Backbone `backgrid:sorted` event from the collection when done
+     with the column, direction and a reference to the collection.
+
+     @param {Backgrid.Column|string} column
+     @param {null|"ascending"|"descending"} direction
+
+     See [Backbone.Collection#comparator](http://backbonejs.org/#Collection-comparator)
+  */
+  sort: function (column, direction) {
+
+    if (!_.contains(["ascending", "descending", null], direction)) {
+      throw new RangeError('direction must be one of "ascending", "descending" or `null`');
+    }
+
+    if (_.isString(column)) column = this.columns.findWhere({name: column});
+
+    var collection = this.collection;
+
+    var order;
+    if (direction === "ascending") order = -1;
+    else if (direction === "descending") order = 1;
+    else order = null;
+
+    var comparator = this.makeComparator(column.get("name"), order,
+                                         order ?
+                                         column.sortValue() :
+                                         function (model) {
+                                           return model.cid.replace('c', '') * 1;
+                                         });
+
+    if (Backbone.PageableCollection &&
+        collection instanceof Backbone.PageableCollection) {
+
+      collection.setSorting(order && column.get("name"), order,
+                            {sortValue: column.sortValue()});
+
+      if (collection.fullCollection) {
+        // If order is null, pageable will remove the comparator on both sides,
+        // in this case the default insertion order comparator needs to be
+        // attached to get back to the order before sorting.
+        if (collection.fullCollection.comparator == null) {
+          collection.fullCollection.comparator = comparator;
+        }
+        collection.fullCollection.sort();
+        collection.trigger("backgrid:sorted", column, direction, collection);
+      }
+      else collection.fetch({reset: true, success: function () {
+        collection.trigger("backgrid:sorted", column, direction, collection);
+      }});
+    }
+    else {
+      collection.comparator = comparator;
+      collection.sort();
+      collection.trigger("backgrid:sorted", column, direction, collection);
+    }
+
+    column.set("direction", direction);
+
+    return this;
+  },
+
+  makeComparator: function (attr, order, func) {
+
+    return function (left, right) {
+      // extract the values from the models
+      var l = func(left, attr), r = func(right, attr), t;
+
+      // if descending order, swap left and right
+      if (order === 1) t = l, l = r, r = t;
+
+      // compare as usual
+      if (l === r) return 0;
+      else if (l < r) return -1;
+      return 1;
+    };
+  },
+
   /**
      Moves focus to the next renderable and editable cell and return the
      currently editing cell to display mode.
 
+     Triggers a `backgrid:next` event on the model with the indices of the row
+     and column the user *intended* to move to, and whether the intended move
+     was going to go out of bounds. Note that *out of bound* always means an
+     attempt to go past the end of the last row.
+
      @param {Backbone.Model} model The originating model
      @param {Backgrid.Column} column The originating model column
      @param {Backgrid.Command} command The Command object constructed from a DOM
-     Event
+     event
   */
   moveToNextCell: function (model, column, command) {
     var i = this.collection.indexOf(model);
     var j = this.columns.indexOf(column);
+    var cell, renderable, editable, m, n;
+
+    this.rows[i].cells[j].exitEditMode();
 
     if (command.moveUp() || command.moveDown() || command.moveLeft() ||
         command.moveRight() || command.save()) {
@@ -2266,34 +2596,50 @@ var Body = Backgrid.Body = Backbone.View.extend({
       var maxOffset = l * this.collection.length;
 
       if (command.moveUp() || command.moveDown()) {
-        var row = this.rows[i + (command.moveUp() ? -1 : 1)];
-        if (row) row.cells[j].enterEditMode();
+        m = i + (command.moveUp() ? -1 : 1);
+        var row = this.rows[m];
+        if (row) {
+          cell = row.cells[j];
+          if (Backgrid.callByNeed(cell.column.editable(), cell.column, model)) {
+            cell.enterEditMode();
+            model.trigger("backgrid:next", m, j, false);
+          }
+        }
+        else model.trigger("backgrid:next", m, j, true);
       }
       else if (command.moveLeft() || command.moveRight()) {
         var right = command.moveRight();
         for (var offset = i * l + j + (right ? 1 : -1);
              offset >= 0 && offset < maxOffset;
              right ? offset++ : offset--) {
-          var m = ~~(offset / l);
-          var n = offset - m * l;
-          var cell = this.rows[m].cells[n];
-          if (cell.column.get("renderable") && cell.column.get("editable")) {
+          m = ~~(offset / l);
+          n = offset - m * l;
+          cell = this.rows[m].cells[n];
+          renderable = Backgrid.callByNeed(cell.column.renderable(), cell.column, cell.model);
+          editable = Backgrid.callByNeed(cell.column.editable(), cell.column, model);
+          if (renderable && editable) {
             cell.enterEditMode();
+            model.trigger("backgrid:next", m, n, false);
             break;
           }
         }
+
+        if (offset == maxOffset) {
+          model.trigger("backgrid:next", ~~(offset / l), offset - m * l, true);
+        }
       }
     }
 
-    this.rows[i].cells[j].exitEditMode();
+    return this;
   }
 });
+
 /*
   backgrid
   http://github.com/wyuenho/backgrid
 
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Licensed under the MIT license.
 */
 
 /**
@@ -2313,7 +2659,6 @@ var Footer = Backgrid.Footer = Backbone.View.extend({
      Initializer.
 
      @param {Object} options
-     @param {*} options.parent The parent view class of this footer.
      @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns
      Column metadata.
      @param {Backbone.Collection} options.collection
@@ -2321,7 +2666,6 @@ var Footer = Backgrid.Footer = Backbone.View.extend({
      @throws {TypeError} If options.columns or options.collection is undefined.
   */
   initialize: function (options) {
-    Backgrid.requireOptions(options, ["columns", "collection"]);
     this.columns = options.columns;
     if (!(this.columns instanceof Backbone.Collection)) {
       this.columns = new Backgrid.Columns(this.columns);
@@ -2329,12 +2673,13 @@ var Footer = Backgrid.Footer = Backbone.View.extend({
   }
 
 });
+
 /*
   backgrid
   http://github.com/wyuenho/backgrid
 
   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
-  Licensed under the MIT @license.
+  Licensed under the MIT license.
 */
 
 /**
@@ -2405,7 +2750,7 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
      Initializes a Grid instance.
 
      @param {Object} options
-     @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
+     @param {Backbone.Collection.<Backgrid.Columns>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
      @param {Backbone.Collection} options.collection The collection of tabular model data to display.
      @param {Backgrid.Header} [options.header=Backgrid.Header] An optional Header class to override the default.
      @param {Backgrid.Body} [options.body=Backgrid.Body] An optional Body class to override the default.
@@ -2413,34 +2758,37 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
      @param {Backgrid.Footer} [options.footer=Backgrid.Footer] An optional Footer class.
    */
   initialize: function (options) {
-    Backgrid.requireOptions(options, ["columns", "collection"]);
-
     // Convert the list of column objects here first so the subviews don't have
     // to.
     if (!(options.columns instanceof Backbone.Collection)) {
-      options.columns = new Columns(options.columns);
+      options.columns = new Columns(options.columns || this.columns);
     }
     this.columns = options.columns;
 
-    var passedThruOptions = _.omit(options, ["el", "id", "attributes",
-                                             "className", "tagName", "events"]);
-
-    this.header = options.header || this.header;
-    this.header = new this.header(passedThruOptions);
+    var filteredOptions = _.omit(options, ["el", "id", "attributes",
+                                           "className", "tagName", "events"]);
 
+    // must construct body first so it listens to backgrid:sort first
     this.body = options.body || this.body;
-    this.body = new this.body(passedThruOptions);
+    this.body = new this.body(filteredOptions);
+
+    this.header = options.header || this.header;
+    if (this.header) {
+      this.header = new this.header(filteredOptions);
+    }
 
     this.footer = options.footer || this.footer;
     if (this.footer) {
-      this.footer = new this.footer(passedThruOptions);
+      this.footer = new this.footer(filteredOptions);
     }
 
     this.listenTo(this.columns, "reset", function () {
-      this.header = new (this.header.remove().constructor)(passedThruOptions);
-      this.body = new (this.body.remove().constructor)(passedThruOptions);
+      if (this.header) {
+        this.header = new (this.header.remove().constructor)(filteredOptions);
+      }
+      this.body = new (this.body.remove().constructor)(filteredOptions);
       if (this.footer) {
-        this.footer = new (this.footer.remove().constructor)(passedThruOptions);
+        this.footer = new (this.footer.remove().constructor)(filteredOptions);
       }
       this.render();
     });
@@ -2449,15 +2797,17 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
   /**
      Delegates to Backgrid.Body#insertRow.
    */
-  insertRow: function (model, collection, options) {
-    return this.body.insertRow(model, collection, options);
+  insertRow: function () {
+    this.body.insertRow.apply(this.body, arguments);
+    return this;
   },
 
   /**
      Delegates to Backgrid.Body#removeRow.
    */
-  removeRow: function (model, collection, options) {
-    return this.body.removeRow(model, collection, options);
+  removeRow: function () {
+    this.body.removeRow.apply(this.body, arguments);
+    return this;
   },
 
   /**
@@ -2466,14 +2816,9 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
      happen.
 
      @param {Object} [options] Options for `Backgrid.Columns#add`.
-     @param {boolean} [options.render=true] Whether to render the column
-     immediately after insertion.
-
-     @chainable
    */
-  insertColumn: function (column, options) {
-    options = options || {render: true};
-    this.columns.add(column, options);
+  insertColumn: function () {
+    this.columns.add.apply(this.columns, arguments);
     return this;
   },
 
@@ -2483,11 +2828,17 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
      needs to happen.
 
      @param {Object} [options] Options for `Backgrid.Columns#remove`.
+   */
+  removeColumn: function () {
+    this.columns.remove.apply(this.columns, arguments);
+    return this;
+  },
 
-     @chainable
+  /**
+     Delegates to Backgrid.Body#sort.
    */
-  removeColumn: function (column, options) {
-    this.columns.remove(column, options);
+  sort: function () {
+    this.body.sort.apply(this.body, arguments);
     return this;
   },
 
@@ -2499,7 +2850,9 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
   render: function () {
     this.$el.empty();
 
-    this.$el.append(this.header.render().$el);
+    if (this.header) {
+      this.$el.append(this.header.render().$el);
+    }
 
     if (this.footer) {
       this.$el.append(this.footer.render().$el);
@@ -2520,12 +2873,12 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
      @chainable
    */
   remove: function () {
-    this.header.remove.apply(this.header, arguments);
+    this.header && this.header.remove.apply(this.header, arguments);
     this.body.remove.apply(this.body, arguments);
     this.footer && this.footer.remove.apply(this.footer, arguments);
     return Backbone.View.prototype.remove.apply(this, arguments);
   }
 
 });
-
-}(this, jQuery, _, Backbone));
+  return Backgrid;
+}));