Impl manual row ordering by clicking

UI/Component/Table.js

@@ -79,7 +79,6 @@
                 return;
             }
 
-            const self     = this;
             this.tables[id] = new jsOMS.Views.TableView(id);
 
             this.unbind(id);
@@ -91,9 +90,45 @@
 
             const sorting = this.tables[id].getSorting();
             let length    = sorting.length;
-
             for (let i = 0; i < length; ++i) {
-                sorting[i].addEventListener('click', function (event)
+                this.bindSorting(sorting[i], id);
+            }
+
+            const order = this.tables[id].getSortableRows();
+            length      = order.length;
+            for (let i = 0; i < length; ++i) {
+                this.bindReorder(order[i], id);
+            }
+
+            const filters = this.tables[id].getFilter();
+            length        = filters.length;
+            for (let i = 0; i < length; ++i) {
+                this.bindFiltering(filters[i], id);
+            }
+        };
+
+        bindReorder(sorting, id)
+        {
+            sorting.addEventListener('click', function (event)
+            {
+                jsOMS.preventAll(event);
+
+                const table   = document.getElementById(id),
+                    rows      = table.getElementsByTagName('tbody')[0].rows,
+                    rowLength = rows.length,
+                    rowId     = this.closest('tr').rowIndex;
+
+                if (jsOMS.hasClass(this, 'order-up') && rowId > 1) {
+                    rows[rowId].parentNode.insertBefore(rows[rowId - 2], rows[rowId]);
+                } else if (jsOMS.hasClass(this, 'order-down') && rowId < rowLength) {
+                    rows[rowId - 1].parentNode.insertBefore(rows[rowId], rows[rowId - 1]);
+                }
+            });
+        };
+
+        bindSorting(sorting, id)
+        {
+            sorting.addEventListener('click', function (event)
             {
                 jsOMS.preventAll(event);
 
@@ -131,18 +166,15 @@
                     }
                 } while (order);
             });
-            }
+        };
 
-            const filters = this.tables[id].getFilter();
-            length        = filters.length;
-
-            for (let i = 0; i < length; ++i) {
-                filters[i].addEventListener('click', function (event)
+        bindFiltering(filtering, id)
+        {
+            filtering.addEventListener('click', function (event)
             {
                 jsOMS.preventAll(event);
                 // filter algorithm here
             });
-            }
         };
     }
 }(window.jsOMS = window.jsOMS || {}));

Views/TableView.js

@@ -30,6 +30,14 @@
             );
         };
 
+        getSortableRows()
+        {
+            return document.querySelectorAll(
+                '#' + this.id + ' tbody .order-up,'
+                + ' #' + this.id + ' tbody .order-down'
+            );
+        };
+
         getFilter()
         {
             return document.querySelectorAll(