I have created one table directive which has support for row reordering in drag and drop way.
This table directive named as angTable uses two other directive draggable and droppable directive.
Checkout the column reordering 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 readme.md 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.
http://plnkr.co/iy63pZ
This table directive named as angTable uses two other directive draggable and droppable directive.
Checkout the column reordering 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 readme.md 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.
http://plnkr.co/iy63pZ
No comments:
Write comments