[FEATURE] Draggable Columns

[offirgolan]

Resolves #46.

Allows reordering of columns via drag n drop.

Column Properties

/**
 * Whether the column can be reorder via drag and drop.
 *
 * CSS Classes:
 *  - `is-draggable`
 *  - `is-dragging`
 *  - `is-drag-target`
 *    - `drag-left`
 *    - `drag-right`
 *
 * @property draggable
 * @type {Boolean}
 * @default false
 */
draggable: false

/**
 * Whether the column is a valid drop target.
 *
 * @property droppable
 * @type {Boolean}
 * @default true
 */
droppable: true

Header & Footer Actions

/**
 * onColumnDrag action.
 *
 * @event onColumnDrag
 * @param  {Column} column The column that is being dragged
 */
onColumnDrag(column) {}

/**
 * onColumnDrop action.
 *
 * @event onColumnDrop
 * @param  {Column} column The column that was dropped
 * @param  {Boolean} isSuccess The column was successfully dropped and sorted
 */
onColumnDrop(column, isSuccess) {}

[vasilakisfil]

@offirgolan is there a way we can get the column that received the drop ?

[offirgolan]

@vasilakisfil Not sure I follow. If you want to get the change of index, you can do that by getting the original column's position from onColumnDrag and the final position from onColumnDrop.

[vasilakisfil]

@offirgolan I get the same column (the one I drag) on both onColumnDrag and onColumnDrop. Should I get a different column ?

[offirgolan]

Nope it will be the same column. The actions exist so you can check the state of the column before and after it has been repositioned.

You can do something like:

table.get('columns').indexOf(column);

To get the before and after index.

[vasilakisfil]

ah ok cool I will try that. I think it would be nice if we got both column on the onColumnDrop event.