Resizing Table Columns
Resizing Table Columns
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 !
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 !
This discussion has been closed.
Replies
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
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
S
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
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]
@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.
http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery
Regards,
Allan
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.
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": []
});
http://datatables.net/forums/discussion/8471/column-resize-plugin
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
Really appreciate the quick reply.
I just checked and i don't get any JS error either.
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.
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
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
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
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
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]