Playground: Table column drag’n’drop resize

Thursday, May 19th, 2005

I write web applications at my work and in them I frequently make use of tables displaying information. Unfortunatelly, everybody always keeps asking ‘Can you increase the size of this or that limited table column?’. Normally, we use tooltips to display contents that has been cut off, but that often requires some users to mouse-over all rows just to be able to see the full contents.

So I was thinking, wouldn’t it be possible to use javascript to dynamically resize table columns? Here’s a little Proof-of-concept. It only works in Firefox and is still rather clunky. That’s because it started out as a general page element dragger, and was then rebuilt (or rather, adapted) to also resize table columns. Still, this is proof that it can be done.

Now I just need:

• Removable columns
• Editable cell contens
• database fields that can be dragged into the table on-the-fly without having to do a reload
• etc, etc.