fortessolutions / backgrid-sizeable-columns

Backgrid extension that allows re-sizing the columns in a grid

Backgrid.js - (Re)sizeable 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 can be found here

Browser support (tested)

• IE8+
• Firefox
• Chrome

Features

• Uses html5 valid colgroup method to (re)size columns
• Supports nonresizeable, width, min and max width
• Trigger event on column resize
• Supports 'renderable' and add/removal of columns
• Supports Grouped columns in header

Example

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

// Add resize handlers
var sizeHandler = new Backgrid.Extension.sizeAbleColumnsHandlers({
  sizeAbleColumns: sizeAbleCol,
  grid: pageableGrid,
  saveModelWidth: true
});
$backgridContainer.find('thead').before(sizeHandler.render().el);

// Listen to resize events
columns.on('resize', function(columnModel, newWidth, oldWidth) {
  console.log('Resize event on column; name, model, new and old width: ', columnModel.get("name"), columnModel, newWidth, oldWidth);
});

License

Copyright © 2016 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.

backgrid-sizeable-columns's Issues

Add class to handler elements

Add a class to the resize handler container div to allow easy styling with pseudo-selectors.

test folder is missing

npm test script calls grunt jasmine which in turn points to a spec in test/sizeable-columns.js, but the latter is missing.

any chance the test folder got lost in a former commit and can be restored?

package.json points to wrong repos

package.json points to

github.com/WRidder/backgrid-sizeable-columns as the official repo, but that repo is more than 1 year behind this one. The package in https://www.npmjs.com/package/backgrid-sizeable-columns points to that repo as well, and perhaps it should be updated to point to this one to avoid confusion.

Another (and bigger) problem is that package.json lists https://github.com/wyuenho/backgrid-sizeable-columns/issues as the url to report bugs. wyuenho deleted that repo long ago, it seems.

Would you consider updating those fields in package.json?

Update demo?

I am not sure what I am missing, but when I use the demo code it works:

http://techwuppet.com/backgrid_poc_demo/

But, when I use your latest updates it does not work. It seems like the latest update has numerous changes. Any advise?

Columns overlapping issue

Hi @Wietjerr . The issue I am facing is, i have a table having 6 columns. In that first two columns are over lapping on each other that is the data-column-index for those two(C1, C2) is same and for rest columns(C3, C4, C5) data-column-index is same. I also gave customized width to each column with resizeAble false (Column level and table level).

I cant not share the code since its confidential. Hope this much info can help you to understand what i am asking.