Simple jQuery Plugin For Draggable Table Columns - Dragtable

Dragtable is a simple jQuery plugin that turns the header of your table into draggable so that you can re-order the table columns by drag and drop.

Basic Usage:

1. Include jQuery library, jQuery UI and jQuery dragtable plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="jquery.dragtable.js"></script>

2.Include jQuery Dragtable CSS on your web page

<link rel="stylesheet" type="text/css" href="dragtable.css" />

3.Create a standard html table

<table id="demo">

<thead>
<tr>
<th>TIME</th>
<th>%user</th>
<th>%nice</th>
<th>%system</th>
<th>%iowait</th>
<th>%idle</th>
</tr>
</thead>

<tbody>
<tr>
<td>12:10:01 AM</td>
<td>28.86</td>
<td>0.04</td>
<td>1.65</td>
<td>0.08</td>
<td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td>
<td>26.54</td>
<td>0.00</td>
<td>1.64</td>
<td>0.08</td>
<td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td>
<td>29.73</td>
<td>0.00</td>
<td>1.66</td>
<td>0.09</td>
<td>68.52</td>
</tr>
</tbody>

</table>

4. Call the plugin

<script type="text/javascript">
$(document).ready(function() {      
$('#demo').dragtable();   
});
</script>

Change logs:

v2.0.14 (2015-01-15)

• fixing width and adding _create

v2.0.11 (2014-06-15)

• fixing width and adding _create

v2.0.8 (2013-09-21)

• bug fixes

v2.0.7 (2013-07-23)

• bug fixes

---

This awesome jQuery plugin is developed by akottr. For more Advanced Usages, please check the demo page or visit the official website.