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.

• View the demo
• GitHub Repo
• Submit / View issues

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">
		<tr>
			<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>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>10234</td>
			<td>John</td>
			<td>Smith</td>
			<td>555-555-5555</td>
			<td>orange</td>
			<td>$2.00</td>
		</tr>
		<tr>
			<td>102288</td>
			<td>Jane</td>
			<td>Smith</td>
			<td>555-445-5555</td>
			<td>purplue</td>
			<td>$1000.00</td>
		</tr>

        </tbody>
</table>

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

$('table').dragtable();

Options

Methods

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

$('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

Events