Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Angular Dragtable

Directive that allows reorder of table columns.

Dependencies

This directive needs jQuery to work.

Installation

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

Usage

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>

Options

handle

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.

limit

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>

Demo

https://frontend-developer.xyz/angular-dragtable/

Guide

https://silvestarbistrovic.from.hr/en/articles/angular-dragtable

You can’t perform that action at this time.