dragtable: Visually reorder all your table columns





For my new site & blog, visit Welcome to this JavaScript blast from 2008! If you'd like to add table column dragging to your page, you should use this jQuery plugin instead. It's actively maintained and has a much better UI than the library described below.For my new site & blog, visit danvk.org

Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick.

But sometimes sorting just isn’t enough. What if you want to focus on just one or two of the columns in a table? In a client-side application you could drag the columns you care about next to each other. Why not in a web application?

Enter dragtable. Like sorttable, it teaches HTML tables a new trick through a simple class attribute. Here’s a sample:

Name Date Favorite Color Dan 1984-07-12 Blue Alice 1980-07-22 Green Ryan 1990-09-23 Orange Bob 1966-04-21 Red

Drag the column headings to rearrange the data in this table. This is a plain old HTML table with class=draggable set.

To achieve kMaxDHTMLGoodness , use sorttable and dragtable on the same table! Just set class="draggable sortable" :

Name Salary Extension Start date Bloggs, Fred $12000.00 1353 18/08/2003 Turvey, Kevin $191200.00 2342 02/05/1979 Mbogo, Arnold $32010.12 2755 09/08/1998 Shakespeare, Bill $122000.00 3211 12/11/1961 Shakespeare, Hamnet $9000 9005 01/01/2002 Fitz, Marvin $3300 5554 22/05/1995

To make the columns of a table reorderable, just follow these three easy steps:

Download the dragtable Javascript library. Include the library by putting this in your document’s HEAD: <script src="dragtable.js"></script> Mark the table whose column headers you want to be draggable by

giving it a class of “draggable”: <table class="draggable">

That’s it! Your table will instantly become interactive.

Q&A

Which browsers does dragtable work with?

These are just the browsers I’ve checked. If you try dragtable on

a browser not listed here, please let me know whether it works. dragtable

should work for at least 99% of all web surfers.

Browser Works? IE 8.0.6001.18702 Yes IE 7.0.5730.13 Yes IE 6.0 Yes Firefox 3.5 Yes Firefox 3 RC2 Yes Firefox 2.0.0.14 Yes Firefox 1.5 Yes Safari 3.1.1 Yes Safari 2.0 Yes Camino 1.6.1 Yes Opera 9.2.7 Yes

dragtable keeps forgetting my column ordering!

If you set an id on your table, dragtable will save all column reorderings for that table in a cookie and replay them the next time you visit the page. If you don’t want it to do this, either 1. don’t set an id or 2. set class="draggable forget-ordering" .

How does dragtable distinguish a click from a drag?

This should only be relevant if you’re using dragtable together with sorttable. If a user clicks a column header and then moves the mouse some amount, dragtable assumes they want to rearrange the columns. If they don’t move the mouse very much, dragtable considers it a click and sorttable will take it as a cue to sort on that column. The exact cutoff is a 10 pixel radius, but you can customize this by calling:

dragtable.setMinDragDistance(5);

somewhere on your page.

I found a bug/have a feature request

A bug? The horrors! Please head over to the dragtable project on Google Code and file your bug/feature request in the issue tracker. Or, even better start hacking around!

I’ve closed the comments below due to spam. If you have issues to report, please do so on the issue tracker.



