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 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!
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
Cash Williams said,
October 30, 2008 at 1:50 pm
Great Code! Thanks
Question – Is there anyway manually initialize the javascript? My table is built via ajax and doesn’t exist when the page is loaded, therefore it does not become draggable.
pdx3d said,
November 4, 2008 at 4:21 pm
I tried it and has the same problem with sortable part of it like dpaladin. So I had to revert back to sorttable.js. Hope you can resolve this soon so more can benefit from your work. Thanks for sharing.
20 frische AJAX- und Javascripts | Dr. Web Magazin said,
November 7, 2008 at 9:10 am
[...] dragtable Tabellen mit der Maus ordnen [...]
cromy said,
November 9, 2008 at 7:13 pm
can make a handle on this function? mabe a div or text that handle the drag and drop funtion.
Cyril said,
November 17, 2008 at 4:12 am
Hi,
This is a very smooth and easy to use, but when the table is long & hidden in scrolling DIV the Drag does not work. :(
Can i find any updates.
Kevin said,
December 12, 2008 at 1:02 am
How can i get the column’s order after drag and drop?
Siva said,
December 29, 2008 at 3:46 am
Hi Dan,
I tried this script for GridView. It is working fine if there is only one page. But not working when GridView spans 2 or more pages. Could you please help on this, how to make this script work for Paged GridView?
Jon said,
February 5, 2009 at 5:10 am
Mozilla 1.7 works …
But no matter what i try, i can’t get “lynx” to work … ;P
AC said,
February 5, 2009 at 4:11 pm
Found 2 bugs I have fixed on my version:
1) Doesn’t work well with Zebra tables, added a paremeter to add remove classNames based on odd/even.
2) The draggable column width appears crazy on FireFox. Don’t seem to get it on your page, but I fixed it by adding units “px” to the width and height.
Tim Streater said,
February 21, 2009 at 4:11 am
Just what I was looking for. Like another who commented, I build my table using AJAX. So, I found the initialisation code, put it in a function, made _timer and _dgtimer be global, and then called those initialisation functions once I built the table.
Seems to work OK.
40 Useful JavaScript Libraries said,
March 3, 2009 at 1:07 am
[...] and dragtableTables, same them or not, are ease digit of the prizewinning structure to inform data. But they [...]
40 Useful JavaScript Libraries | ClickLogin Web Design said,
March 3, 2009 at 5:53 am
[...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]
http://www.digiwu.com » Blog Archive » 40 Useful JavaScript Libraries said,
March 3, 2009 at 6:53 am
[...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]
40 Useful JavaScript Libraries | Tech Underground said,
March 5, 2009 at 9:58 am
[...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]
Just Ziya » Blog Archive » 40 个轻量级 JavaScript 库 （下）|COMSHARP CMS said,
March 5, 2009 at 10:45 pm
[...] swfobject 这是一个最受欢迎的对 Flash 对象进行引用的方法。可以生成标准 swf 引用代… [...]
40 个轻量级 JavaScript 库（下） - Jeff-Chen.Com said,
March 5, 2009 at 10:53 pm
[...] 与 dragtable 不管你喜欢与否，table [...]
40 Useful JavaScript Libraries | The Scripts Zone said,
March 5, 2009 at 11:22 pm
[...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]
40 个轻量级 JavaScript 库 said,
March 6, 2009 at 12:47 am
[...] 与 dragtable 不管你喜欢与否，table [...]
Feed Reader » 40 Useful JavaScript Libraries said,
March 7, 2009 at 6:03 am
[...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]
Feed Reader (Beta) » 40 Useful JavaScript Libraries said,
March 7, 2009 at 5:42 pm
[...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]
40 Useful JavaScript Libraries « Hdeya team blog said,
March 12, 2009 at 8:37 am
[...] and dragtable Tables, like them or not, are still one of the best ways to present data. But they can be better: [...]
陈宝成のBlog » 40 个轻量级 JavaScript 库 said,
March 15, 2009 at 12:04 pm
[...] 与 dragtable 不管你喜欢与否，table [...]
TimeCode » 【Study.】 40 个轻量级 JavaScript 库 （下） said,
March 21, 2009 at 7:12 pm
[...] 与 dragtable 不管你喜欢与否，table [...]
40 Useful JavaScript Libraries | veryweblog focus on the internet ,new media. said,
March 26, 2009 at 11:17 am
[...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]
40 Useful JavaScript Libraries - o2webdev said,
March 30, 2009 at 6:39 pm
[...] and dragtable Tables, like them or not, are still one of the best ways to present data. But they can be better: [...]
dep said,
April 2, 2009 at 11:27 am
Is it possible to suppress the drag on certain columns?
我想网 » Blog Archive » 40 个轻量级 JavaScript 库 said,
April 7, 2009 at 9:18 pm
[...] 与 dragtable 不管你喜欢与否，table [...]
40 Useful JavaScript Libraries | Bookmarks said,
April 20, 2009 at 1:06 pm
[...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]
Neeraj Dave said,
May 5, 2009 at 6:59 am
Hi Dan,
I tried this script for GridView. It is working fine at almost on all browser except IE 8 beta version. Is there any setting needs?
Also could you please help on this, how to make one or more columns fix, means I want few columns which have reordering functionality disable. Also I need to Hide/Unhide columns as per combo/list box..
Thanks
Dave
Aaron said,
May 11, 2009 at 8:44 pm
IE8 = Error.
Web design Speed | Web Development | Web Site Design | SEO | Tips » List of Really Useful JavaScript Libraries said,
May 26, 2009 at 3:42 am
[...] DragTable Enable users to change order of table columns by simply dragging them. [...]
Олег said,
May 28, 2009 at 12:35 pm
Разное
Список действительно полезных JavaScript-библиотек | WebDuty said,
May 30, 2009 at 9:16 am
[...] DragTable Добавляет возможность изменять порядок столбцов таблицы, просто перетаскивая их. [...]
Muhammad Haris said,
June 1, 2009 at 4:41 am
The script is not working in IE8 and if i change its ode to IE7 even then its not working as IE7 is mentioned in the listed ones. Please do let me know if it works then how.
lee eun suck said,
June 3, 2009 at 3:07 am
I’m from korea
Please send me dragtable sourse
mail : twilight2054@naver.com
dyxyju said,
June 8, 2009 at 1:57 pm
for IE8
- forEach(elt.style, function(k) { new_elt.style[k] = elt.style[k]; });
+ // forEach(elt.style, function(k) { new_elt.style[k] = elt.style[k]; });
David said,
June 9, 2009 at 9:26 am
THis script doesn’t work with IE8.
» 【转载】40 个轻量级 JavaScript 库 （下）- WEB前端开发- 专注前端开发，关注用户体验 said,
June 23, 2009 at 10:42 pm
[...] 与 dragtable 不管你喜欢与否，table [...]
Sanjeev said,
June 24, 2009 at 3:01 am
Hi,
Thanks,Every thing is working fine.But please tell me if header section is in different table and items are in different table then how can we acheive this functionality because at that time it will be two different object?Thanks in advance.
Functional Tables with JavaScript Framworks Libraries | Developer Assets | Ultimate Smashing said,
June 27, 2009 at 2:49 pm
[...] 11- Dragtable [...]
vnkitecom said,
June 30, 2009 at 6:02 pm
Кайтсерфинг, школа кайтсерфинга, обучение кайтсерфингу,кайтинг, кайтинг обучение, кайт школа, кайт школа вьетнам.
SOHU媒体技术产品中心-创意设计组 » [转载]40个实用的轻量级JavaScript库 said,
July 14, 2009 at 2:07 am
[...] and dragtable [...]
Anzljc said,
July 15, 2009 at 1:43 am
I have problems with table when I make partial page refresh and of course then the columns can’t be reordered. Any solution?
Anzljc said,
July 16, 2009 at 1:04 am
The problem is I can’t call init function more than once! But I have to, because of the search the table is not draggable anymore.
danvk said,
July 16, 2009 at 8:18 am
Anzljc — see discussion at http://code.google.com/p/dragtable/issues/detail?id=8&can=1
40个轻量级 JavaScript 库 « oh2w.com said,
July 21, 2009 at 10:12 am
[...] 与 dragtable 不管你喜欢与否，table [...]
gps said,
July 28, 2009 at 1:35 pm
Спасибо отличыне примеры..
saravanan said,
August 4, 2009 at 9:10 pm
Wow! good example really wonderful script
thanks
40个轻量级JavaScript脚本库 | 帕兰映像 said,
August 29, 2009 at 1:10 am
[...] sorttable and dragtable [...]
chuck cottrill said,
September 10, 2009 at 12:02 pm
This (dragtable) is a great tool… love it!
Had a user ask to be able to turn on/off the dragable – so I added a function toggleDrag()… you might consider adding this.
-Chuck
S B said,
September 12, 2009 at 1:54 pm
Hi Dan,
I’m trying to get dragtable to work with rows instead of columns, but am running into what appears to be some Javascript limitations. Could you reply to me or at http://code.google.com/p/dragtable/issues/detail?id=4 to help me with this?
Thanks!
Дмитрий Шеметов said,
October 7, 2009 at 10:58 pm
Автор как всегда написал все понятно
Савелий Андреев said,
October 21, 2009 at 11:12 pm
Я конечно мало что смыслю в посте но постараюсь осилить.
Дмитрий Шумилов said,
October 22, 2009 at 1:57 am
Спасибо! Доходчиво и понятно объяснил
40 个有用的JavaScript库 - Ajax Finder [Ajax探索者] said,
November 2, 2009 at 4:37 am
[...] and dragtable Tables, like them or not, are still one of the best ways to present data. But they can be better: [...]
Tong said,
December 23, 2009 at 4:32 am
you can disable some column see below.
/// in html table element///
xxx //can’t draggable
xxx // draggable
xxx // draggable
///// END HTML///////
/// modify script librarie : ///
for (var i = 0; i < headers.length; i++) {
if(headers[i].className != "notdrage"){ //add this to disable by classname = "notdrage"
headers[i].onmousedown = dragtable.dragStart;
}
}
///// END SCRIPT///////
Kullanışlı Javascript Kütüphaneleri » Müjdat Korkmaz: Blog said,
December 26, 2009 at 6:32 am
[...] DragTable Enable users to change order of table columns by simply dragging them. [...]
mahavir jain said,
January 19, 2010 at 5:20 am
can we add class for drag and drop column at drag drop event???
Rafael said,
January 29, 2010 at 8:55 am
Hi
my table have about 1800.
I have edited the js to “get” only first 20 rows to move and works great, but when I drag de columns the browser “stop” I think because the size of the table.
When I drop a column I do a “__doPostBack(…)”.
where can i edit the code for just change de header position?
Thanks
Vladimir said,
February 3, 2010 at 5:49 am
buy cheap tramadol online 50mg x 180 Tablets $99
Vladimir said,
February 3, 2010 at 7:33 pm
аквариумы
Vladimir2 said,
February 3, 2010 at 7:58 pm
аквариум
Andrey said,
February 3, 2010 at 11:09 pm
головоломки