Resizing Table Columns

poetawd

Hello,

I am making a User Interface for my app using jquery and jquery ui.

I am using datatables, but I miss a feature found in most of the grid plugins to RESIZE the table columns.

I did some research and found a plugin to do this job for me:

http://www.spassus.net/LAYOUT/teste.html
(tested with FF and IE latest)

To resize a Column just put the mouse over the " | " in the table header and RESIZE !!!!!

I had to turn the AutoWidth feature OFF to get this working: "bAutoWidth": false,

I REALLY HOPE someday the RESIZE feature will be part of datatables since most of the great grid plugins have this !

poetawd

I can DONATE to make this happen... what do you think developer ?

Cassianno

I liked the idea of allowing columns to be resized so i've picked poetawd's code and worked on it.

An example can be found here: http://www.multizap.com.br/datatables/resizeable.php .

He uses a jQuery table plugin named Kiketable. I've modified the script a bit (ie: to allow the resize icon be used with the themeroller).

Feel free to grab the code and make the mods you like.


Cheers and thanks Allan for this ubber great plugin =D

ssteinerX

I just went and looked and, for me in FireFox 3.6.3 on Mac, the resize cursor doesn't appear properly.

Sometimes a hand with a pointing finger appears, more times nothing, but it doesn't seem to be handling the cursor properly. Resizing doesn't work consistently.

Did you put the code in a repository somewhere, or just embedded in the page?

Thanks,

S

ssteinerX

poetawd's original code seems to both handle the cursor properly and resizes properly.

S

allan

Hi all,

Sorry for the delay in replying about this - big back log at the moment! Thank for pointing us towards the plug-in poetawd - it is very smooth indeed! I have a few ideas which I'd like to implement as part of a re-size plug-in for DataTables, and it needs some consideration for the various features which can be enabled and disabled, but it is quite certainly on the cards. Until that is available, then this looks like a good alternative.

Also donations in order to encourage development on new features and plug-ins are most welcome: http://datatables.net/donate :-)

Regards,
Allan

Selicor

great solution, both versions version do also work in the latest Opera browser 10.5

Cassianno

Hi ssteinerX,

I've grabbed the code at jquery's table plugin page (kiketable) when figured out that poetawd was using this this. Changed a bit the code and uploaded at my own domain (@ multizap.com.br) as you can see at example page source code.
About the column not resizing all the times, which browser are you using? Here with FF, IE and CH (Windows), all in latest versions, it worked pretty well. The cursor was intendend to be a hand (pointer) actually, not e-resize. Cursor is changed to e-resize only when you're actually resizing the column; if you want it to be changed to e-resize, change the following:

[code]$('')[/code]

to

[code]$('')[/code]

at jquery.kiketable.colsizable-1.1.js : 35.

Please remember that im considering that you kept my declaration for e-resize class:

[code].e-resize {
cursor: e-resize;
}[/code]

jneilliii

@allan: I think this should definitely be the next enhancement added to DataTeables. Outside of this functionality, this is the best table plugin for jQuery around. It's easy to style thanks to themeroller support.

@Cassiano: I tried your kiketable example on your website and like it alot. I've copied down your js files, but can't seem to get it to work properly. I am using the Fixed Header plugin for DataTables and pulling the data via ajax, and that may be causing the issue, I'm not sure.

robau

Here you can see working resizable table columns usign jqeury. Can be used unobtrusivly :)

http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery

allan

Thanks for the link robau - that looks like it would be a very good starting point for how to do column resizing with DataTables. I think it would need to consider how DataTables marks up the table for scrolling a bit, but that principle looks great.

Regards,
Allan

GregP

D'oh, Cassiano's stuff is no longer there, and Allan's concerns about robau's example make me not investigate much further.

Has there been any other work done for this feature? Is there a plug-in or is it in the API and I just haven't noticed it? Would love to have column resizing.

datatables

This may do what you want: http://datatables.net/extras/thirdparty/ColReorderWithResize/

axaceuta

Is this plugin working together with ColVis plugin? I'm trying to use it and I can resize head cells, but body cells are not resized.

naveenrajrathan

I'm also facing the same issue ie., i can resize only head cells but body is not resizing. Am using only ColReorderWithResize.js.

var oTable = $('#Example').dataTable({
"sDom": 'R<"H"lfr>t<"F"ip<',
"sScrollX": "100%",
"sScrollXInner": "220%",
"sScrollY": 400,
"bScrollCollapse": true,
"bAutoWidth": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bSortClasses": false,
"aaSorting": []
});

koosvdkolk

Just some advertising for my plugin :)

http://datatables.net/forums/discussion/8471/column-resize-plugin

smp123

I am facing the same problem as naveenrajrathan
I can resize the column header, but the body remains as it is...
any idea why this might be happening?
Please do let me know if there is a solution available.

allan

Sounds like a JS error. What is shown on the browser's console?

Allan

smp123

Hi Allan,
Really appreciate the quick reply.
I just checked and i don't get any JS error either.

allan

'fraid I don't know then. I'd need a link to a test case to even take a guess. I don't know much about the resizing plug-in though, so I'm not sure I'd be able to offer much help. It might require some traditional debugging.

Allan

nutless_neo

Allan,
You can see the resizing problem on my example page under the LMH tab) - http://michael.benefitharbor.com/dev/Employer/JqueryScrollingTabs.htm

You will see the header resizing, but the body columns are not resizing with the header.

allan

Thanks for the link - the body columns are adjusting a little bit - but not correctly. I'm afraid that is a limitation of the way that the resizing plug-in has been implemented. This thread has a bit more information: http://datatables.net/forums/discussion/2474/column-resizing/p1#Item_46 .

I hope to get some time in the not to distant future to make a supported plug-in for column resizing that is fully compatible with DataTables.

Allan

mcgrevy

Hi All

I include ColReorderWithResize.js which works fine so long as I don't have sScrollY set. With it set the cols resize but the headings and details don't stay the same width. It looks like the headings change size at twice the rate of the details.

Anyone got ideas?

Regards Roger

drStr

Hallo from me also,

I am expreriencing the same problem with mcgrevy from above, when sScroll is activated (x or y) then the header resizes more than the tds..

BR Str

joeyd

I'm in the same boat as mcgrevy and drStr. If I have time, which seems like the most valuable resource ever, I'll try to help resolve.

Versions - ColReorderWithResize 1.0.7, Scroller 1.1.0, datatables 1.9.4, jQuery 1.9.1, IE 10

Initialization
$('#Queue').dataTable({
"sDom": 'R<"clear">lfrtipS',
"bJQueryUI": true,
"bPaginate":false,
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200",
"oLanguage": { "sSearch": "" }
});

Column resize fixed width scroll sizing break not working td th different

echeryomushkin

Hi Friends,

Resolved for my case by changing few lines
of ColReorderWithResize.js code starting from 869:
[code]
//scrollingTableHead = $(tableScroller)[0].childNodes[0].childNodes[0].childNodes[0];
scrollingTableHead = $(tableScroller)[0].childNodes[0].childNodes[0];
//Resize the columns
if (moveLength != 0 && !scrollXEnabled){
$($(scrollingTableHead)[0].childNodes[visibleColumnIndex+1]).width(this.s.mouse.nextStartWidth - m
}
var cnode = $(scrollingTableHead).children()[0].childNodes[visibleColumnIndex];
$(cnode).width(this.s.mouse.startWidth + moveLength);
[/code]

BobWalsh

echeryomushkin - tried your code, but getting a js error. is it displaying correctly?