This tabular form demonstrates resequencing rows using a column that stores the sequence number.

1. Edit Report Attributes, and add a column link (link under tasks).
2. Re-organise the columns so column link appears as the last column
3. Under column formatting, specify HTML Expression as (replacing "f03" for name attribute of the column that contains the sequence):

   
   <img src="#IMAGE_PREFIX#htmldb/icons/up_arrow.gif" class="pb" onclick="moveRowUp(this, 'f03')">
   <img src="#IMAGE_PREFIX#htmldb/icons/down_arrow.gif" class="pb" onclick="moveRowDown(this, 'f03')">
   
   

4. In the page definition, add the following to the attribute under JavaScript, Function and Global Variable Declaration:

   
   
   function moveRowDown(row,idx){
       
       var currRow = $($x_UpTill(row, 'TR'));
       var nextRow = currRow.next();
       
       currSeqEl = $('input[name="' + idx + '"]', currRow);
       nextSeqEl = $('input[name="' + idx + '"]', nextRow);
       
       currSeq = currSeqEl.val();
       nextSeq = nextSeqEl.val();
       
       var move = currRow.insertAfter(nextRow);
   
       if (move.size() === 1) {
           nextSeqEl.val(currSeq);
           currSeqEl.val(nextSeq);
       }
       
   }
   
   function moveRowUp(row, idx){
   
       var currRow = $($x_UpTill(row, 'TR'));
       var prevRow = currRow.prev();
       
       currSeqEl = $('input[name="' + idx + '"]', currRow);
       prevSeqEl = $('input[name="' + idx + '"]', prevRow);
   
       currSeq = currSeqEl.val();
       prevSeq = prevSeqEl.val();
       
       var move = currRow.insertBefore(prevRow);
       
       if (move.size() === 1) {
           currSeqEl.val(prevSeq);
           prevSeqEl.val(currSeq);
       }
       
   }
   
   
   

5. Verify it works, and if all is good, hide the sequence column from view
6. It is important to update the dynamic action and specify the Event Scope as Dynamic, so that and additional rows that are added are still affected.