backgrid-orderable-columns

Backgrid.js extension for (re)orderable columns.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
backgrid-orderable-columns
100.1.27 years ago8 years agoMinified + gzip package size for backgrid-orderable-columns in KB

Readme

Backgrid.js - (Re)orderable columns
Warning! This extension is not production ready yet, just a mere proof of concept. It lacks documentation, automatic testing and edge-case tests.
To discuss this extension, see this backgrid issue.

Demo

Online demo of can be found here

Browser support (tested)

  • IE8+
  • Firefox
  • Chrome

Features

  • Order columns based on 'position' attribute
  • Dependency: backgrid-sizeable-columns
  • Supports grouped columns

Example

// Setup sortable column collection
var columnCollection = Backgrid.Columns.extend({
  sortKey: "position",
  comparator: function(item) {
    return item.get(this.sortKey) || 999;
  },
  setPositions: function() {
    _.each(this.models, function(model, index) {
      model.set("position", index + 1, {silent: true});
    });

    return this;
  }
});
var columns = new columnCollection(columnsArray);
columns.setPositions().sort();

// Add sizeable columns
var sizeAbleCol = new Backgrid.Extension.sizeAbleColumns({
  collection: pageableTerritories,
  columns: columns
});
$backgridContainer.find('thead').before(sizeAbleCol.render().el);

// Make columns reorderable
var orderHandler = new Backgrid.Extension.OrderableColumns({
  grid: pageableGrid,
  sizeAbleColumns: sizeAbleCol
});
$backgridContainer.find('thead').before(orderHandler.render().el);

License

Copyright © 2014 Fortes Solutions.
Licensed under the MIT license.

Authors

This extension was created by Wilbert van de Ridder and is currently maintained by Fortes Solutions Team.