JSFiddle - React, Tailwind, and code Playground

by Nitish Kumar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl">
    <table class="table">
       <thead>
      <th ng-repeat="hd in headers"><span>{{hd}}</span>
      </th>
    </thead>
     <tbody>
      <tr ng-repeat="data in res">
        <td ng-repeat="d in headers"><span>{{data[d]}}</span>
        </td>
      </tr>
    </tbody>
    </table>
    <hr />
    <h4>Order</h4>
    <select ng-model="myselect" ng-options="o as o for o in headers" multiple class="form-control"></select>
    <input type="button" class="btn" value="^" ng-click="up()" /> 
	  <input type="button" class="btn" value="v" ng-click="down()" /> 
</body>

JavaScript

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
    $scope.res = [{Read: 'read1', msg: 'msg1', action: 'action1'}, {Read: 'read2', msg: 'msg2', action: 'action2'}];
    	var bb = Object.keys($scope.res[0]);
      $scope.headers = bb;
      
      $scope.up = function () {
      	for(var i = 0, l = $scope.myselect.length; i < l; i++) {
            var index = $scope.headers.indexOf($scope.myselect[i])
            if (index > 0) {
                var items = $scope.headers.splice(index, 1)
                $scope.headers.splice(index - 1, 0, items[0]);

            }
        }
      }
      
      $scope.down = function () {
       	for(var i = 0, l = $scope.myselect.length; i < l; i++) {
            var index = $scope.headers.indexOf($scope.myselect[i])
            if (index < $scope.headers.length) {
                var items = $scope.headers.splice(index, 1)
                $scope.headers.splice(index + 1, 0, items[0]);

            }
        }
    }; 

      
    	
      
});