Friday, February 7, 2014

An angular table directive having reordering of column feature by doing drag and drop

 I have created one table directive which has support for column reordering in drag and drop way.
 This table directive named as angTable uses two other directive draggable and droppable directive.

 Checkout the reordering of rows part

The angTable directive creates one table having column and rows derived from a configuration.This configuration is nothing but an object having two attributes 'head' and 'data'.

head: Array having the column header labels.
data:  Array having objects as rows

To add the drag and drop feature for the columns, draggable and droppable attribute directives have been used with their required parameters.Please check the file in the below Plunker link.

Note:To give feedback image while dragging occurs there are two other subtable in the directive where one table is on top of the other table using z-index.The top table coloring  scheme is white so that it can hide the table below it, that way the table which is at bottom in the layer having less z-index is hidden from the user but displayed to the browser, so when we drag any column of the actual table the below subtable is actually getting dragged.

Write comments
  1. This comment has been removed by the author.

  2. This is indeed the best code ever I saw on col swapping in angularJS...Thanks fr sharing this...

    But I found it very difficult to edit as I want to implement sorting and paging functionality also on these cols but its not working at all...Can u please update the above code with pagination and sorting along with col swapping?

    Thanks again

  3. Thanks, following is the solution where client side sorting and pagination is implemented along with col swapping.