table-dragger

Finally, you are able to drag and sort your table as you want.

Demo

Try out the demo!

Inspiration

Table-dragger is a minimalist plain Javascript library for building reorderable drag-and-drop table.

Features

• Super easy to set up
• cellspacing, cellpadding, col and colgroup in account
• Able to sort columns or rows at the same time
• Smooth animation when sort
• No bloated dependencies
• Touch events

Install

You can get it on npm.

npm install table-dragger --save

or

<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>

Usage

import tableDragger from 'table-dragger'

tableDragger(el, options?)

<table id="table">
  <thead>
  <tr>
    <th class='handle'>header1</th>
    <th class='handle'>header2</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>conten1</td>
    <td>conten2</td>
  </tr>
  </tbody>
</table>

var el = document.getElementById('table');
var dragger = tableDragger(el, {
  mode: 'row',
  dragHandler: '.handle',
  onlyBody: true,
  animation: 300
});
dragger.on('drop',function(from, to){
  console(from);
  console(to);
});

And you could also not set any options, which defaults to drag with the default options.

The options are detailed below.

options.mode

• Setting mode to column, user drag and sort columns of table
• Setting mode to row, user drag and sort rows of table
• Setting mode to free, user drag rows or columns, depending on the direction of the mouse movement after tapping. Notice you have to specify dragHandler in free mode.

options.dragHandler

• dragHandler is drag handle selector within table
• By default, when in column mode, dragHandler is the first row of table; in row mode, the first column.

options.onlyBody

• Setting onlyBody to true in row mode, user can only lift rows in tbody.

options.animation

• ms, animation speed moving items when sorting, 300 — without animation

API

The tableDragger method returns a tiny object with a concise API. We'll refer to the API returned by tableDragger as dragger

dragger.on (Events)

The dragger is an event emitter. The following events can be tracked using dragger.on(type, listener):

Event Name | Listener Arguments | Event Description -----------|----------------------------------|------------------------------------------------------------------------------------- drag | el, mode | el is the origin table, mode is column or row, shows the mode user sort drop | oldIndex, newIndex, el, mode | oldIndex is the index before sorting. newIndex is the index after sorting shadowMove | oldIndex, newIndex, el, mode | trigger when column(row) is being lifted and moving into other column(row) place. out | el, mode | column(row) was dragged out of el, or dropped

dragger.dragging

This property will be true whenever an element is being dragged.

dragger.destroy

Removes all drag and drop events used by table-dragger to manage drag and drop.

License

MIT