feat(header.html): allow reordering of columns

Note: the ability to reorder columns is only available when using ng-table-dynamic
esvit · Jul 7, 2015 · 23236e6 · 23236e6
1 parent 5ecdef0
commit 23236e6
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 6 deletions.
diff --git a/examples/demo20.html b/examples/demo20.html
@@ -23,13 +23,18 @@ <h1>Dynamic columns</h1>
 <div ng-controller="DemoCtrl">
 
     Columns:
-    <label class="checkbox" ng-repeat="column in cols">
-        <input type="checkbox" ng-model="column.show" /> {{column.title}}
-    </label>
+    <div ng-repeat="column in cols | orderBy:'position'">
+        <span class="glyphicon glyphicon-arrow-up" ng-click="move(column,-1)"></span>
+        <span class="glyphicon glyphicon-arrow-down" ng-click="move(column,1)"></span>
+
+        <label>
+            <input type="checkbox" ng-model="column.show" /> {{column.title}}
+        </label>
+    </div>
 
     <table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-striped">
         <tr ng-repeat="user in $data">
-            <td ng-repeat="col in $columns">{{user[col.field]}}</td>
+            <td ng-repeat="col in $columns | orderBy:'position'">{{user[col.field]}}</td>
         </tr>
     </table>
 
@@ -68,6 +73,7 @@ <h1>Dynamic columns</h1>
                         filter: { name: 'select' },
                         filterData: names,
                         show: true,
+                        position: 0,
                         field: 'name'
                     };
                     // alternatively declare some/all column fields as functions
@@ -83,10 +89,27 @@ <h1>Dynamic columns</h1>
                             };
                         },
                         show: true,
+                        position: 1,
                         field: 'age'
                     };
                     $scope.cols = [usernameCol, ageCol];
 
+                    $scope.move = function(column, value){
+                        var newPosition = column.position+value;
+
+                        if (newPosition >= $scope.cols.length || newPosition < 0) {
+                            return;
+                        }
+
+                        angular.forEach($scope.cols, function(col){
+                            if (col.position == newPosition) {
+                                col.position = column.position;
+                            }
+                        });
+
+                        column.position = newPosition;
+                    };
+
                     function names() {
                         var def = $q.defer(),
                                 arr = [],

diff --git a/src/ng-table/header.html b/src/ng-table/header.html
@@ -1,6 +1,6 @@
 <tr>
     <th title="{{$column.headerTitle(this)}}"
-        ng-repeat="$column in $columns"
+        ng-repeat="$column in $columns | orderBy:'position'"
         ng-class="{
                     'sortable': $column.sortable(this),
                     'sort-asc': params.sorting()[$column.sortable(this)]=='asc',
@@ -17,7 +17,7 @@
     </th>
 </tr>
 <tr ng-show="show_filter" class="ng-table-filters">
-    <th data-title-text="{{$column.titleAlt(this) || $column.title(this)}}" ng-repeat="$column in $columns" ng-show="$column.show(this)" class="filter">
+    <th data-title-text="{{$column.titleAlt(this) || $column.title(this)}}" ng-repeat="$column in $columns | orderBy:'position'" ng-show="$column.show(this)" class="filter">
         <div ng-repeat="(name, filter) in $column.filter(this)">
             <div ng-if="filter.indexOf('/') !== -1" ng-include="filter"></div>
             <div ng-if="filter.indexOf('/') === -1" ng-include="'ng-table/filters/' + filter + '.html'"></div>

diff --git a/test/tableDynamicSpec.js b/test/tableDynamicSpec.js
@@ -343,4 +343,58 @@ describe('ng-table-dynamic', function() {
             }));
         });
     });
+
+    describe('sortable columns', function() {
+        var elm;
+        var getTitles = function () {
+            var thead = elm.find('thead');
+            var rows = thead.find('tr');
+            var titles = angular.element(rows[0]).find('th');
+
+            return angular.element(titles).text().trim().split(/\s+/g)
+        };
+
+        beforeEach(inject(function ($compile, $q, NgTableParams) {
+            elm = angular.element(
+                '<div>' +
+                '<table ng-table-dynamic="tableParams with cols" show-filter="true">' +
+                '<tr ng-repeat="user in $data">' +
+                "<td ng-repeat=\"col in $columns | orderBy:'position'\">{{user[col.field]}}</td>" +
+                '</tr>' +
+                '</table>' +
+                '</div>');
+
+            scope.tableParams = new NgTableParams({}, {});
+            scope.cols = [
+                {
+                    field: 'name',
+                    title: 'Name',
+                    position: 0
+                },
+                {
+                    field: 'age',
+                    title: 'Age',
+                    position: 1
+                },
+                {
+                    field: 'money',
+                    title: 'Money',
+                    position: 2
+                }
+            ];
+
+            $compile(elm)(scope);
+            scope.$digest();
+        }));
+
+        it('should sort table header ordered by position', function () {
+            expect(getTitles()).toEqual([ 'Name', 'Age', 'Money' ]);
+
+            scope.cols[0].position = 1;
+            scope.cols[1].position = 0;
+            scope.$digest();
+
+            expect(getTitles()).toEqual([ 'Age', 'Name', 'Money' ]);
+        });
+    });
 });