Rearrange Bootstrap table columns by drag and drop

A jQuery plug-in for Bootstrap table columns

The drag-n-drop-table-columns is a jQuery based plug-in for rearranging the table columns of the Bootstrap tables.

This is a simple plug-in, only 4Kb size that enables the visitors to re-arrange the table columns by drag and drop.

Demo1 Demo2
Developer’s page Download plug-in

Setting up the plug-in

After downloading the plug-in and including the dragndrop.table.columns.js file after the jQuery in your web page, initiate the plug-in via JavaScript as shown in the demo and code below.

A demo of drag and drop table columns

You need to include the .dnd-moved class in each row of the <table> tag in order to enable users rearranging the table columns by drag and drop facility.

Create as many rows as you want and initiate the plug-in via JavaScript. See the demo online by clicking the image or link below:

Bootstrap table drag drop

See online demo and code

The markup of the demo table:

 

The JavaScript:

 

Try drag and drop the Product ID, Name or other columns and you can see whole column moves where you drop in the table.

A demo with changing the dragged/dropped column style

In the above demo, you can see after dragging and dropping the columns, the color of the column header becomes quite dull. This style is controlled in the CSS file that comes with the plug-in. The properties that deal with drag and drop properties are:

  • .drag
  •  .dnd-drag
  • .over

You may change these and other properties to change the style of the columns during rearrangement and after dropping in new place.

See this example where I change a few properties after renaming the CSS file from dragndrop.table.columns.css to dragndrop.table.columns2.css.

Bootstrap table drag drop style

See online demo and code

Only the CSS is changed for this demo while markup and JavaScript remain the same. The CSS:

 

For more on this plug-in, visit the developer page.