Dragtable - A jQuery UI Widget to re-arrange Table Columns via Drag & Drop

Being able to re-order table columns has been something that I have always wanted to do. Because of a tables' markup you can't just use the jQuery UI sortables widget. After seeing akottr's dragtable plugin I was inspired to create a  jQuery UI widget similar to his plugin.  I set out with a few design goals; Flexible API, very responsive column drag(works with well with tables that have +1000 cells) and a easy to customize css framework.

How It Works

When a column handle is clicked it gets the index of the column. Then it goes through all of the <tr> and gets the <td> with that index and adds the class dragtable-col-placeholder. Once that is done I creates a copy of the table and appends the column collection to it.  The copy of the table is used for the drag display. Once the User drops the drag display, the drag display is removed and .dragtable-col-placeholder class is removed from all of the cells in the selected column in the target table.

Getting Started

Step 1

  • Include the following files on your page
  • jQuery 1.4.4
  • jQuery UI 1.8.6
  • jQuery UI theme of your choice
  • jquery-dragtable.js
  • dragtable-default.css

Step 2

Set up your data table

<table id="one">
	<thead class="test">
			<th data-header="id"><div class="dragtable-drag-handle"></div> ID</th>
			<th data-header="first_name">first name</th>
			<th data-header="last_name">last name</th>
			<th data-header="phone_number">phone number</th>
			<th data-header="color">team color</th>
			<th data-header="salary">salary made</th>


Take a look at the in the . You'll notice that they have an attribute named data-header. That attribute is used by the widgets method to set / get the column order.  Also the first th contains a div with the class of dragtable-drag-handle.  If an element is found inside the th with that class that will be used as the drag handle otherwise it will be the whole th.

Next Just Initiate the widget



parameter description default
dataHeader hange this if you would like to use a different th attubute(data-column-label) for the column headers data-header
handle The drag handle class .dragtable-drag-handle
change optional callback function that is called when the column order changes $.noop
displayHelper optional callback function that can be used to tweak the look of the column in that is currently getting dragged $.noop


name description

Set or get the colum order

Get Order
var order = $('table').dragtable('order');
//order is now [ 'firstname' , 'id' ,'lastname'' , etc......]

Set Order

$('table').dragtable('order', [ 'firstname' , 'id' ,'lastname'' , etc......]);
//Gotcha right now the array that you provide length must match the current length of the table columns


Name description
start when the user mouses down on handle or th, use in favor of display helper
beforechagne called when a column will be moved, the user is still dragging
change called after the column has been moved, the user is still dragging
stop after the user drops the column and stops dragging