Directive that allows reorder of table columns.

This directive needs jQuery to work.

Download files or use bower: bower install angular-dragtable.

First include Angular Dragtable in your project:

(function (DemoApp) {
  'use strict';

  DemoApp = angular.module('DemoApp', ['Dragtable']);

  DemoApp.config(function () {});
}(this));

To allow column reorder, add directives drag-me and drop-me on th elements, like this:

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th drag-me drop-me>Name</th>
      <th drag-me drop-me>Description</th>
      <th drag-me drop-me>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>Description 1</td>
      <td>1</td>
    </tr>
    ...
  </tbody>
</table>

To prevent drag event on whole th element, provide data-handle attribute with handle selector, like this:

<th drag-me drop-me data-handle=".handle">Name <span class="handle">Handle</span></th>

Now column could be dragged only using provided handle element. Note that handle element should be inside of th element.

To prevent performance issues, you could limit the number of ghost elements by providing data-limit attribute. Add number of rows that should be duplicated, like this:

<th drag-me drop-me data-limit="50">Name</th>

https://silvestar.codes/articles/angular-dragtable