Touch-enabled Drag'n'drop Table Sorter - RowSorter.js

RowSorter.js is a small yet customizable table sorter plugin that enables the user to re-sort table rows via drag'n'drop and touch events.

More features:

• Works as jQuery or Vanilla JS plugin.
• Custom drag handler.
• Allows to sticky the first and/or last row.
• Event handlers.
• Custom styles for dragging & sorting table rows.

How to use it:

1. Load the minified version of the RowSorter.js plugin in the document.

<!-- As a Vanilla JS Plugin -->
<script src="dist/RowSorter.js"></script>

<!-- As a jQuery Plugin -->
<script src="jquery.min.js"></script>
<script src="dist/RowSorter.js"></script>

2. Attach the RowSorter plugin to your HTML table and done.

<table id="example">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

// Vanilla JavaScript
RowSorter("#example");

// jQuery
$('#example').rowSorter();

3. Add drag handlers to the table.

<table id="example">
  <thead>
    ...
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Row 1</td>
      <td>Sample Content 1</td>
      <td>Sample Content 1</td>
    </tr>
    <tr>
      <td class="sorter"></td>
      <td>Row 2</td>
      <td>Sample Content 2</td>
      <td>Sample Content 2</td>
    </tr>
    <tr>
      <td class="sorter"></td>
      <td>Row 3</td>
      <td>Sample Content 3</td>
      <td>Sample Content 3</td>
    </tr>
  </tbody>
</table>

// Vanilla JavaScript
RowSorter("#example",{
  handler: 'td.sorter'
});

// jQuery
$('#example').rowSorter({
  handler: 'td.sorter'
});

4. Decide whether to allow only table rows in tbody to be sorted. Default: true.

// Vanilla JavaScript
RowSorter("#example",{
  tbody: false
});

// jQuery
$('#example').rowSorter({
  tbody: false
});

5. Customize the CSS classes for table rows that are sorting and dragging.

// Vanilla JavaScript
RowSorter("#example",{
  tableClass: 'sorting-table',
  dragClass: 'sorting-row'
});

// jQuery
$('#example').rowSorter({
  tableClass: 'sorting-table',
  dragClass: 'sorting-row'
});

6. Disable the table sorter on the first n and/last n table rows. Default: 0.

// Vanilla JavaScript
RowSorter("#example",{
  stickTopRows: 2,
  stickBottomRows: 2
});

// jQuery
$('#example').rowSorter({
  stickTopRows: 2,
  stickBottomRows: 2
});

7. Available event handlers.

// Vanilla JavaScript
RowSorter("#example",{
  onDragStart: function(tbody, row, index){
    console.log('start index is ' + index);
  },
  onDragEnd: function(tbody, row, current_index) {
    console.log('Dragging the ' + current_index + '. row canceled.');
  },
  onDrop: function(tbody, row, new_index, old_index){
    console.log('sorted from ' + old_index + ' to ' + new_index);
  }
});

// jQuery
$('#example').rowSorter({
  onDragStart: null,
  onDragEnd: null,
  onDrop: null
});

---

This awesome jQuery plugin is developed by arteyazilim. For more Advanced Usages, please check the demo page or visit the official website.