dobtco / jquery-resizable-columns Goto Github PK

Hi,

Is it possible to resize div and have values in integer instead in percentage. I want to achieve a grid column resizer for my project.

Thanks

Hi!

When I add the 'data-noresize' attribute to the first column, I can still resize all other columns but the behavior is like clicking on the nth column border and moving the n-1 column border.

To reproduce move the 'data-noresize' attribute in your demo table from the last column to the first column.

Not only it's all misaligned (i removed the classes, related to column fixed widths), but when I resize header - data cells are not resized, when I try to resize data cell - it does not react.

Tried Chrome and FF. Windows 8.1.

CSS:

.contentTable{}
.contentTable thead{
    display: block;
    position: relative;
}
.contentTable tbody{
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-height: 60vh;
    -ms-overflow-style: none;
}

Hi
please add an option to support rtl direction.
in RightToLeft pages your plugin not works as fine.
thanks

I have tried to make a JsBin for this plugin, but it seems, the rc-container and the rc-handlers are misplaced. Is there a way to test it in a JsBin?
http://jsbin.com/cevuzipiha/1/edit

When the first visible row of a table has cells with colspan>1, cells below it are not resizable.

      <thead>
        <tr>
          <th data-resizable-column-id="#">#</th>
          <th data-resizable-column-id="first_name" colspan=2>First & last Name</th>
          <th data-resizable-column-id="username" id="username-column">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>

This slightly adapted version of the demo, gives only two resize handles.

	<div class="rc-handle-container" style="width: 1139px;">
		<div class="rc-handle" style="left: 71px; height: 149px;"></div>
		<div class="rc-handle" style="left: 943.067px; height: 149px;"></div>
	</div>

Is there a way to have the third handle be added?

As can be seen in the below image, the resize "cursor" (seen when clicking and dragging) is offset. It looks like the plugin isn't factoring the padding width into it's position calculations. This is on Chrome 27, Windows 8.

Can you make the changes to let the table Header set a fixed position on screen when scrolling through the table data ?

Hi all:
Great plugin, thanks for doing this. If not too coffee oriented, but I did want to highlight an issue. I changed the handle background color to red in the css to make it easily identifiable. It looks like explicit height & left CSS attrs gets placed on the handle. You will see in the shot that perhaps a top offset should also be placed? Perhaps the reference system needs a little tinkering. Part of my offset issue really sources from a button that pushes the table down (not shown, but it's above the table to the right). However, I think the bar should still be inserted by referencing the top and bottom of the cell.
Thanks again,
Chris

open up chrome console ,focus on the border line between chrome and your app page.

move up and down

errors come out at some time ,not every time ,strange.

Tested in FireFox, Chrome & IE 10:

1. I dragged columns
2. I resized browser to smaller size
3. I dragged columns
4. I restored browser to full screen size
5. Columns become very difficult to resize.

Does this plugin support jQuery 2.1?

When I run it, I get
Uncaught TypeError: Cannot read property 'msie' of undefined

This is a great however it does not respond to touch events and therefore does not work on mobile devices such as the iPad. Real important feature nowadays.

I am trying to use this library and getting below warning in console. I am using this library in my file using 'require'. Please let me know how to use this without getting warning in console.

This seems to be a pre-built javascript file. Though this is possible, it's not recommended.
Try to require the original source to get better results. 
@ ./~/jquery-resizable-columns/dist/jquery.resizableColumns.js

I have a table which has two rows in the head of the table. The first is for the name of the columns and the second is for searching which has a input in it. I tried to use the plugin but i't didn't resize properly. Is there a way to apply the plugin into just on row? Also will applying the plugin into just one row solves my problem?

Hey,

could you upgrade the bower dependency for the jQuery version?

jQuery 1.9 is pretty old and at least the standard call $('table').resizableColumns() works with 2.1.4 without any problem. AFAIK jQuery 3.1.0 exists already ...

It would be sad if this good add-on would die because of a missing dependency update.

Cheers

Hi! I was using this wonderful column-resizing with angular, but when I go to hide a column the resizing doesn't follow. I was wondering if there was a work-around to this. Thanks! :)

In dist/jquery-resizable-columns.js, why does it say @version v0.1.0 rather than, say, @version v0.2.3? It threw me off when I came back after quite a while to grab the latest.

Hi
Is it publicated in it?

Hve a legacy project that still hasn't gotten all ti prototype js code out yet.

jQuery.noConflict() lets us handle it. But the code here isn't written for the jQuery namespace.

I've only done tried this on non-distribution code - but the two line fix is:

;(function ($, window, undefined){

// all $. and $( code here

})(jQuery, window);

Or $. and $( could be replaced with jQuery. and jQuery( respectively.

Noticed this, if you have a dynamic table of sorts you cannot resize new columns, even if you call .resizableColumns() again off the table.

Maybe making an option to destroy the current resizableColumns and create a new one?

Could you please add the support for Composer (https://getcomposer.org/)? Thank you.
MIchele

I have just downloaded this plugin and started using it. My layout is a bit complex and cause a bug in your plugin. I have two divs in separated with a splitter (handled by another plugin).

My table is on the left inside a div that has a 100% width, when the splitter resizes I raise a resize.rc event on the $(window) so that the plugin is told that the container div has been resized.

The problem is that the width of the div added by this plugin is set in px, so when trying to get the width of the table if the added div is bigger than the table (with the width of 100%) it correspond to the width of the added div and nothing is changed (there is an overflow).

I modified ResizableColumns.prototype.syncHandleWidths to correct this behaviour so that the plugin doesn't affect the widths of the elements around it by adding display: none before calculating the width.

return this.$handleContainer
    .width(this.$table.width())
    .find('.rc-handle').each((function (_this)

becomes

return this.$handleContainer
    .css('display', 'none')
    .width(this.$table.width())
    .css('display', '')
    .find('.rc-handle').each((function (_this) {

I don't know if I explained the problem correctly but I hope this will allow you to improve the code a little :)

Hello,
I have follow requirements to my table:

1. resizable columns
2. some columns have fixed min width
3. all columns are dynamical (they can be hidden or shown)

I wanted to resolve this with this library, it works, but with some little problems.
The width of my fixed columns defined by is ignored.
It is not possible rebuild the resizing.

I use my workaround
Part of my code:

var table = $('#' + name);
if(resizable != null) {
    table.destroyResizableColumns();
}
resizable = table.resizableColumns({
    resizeFromBody: true
});

Part of modified resizableColumns.js:

destroyResizableColumns: function() {
  var $table = $(this);
  var data = $table.data('resizableColumns');
  if(data) {
    data.restoreColumnWidths();
    data.destroy();
  }
}

It works, but is it correct?

If I resize the multiple columns a time along, the total width of all columns is over 100 percent.

I resize the left column to wanted width, then by resizing other columns the width of previous columns wll be changed. It is a feature?

Here before resizing:

jQuery('th')
[<th style=​"text-align:​ left;​ width:​ 1.5%" data-noresize ng-if=​"options.selectable && options.multiselection" class=​"ng-scope">​
    <input type=​"checkbox" ng-model=​"checkboxes.checked" id=​"select_all" value ng-click=​"selectAll()​" class=​"ng-pristine ng-valid">​
</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 20.11%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 9.63%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope sort-asc" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 10.11%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 25.29%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 12.58%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width=​"80" ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 4.82%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width=​"80" ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 4.82%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width=​"80" ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 4.82%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width=​"90" ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 6.44%;​">​…​
</th>​]

Total of all columns width: 100.12% (OK)
Here after repeated resizing:

jQuery('th')
[<th style=​"text-align:​ left;​ width:​ 1.5%" data-noresize ng-if=​"options.selectable && options.multiselection" class=​"ng-scope">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 32.45%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 0.18%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope sort-asc" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 88.8%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 0.61%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 58.52%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width=​"80" ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 4.82%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width=​"80" ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 4.82%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width=​"80" ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 0.91%;​">​…​</th>​, 
<th ng-repeat=​"column in options.columns" ng-show=​"column.visible" class=​"text-center sortable ng-scope" width=​"90" ng-style=​"{'min-width':​ column.width}​" ng-click=​"tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc')​ ? 'desc' :​ 'asc')​" style=​"width:​ 57.19%;​">​…​</th>​]

Total of all columns width: 249,8% (OK ???)
After playing with this, some columns can not be resized anymore.

Sorry for my bad english.

May I propose supporting tables without explicit header elements? Perhaps by allowing the selector within setHeaders to be customised via additional constructor option?

I need to use this plugin in reactJS, in which, user has option to use column chooser to update columns.
When the app is initially loaded, the resizer worked fine, but when user changed columns, adding new columns, or remove old columns, the resizer failed to work.
I already put this:

componentDidUpdate: function(){ $(this.refs.jnprPlainDataTable).resizableColumns({ }); },

Still no effect. Guessing some events binding still exists. How can I remove all the old event binding and rebind events or just refresh?

Thanks

if you want to select main tables cell for resize action; you can change selector
selector: 'tr th:visible', ------> selector: 'tr:first > th:visible',

I have this big project where I would like to use your jslib.
The only problem that's holding me back, is that I have to assign the "data-resizable-column-id" attribute to all the column headers on all the pages. It would be nice if there was an option to generate these names automatically so I can store the user’s adjustments.
If you only have to assign "data-resizable-columns-id" to the table, the columns could be generate by using the column numbers (0,1,2,...). I can write the js myself but, I if you could add it to library more people could benefit from it.

Please add the option to prevent the initial size calculation and resizing on start.

My case might be special, but since I'm combining some php code with your awesome plugin, I'm already setting some initial size to the columns that I would like to get respected when the plugin is initialised

I did a bower install via [email protected] and it works if I specify a commit hash, but it would be nice if I didn't have to do that and there was a master branch. Thank you for your work.

Reproducible with FF 20.0, Chrome 34.0 and probably other browsers.

Steps to repro:

On a live demo page http://dobtco.github.io/jquery-resizable-columns/ click and drag the border between '#' and 'First Name' column to the left. Continue to drag it even when it reaches minimal size. If you reach the left side of the screen and your mouse won't move, release the button, then click and drag the border once more.

Expected result: after reaching its minimal width the '#' column doesn't change its width, and so do other columns.

Actual result: after reaching its minimal width the '#' column doesn't change its width, but the border between 'First Name' and 'Last name' starts moving to the right.

Screenshot:

If a table has a column that contains just a checkbox (for selection of multiple of rows) or action icons these columns can be resized to strange results (user can make it huge or tiny, automatic sizing can cut off the checkbox, etc...). I've done a rudimentary change in an older version that probably can be done better. Here's what I have:

Call to setup (don't resize column 0, or 6):
this.$el.find("table").resizableColumns({fixed:[0,6]});

Functionality change:
ResizableColumns.prototype.assignPercentageWidths = function() {
return this.$tableHeaders.each((function(_this) {
var ccnt = 0;
return function(_, el) {
var $el, l = _this.options.fixed;
$el = $(el);
if(l) {
for(var i=0; i < l.length; i++) {
if(ccnt == l[i]) return
}
}
return setWidth($el[0], $el.outerWidth() / _this.$table.width() * 100, ccnt++);
};
})(this));
};

If there was a method to disallow automatically resizing some columns or disabling resizing of some columns, I couldn't find it and maybe someone else can make this even better.

When thead title are too big, for example "NinjaGaidenCount", but there is data like only 2 numbers "33", then I think better have option, that overflow thead text or cut it and count width by tdoby columns.

I hope you understand my idea :)

Doesn't look like ie8 is supported?

see #8

Thanks for making this plugin, it's exactly what I'm looking for. I'm new to jQuery (started today) and am having some trouble even getting this plugin up and running. I just downloaded the zipped repo, unzipped it, and tried to run index.html in Chrome. It takes a very long time to load anything, and when it finishes loading it looks nothing like the live demo you have linked on your documentation. I've attached an image of what I'm getting. I would really appreciate your help.

Hello,

I am trying to have resizable-columns on my table..
My table will be generated automatically and it could have several (hundred) columns, the width of the table can be 3000px and more. In this case I cannot resize the columns but if I zoom out the browser and I have the entire table in one screen it works..
Any help on that? is it problem of css? I have disabled max-width of the table but it doesn't work..

Hi all,
Great plugin, thanks for doing this.

I have just downloaded this plugin and started using it.

My layout is a bit complex and cause a bugs in your plugin.

I'm facing Following issues while implementing this plugin:

1. I want to set different width for each column. And using this plugin I am able to give same width using maxWidth and minWidth config option.
   Can we get config option to set width for each column?
   e.g: resizable_widths : [ '10%', '10%', '5%', '10%']
2. Plugin does not support table scrolling horizontally.
3. If I implement css rules to make tbody vertical scrollable then resizing of column does not works.
   Also is there any other way to make tbody scrollable with this plugin?

Here is demo link: http://jsfiddle.net/kbnatwork/w1gb1u53/

Any help can be appreciated.

Thank you in advance.
Kiran

Hi again:
I periodically hide and show my cols. I found then my handles are off sync. Looking through the code is see you've setup an event resize.rc, which I can manually call to to reset my handles. However, I would be interested in discussing some solutions for detecting th {display: xxx} changes. Thx!

Is there a way to exclude certain columns from being resizable?

I have table-responsive class and the table element inside it.

Eg:

<div class="table-responsive">
          <table data-resizable-columns-id="demo-table-v2">...<table>
</div>

The table have many columns. When I apply the jquery-resizable-columns for above table, so it does not resize for columns.

Sorry for my bad english.

I have a page with Bootstrap tab. in the one of the tabs I have a table on which I instantiate the resizableColumn plugin. It does not work. However, when I move the table to the tab that's visible when the page first loads, it works.

It would be really useful if you could switch between relative resizing to absolute-resizing. Absolute resizing would just modify the current column and add or remove some pixels to it's width. This is especially useful for tables that are very wide.

Have you considered putting this file on npm?

I think there is no destroy and refresh method.
Can you please provide them?

Hi,

Works fine for me on default tables but is it possible to use it with tables wrapped in the following divs?

where "scroll-x" is a

.scroll-x {
overflow-x: auto;
}

I have tried using this plugin but resizing is not working for horizontal scroll bars.

I would like to use re-sizable columns with tables defined like so: