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.

  4. Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.We are providing AngularJs training in velachery.
    For more details: AngularJs training in velachery

  5. This is most informative and also this post most user friendly and super navigation to all posts... Thank you so much for giving this information to me.

    rpa training in chennai
    rpa training in bangalore
    rpa course in bangalore
    best rpa training in bangalore
    rpa online training

  6. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing.. Believe me I did wrote an post about tutorials for beginners with reference of your blog. 
    python course in pune
    python course in chennai
    python course in Bangalore

  7. Thanks Admin for sharing such a useful post, I hope it’s useful to many individuals for developing their skill to get good career.
    Excellent post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
    Data Science training in rajaji nagar | Data Science Training in Bangalore
    Data Science with Python training in chennai
    Data Science training in electronic city
    Data Science training in USA
    Data science training in pune

  8. The knowledge of technology you have been sharing thorough this post is very much helpful to develop new idea. here by i also want to share this.
    Best Devops Training in pune
    excel advanced excel training in bangalore
    Devops Training in Chennai

  9. When I initially commented, I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails with the same comment. Is there any way you can remove people from that service? Thanks.

    AWS Training in Bangalore | Amazon Web Services Training in Bangalore
    Amazon Web Services Training in Pune | Best AWS Training in Pune
    AWS Online Training | Online AWS Certification Course - Gangboard
    Top 110 AWS Interview Question and Answers