With this piece of code, simple add the class ‘resizabletable’ to your table and the columns can be easily resized by drag and drop!
I was inspired by the flexigrid, but wanted a simpler solution. This one also nicely integrates into Wicket DataTable, for example.
Update: fixed the multi table on a page bug, kindly pointed out by Nick (see comments)
To see it working: http://www.audenaerde.org/example.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
function resetTableSizes (table, change, columnIndex)
{
//calculate new width;
var tableId = table.attr('id');
var myWidth = $('#'+tableId+' TR TH').get(columnIndex).offsetWidth;
var newWidth = (myWidth+change)+'px';
$('#'+tableId+' TR').each(function()
{
$(this).find('TD').eq(columnIndex).css('width',newWidth);
$(this).find('TH').eq(columnIndex).css('width',newWidth);
});
resetSliderPositions(table);
};
function resetSliderPositions(table)
{
var tableId = table.attr('id');
//put all sliders on the correct position
table.find(' TR:first TH').each(function(index)
{
var td = $(this);
var newSliderPosition = td.offset().left+td.outerWidth() ;
$("#"+tableId+"_id"+(index+1)).css({ left: newSliderPosition , height: table.height() + 'px'} );
});
}
function makeResizable(table)
{
//get number of columns
var numberOfColumns = table.find('TR:first TH').size();
//id is needed to create id's for the draghandles
var tableId = table.attr('id');
for (var i=0; i<=numberOfColumns; i++)
{
//enjoy this nice chain 
$('<div id="'+tableId+'_id'+i+'"></div>').insertBefore(table).data('tableid', tableId).data('myindex',i).draggable(
{ axis: "x",
start: function ()
{
var tableId = ($(this).data('tableid'));
$(this).toggleClass( "dragged" );
//set the height of the draghandle to the current height of the table, to get the vertical ruler
$(this).css({ height: $('#'+tableId).height() + 'px'} );
},
stop: function (event, ui)
{
var tableId = ($(this).data('tableid'));
$( this ).toggleClass( "dragged" );
var oldPos = ($( this ).data("draggable").originalPosition.left);
var newPos = ui.position.left;
var index = $(this).data("myindex");
resetTableSizes($('#'+tableId), newPos-oldPos, index-1);
}
}
);;
};
resetSliderPositions(table);
}
$(document).ready(function()
{
$(".resizabletable").each(function(index)
{
makeResizable($(this));
});
});
</script>
<style>
.draghandle.dragged
{
border-left: 1px solid #333;
}
.draghandle
{
position: absolute;
z-index:5;
width:5px;
cursor:e-resize;
}
TH
{
border-left: 1px solid #333;
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<div id="container" style="border: 1px solid blue;">
<table id="mytable" style="width:100%; border: 1px solid red;" border="0" cellspacing="0" cellpadding="0" >
<thead>
<tr>
<th style="">Dit is een interessante zin!</th>
<th style="">b</th>
<th style="">b</th>
<th style="">b</th>
</tr>
</thead>
<tbody>
<tr>
<td style="">Dit is een interessante zin!</td>
<td style="">b</td>
<td style="">b</td>
<td style="">b</td>
</tr>
<tr>
<td style="">b</td>
<td style="">a</td>
<td style="">b</td>
<td style="">b</td>
</tr>
<tr>
<td style="">b</td>
<td style="">a</td>
<td style="">b</td>
<td style="">b</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Enjoy
Advertisement
Like this:
One blogger likes this post.
June 11, 2011 at 2:08 am
Hey there awesome code, ive been sitting here for a while trying to get it to work on a simple html table
Any idea what im doing wrong?
/**
* Author: Rob Audenaerde
*/
function resetTableSizes (table, change, columnIndex)
{
alert(‘resize’);
//calculate new width;
var tableId = table.attr(‘id’);
var myWidth = $(‘#’+tableId+’ TR TH’).get(columnIndex).offsetWidth;
var newWidth = (myWidth+change)+’px’;
$(‘#’+tableId+’ TR’).each(function()
{
$(this).find(‘TD’).eq(columnIndex).css(‘width’,newWidth);
$(this).find(‘TH’).eq(columnIndex).css(‘width’,newWidth);
});
resetSliderPositions(table);
};
function resetSliderPositions(table)
{
var tableId = table.attr(‘id’);
//put all sliders on the correct position
table.find(‘ TR:first TH’).each(function(index)
{
var td = $(this);
var newSliderPosition = td.offset().left+td.outerWidth() ;
$(“#”+tableId+”_id”+(index+1)).css({ left: newSliderPosition , height: table.height() + ‘px’} );
});
}
function makeResizable(table)
{
//get number of columns
var numberOfColumns = table.find(‘TR:first TH’).size();
//id is needed to create id’s for the draghandles
var tableId = table.attr(‘id’);
for (var i=0; i<=numberOfColumns; i++)
{
//enjoy this nice chain
$('’).insertBefore(table).data(‘tableid’, tableId).draggable(
{ axis: “x”,
start: function ()
{
var tableId = ($(this).data(‘tableid’));
$(this).toggleClass( “dragged” );
//set the height of the draghandle to the current height of the table, to get the vertical ruler
$(this).css({ height: $(‘#’+tableId).height() + ‘px’} );
},
stop: function (event, ui)
{
var tableId = ($(this).data(‘tableid’));
$( this ).toggleClass( “dragged” );
var oldPos = ($( this ).data(“draggable”).originalPosition.left);
var newPos = ui.position.left;
var index = $(‘.draghandle’).index(this);
resetTableSizes($(‘#’+tableId), newPos-oldPos, index-1);
}
}
);
};
resetSliderPositions(table);
}
$(document).ready(function()
{
$(“.resizabletable”).each(function(index)
{
makeResizable($(this));
});
});
.draghandle.dragged
{
border-left: 1px solid #333;
}
.draghandle
{
position: absolute;
z-index:100;
width:5px;
cursor:e-resize;
}
TH
{
border-left: 1px solid #333;
border-bottom: 1px solid #333;
}
column01
column02
column03
column04
column05
column06
column07
column08
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
row
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
qqwoiruqwuor qwruryue ruyu
June 11, 2011 at 2:11 am
dam sorry the html isnt showing up properly here, probably what happened to your post above
June 11, 2011 at 2:20 am
ahh yea fixed it
the problem was on line :
$(”).insertBefore(table).data(‘tableid’, tableId).draggable(
change to
$(”).insertBefore(table).data(‘tableid’, tableId).draggable(
June 11, 2011 at 2:21 am
ahh yea fixed it
the problem was on line :
$('').insertBefore(table).data('tableid', tableId).draggable($('').insertBefore(table).data('tableid', tableId).draggable(June 11, 2011 at 2:22 am
sorry about this, code is not posting correctly,
add class .”draghandle” on the line above
September 10, 2011 at 1:21 pm
Thanks for posting this. Once I found this buried fix (actually, I figured it out myself before I saw it here), I got it to work nicely. I guess you aren’t able to edit the original post. Where is the most up to date version with all fixes?
June 13, 2011 at 9:28 pm
Hi,
Can you post an example of the fix please? I cannot get this to work…
Cheers!
June 14, 2011 at 9:31 am
Sorry for the broken code folks, it seems something went wrong during the edit. I adjusted it and also put a live working example on the net.
Have fun with it
June 15, 2011 at 10:36 pm
Hi!
Thats great, thank you for this… it works perfectly!!
The only problem I seem to have is if you have more than one tabl on the page it seems to not reset the column index for the second table.
So only the columns in the first one resize correctly.
It seems to be this line causing problems:
var index = $(‘.draghandle’).index(this);
resetTableSizes($(‘#’ + tableId), newPos – oldPos, index – 1);
Do you have any idea’s that could fix this? I’ve tried several things such as using this rather than .draghandle etc.. no luck!
Thanks,
Nick
June 15, 2011 at 10:40 pm
Thanks a lot for figuring this out, it’s been enormously helpful. JQuery has lots of nice table plugins, but I was having a terrible time coming up with something that *just* did column re-sizing.
June 17, 2011 at 4:13 am
I fixed the multi-table problem Nicky was having. The code is even cleaner now, so thanks for pointing that out Nick!
August 5, 2011 at 6:15 pm
I m new to JQuery. but I have requirement for the re-sizable columns. I tried pasting the above code and I downloaded 2 js files from internet and pointed to those. but its not allowing me to drag. I am not getting the draggable icon at all. Can you please let me know what I am doing wrong?
August 6, 2011 at 9:05 pm
In other words, you are yet another Indian ‘developer’ who takes on paying clients by promising them the world for ridiculously low fees, even though you have absolutely no idea how to achieve the desired outcome and then proceed to copy and paste other peoples work without any understanding or accreditation, then when you cant even manage to hack it into something fragile but stable enough to return half-finished to the client you post at the source of the script and ask them to do your work for you.
Can I not visit one blog or forum where there isn’t an example of this!?
August 6, 2011 at 9:08 pm
I want to add, great code Rob. It should definitely be turned int a plugin, I’ve looked at lots of table addons over the last few days and your’s is the only one that does just what it needs to without any unnecessary bloat.
August 6, 2011 at 9:37 pm
Hi, sorry for the repeat posts, a suggestion for your code, i think your slider position should be set as follows:
var newSliderPosition = (td.offset().left + td.outerWidth()) – table.offset().left;
I found it works much better with nested elements.
I also had to add position:absolute to the drag-handle css line as mine rendered relative, I think this might onyl relate to my own project though.
August 16, 2011 at 2:40 pm
Hi all, see my mew post for the plug-in version. Also, Murray, I looked at you suggestion on the sliderpositions, but that would not work, the draghandle’s would be off by the distance form the table left to the border of the browser..
What was the problem you where experiencing?
September 10, 2011 at 1:42 pm
I agree with Murray. When the table is nested inside a position:relative div that is offset from the edge of the page, the draggablehandle x coordinate is off by the value of the offset. Subtracting table.offset().left fixes the problem.
August 16, 2011 at 2:40 pm
Hi all, see my mew post for the plug-in version. Also, Murray, I looked at you suggestion on the sliderpositions, but that would not work, the draghandle’s would be off by the distance form the table left to the border of the browser..
What was the problem you where experiencing?
September 2, 2011 at 10:37 am
It doesn’t work in my table