dragtable: Visually reorder all your table columns
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 7.0.5730.13 | Yes |
| IE 6.0 | 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 reorder some columns, navigate away from the page and then come back, you’ll find that your carefully-crafted column ordering is gone. The columns are back to their original ordering. This is a known issue and will likely be fixed at some point in the future using cookies. sorttable has this problem as well.
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! Feel free to contact me at danvdk@gmail.com. Or, even better, head over to the dragtable project on Google Code and start hacking around!
Dragtable: effetto drag-and-drop sulle tabelle | Blog.makernet.it said,
June 27, 2008 at 9:25 am
[...] scaricare il codice e per vedere lo script all’opera: http://www.danvk.org/wp/dragtable [...]
Dragtable, una tabla sortable y dragable (y algún palabro más) | aNieto2K said,
June 27, 2008 at 11:39 am
[...] Javascript), con esta además, podemos mover las columnas ordenando los resultados a voluntad.[Demo] Compártelo ← 3 de 10: Entrevista a Daniel [...]
uglychart.com: a blog about stocks » Blog Archive » links for 2008-06-28 said,
June 27, 2008 at 10:31 pm
[...] danvk.org » dragtable: Visually reorder all your table columns this is nice (tags: ui web programming javascript) [...]
TheDaVis Blog — DragTable, la Tabla de las tablas said,
June 28, 2008 at 9:36 am
[...] DragTable es una librería JavaScript que permite mover de posición las columnas de las tablas HTML tradicionales y además permite ordenar las columnas de forma ascendente y descendente. Ver Demo [...]
BenjaminKeen.com said,
June 28, 2008 at 2:11 pm
[...] stuff, from Dan Vanderkam. http://www.danvk.org/wp/dragtable/ No Comments [...]
links for 2008-06-28 « toonz said,
June 28, 2008 at 4:30 pm
[...] danvk.org » dragtable: Visually reorder all your table columns (tags: javascript table webdev) [...]
Greg Grothaus said,
June 28, 2008 at 8:12 pm
I noticed you are on the front page of programming.reddit.com - congrats.
dpaladin said,
June 28, 2008 at 9:48 pm
its great :D
i tried to use it, but the sortable doesn’t works, only the drag function
i even copy & paste the table you used, but the table doesn’t sort, only its possible to drag it
what can i do?
dpaladin said,
June 28, 2008 at 10:03 pm
oh sorry, i find out
maybe you can write that you need also the sorttable.js file for sorting :P
links for 2008-06-29 | Libin Pan said,
June 28, 2008 at 11:31 pm
[...] danvk.org » dragtable: Visually reorder all your table columns Dragtable is a JavaScript library for making the columns of a table draggable. [...]
Will said,
June 29, 2008 at 4:03 am
Great script, thanks a lot!
Joe said,
June 29, 2008 at 9:48 am
If you use headers and footers in your tables. Make sure all columns align, 4 on top require 4 in the footer. If you miss one column, it won’t be dragable.
rascunho » Blog Archive » links for 2008-06-29 said,
June 29, 2008 at 1:40 pm
[...] danvk.org » dragtable: Visually reorder all your table columns 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. (tags: http://www.danvk.org 2008 mes5 dia28 at_home DataGrid DataTable grid table CSS javascript unobtrusive sort drag *****) [...]
links for 2008-06-30 | Funny Web Pages said,
June 29, 2008 at 5:35 pm
[...] danvk.org » dragtable: Visually reorder all your table columns (tags: javascript table webdev drag html ajax design) [...]
Moisés Márquez said,
June 30, 2008 at 4:37 am
Si tenéis páginas con tablas donde se presentan multitud de datos seguro que os habréis preguntado cómo se podrían ordenador [...]
Vinicius Camara said,
June 30, 2008 at 6:11 am
Congratulations Fellow.
Amazing example.
Drum Boom said,
June 30, 2008 at 7:19 am
Thank you. Very useful I will post russian topic on my blog for lib popularisation.
Сортировка и операции с TABLE на Javascript | Drum Boom said,
June 30, 2008 at 7:43 am
[...] и, наконец-то, нашел совсем свежее решение проблемы dragtable на основе предыдущей библиотеки от [...]
Phil W. said,
June 30, 2008 at 12:48 pm
Dan, this is a great bit of code.
One question: Like many others, I use striping or zebra-ing or alternate colors for each row. I realize that sorttable isn’t your code, but do you or anyone else know if there any way to preserve that alternate colors with the sorting? Thanks.
Grok2 said,
June 30, 2008 at 1:17 pm
Brilliant!!! Worked for me on Opera 9.5:
Version:9.50
Build:10063
Platform:Win32
System:Windows XP
Java:Sun Java Runtime Environment version 1.6
dabdu said,
July 1, 2008 at 12:31 pm
works fine on Epiphany 2.22.2
Skylog » Blog Archive » links for 2008-07-02 said,
July 1, 2008 at 11:31 pm
[...] dragtable: Visually reorder all your table columns (tags: javascript) [...]
Foo said,
July 2, 2008 at 8:31 pm
Very nice!
Sadly, there’s no facility to resize the table or to resize the column widths relative to one another. That’d make it really useful.
Yogeshwar said,
July 2, 2008 at 11:13 pm
Is this code is free ware or do we need to take license
hans said,
July 3, 2008 at 1:36 pm
great script thanx alot.
one question: did anyone ever try the dragable in a absolute positioned table? seems to breake, any ideas?
cheers,
hans
Colin said,
July 8, 2008 at 10:19 pm
This is a great script.
Two questions:
Which library are you using to display the column being moved? On mine, the drag works fine but you don’t see the column being moved.
On my small table (8 columns) everything works fine. But on my table with 11 columns I can’t seem to drag the 11th column.
Any ideas?
Cheers
Colin
Recopilatorio diseño web » Innova Desarrollos informáticos said,
July 13, 2008 at 2:07 am
[...] Efectos: Reordenación visual de columnas de una tabla, espectacular dropdown, galería de fotos al estilo MS Surface, efecto slide, barra de progreso [...]
Tablas que se ordenan y son movibles | Deambulando said,
July 21, 2008 at 2:11 am
[...] con Sorttable + DragTable si puedes! (que bien me ha salido el comercial [...]
Charles-Antoine said,
July 21, 2008 at 8:56 am
Awesome ! ! Works fine and very easy to use… Thanks a lot.
CA
Aashish said,
August 6, 2008 at 1:48 am
Thnx a lot……i was searchin for this script a lot which was workin on IE 7 and also on firefox
Mueve las columnas de una tabla con AJAX | Emilio José Rodríguez García said,
August 10, 2008 at 7:22 am
[...] trata de Dragtable una librería javascript que nos permitirá sin necesidad de recargar la página cambiar el orden [...]
Del.icio.us Links » Blog Archive » links for 2008-08-18 said,
August 18, 2008 at 7:56 am
[...] danvk.org » dragtable: Visually reorder all your table columns (tags: programming HTML javascript design webdesign development) [...]
Webmasterkit.info » Archives » Draggable table said,
August 19, 2008 at 4:28 am
[...] Link [...]
20 frische AJAX- und Javascripts | Javascript | Dr. Web Weblog said,
August 21, 2008 at 5:30 am
[...] dragtable Tabellen mit der Maus ordnen [...]
Chritian said,
August 22, 2008 at 3:26 am
In Firefox the width of the new dragtable get not the width of the tablecolumn. When you defined a tablewidth via css the dragtable column has the same width eg. 100% of the page.
You couldn’t use sortable without draggable. And the top position is the absolute of the body not from the parent relative element eg. div. Maybe you can give the new dragtable another css class or paste it at the end of the bodytag to seperate it via cascading from the original table.
dragtable | Office-it.orG said,
September 9, 2008 at 6:40 am
[...] Here is its URL for dragtable: http://www.danvk.org/wp/dragtable/ [...]
Rob said,
September 16, 2008 at 2:57 am
Hi there,
This is a great script and saves me spending hours if not days trying to do this myself. The only problem i’m having is that it is understandably slow on my large datasets i’m using it with. Is there any way of speeding it up with some kind of preload or is there a specific number of rows where a slow performance is noticeable?
Many Thanks
Rob