From 37c93bf1cb8c21afb75777fffe42a3ade3045938 Mon Sep 17 00:00:00 2001
From: Vitalii Savchuk <esvit666@gmail.com>
Date: Sat, 16 Nov 2013 22:06:47 +0200
Subject: [PATCH] add example of dynamic grouping

---
 examples/demo21.html | 118 ++++++++++++++++++++++++++-----------------
 1 file changed, 71 insertions(+), 47 deletions(-)
diff --git a/examples/demo21.html b/examples/demo21.html
index 655343cf..a096f5db 100644
--- a/examples/demo21.html
+++ b/examples/demo21.html
@@ -18,74 +18,98 @@
 </head>
 <body ng-app="main">
 
-<h1>Dynamic columns</h1>
+<h1>Dynamic grouping</h1>
 
 <div ng-controller="DemoCtrl">
 
-    Columns:
-    <label class="checkbox" ng-repeat="column in columns">
-        <input type="checkbox" ng-model="column.visible" /> {{column.title}}
-    </label>
+    Group by:
+    <select ng-model="groupby">
+        <option value="name">Name</option>
+        <option value="age">Age</option>
+        <option value="role">Role</option>
+        <option value="date">Etc</option>
+    </select>
+    <br>
+    Grouped by: <b>{{groupby}}</b>
 
-    <table ng-table="tableParams" show-filter="true" class="table">
-        <tr>
-            <th ng-repeat="column in columns" ng-show="column.visible"
-                class="text-center sortable" ng-class="{
-                    'sort-asc': tableParams.isSortBy(column.field, 'asc'),
-                    'sort-desc': tableParams.isSortBy(column.field, 'desc')
-                  }"
-                ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
-                {{column.title}}
-            </th>
+    <table ng-table="tableParams" class="table">
+        <tbody ng-repeat="group in $groups">
+        <tr class="ng-table-group">
+            <td colspan="{{$columns.length}}">
+                <a href="" ng-click="group.$hideRows = !group.$hideRows">
+                    <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
+                    <strong>{{ group.value }}</strong>
+                </a>
+            </td>
         </tr>
-        <tr ng-repeat="user in $data">
-            <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field">
-                {{user[column.field]}}
+        <tr ng-hide="group.$hideRows" ng-repeat="user in group.data">
+            <td sortable="name" data-title="'Name'">
+                {{user.name}}
+            </td>
+            <td sortable="age" data-title="'Age'">
+                {{user.age}}
+            </td>
+            <td sortable="name" data-title="'Role'">
+                {{user.role}}
+            </td>
+            <td sortable="name" data-title="'Etc'">
+                {{user.date}}
             </td>
         </tr>
+        </tbody>
     </table>
 
     <script>
         var app = angular.module('main', ['ngTable']).
                 controller('DemoCtrl', function($scope, $filter, ngTableParams) {
-                    var data = [{name: "Moroni", age: 50},
-                        {name: "Tiancum", age: 43},
-                        {name: "Jacob", age: 27},
-                        {name: "Nephi", age: 29},
-                        {name: "Enos", age: 34},
-                        {name: "Tiancum", age: 43},
-                        {name: "Jacob", age: 27},
-                        {name: "Nephi", age: 29},
-                        {name: "Enos", age: 34},
-                        {name: "Tiancum", age: 43},
-                        {name: "Jacob", age: 27},
-                        {name: "Nephi", age: 29},
-                        {name: "Enos", age: 34},
-                        {name: "Tiancum", age: 43},
-                        {name: "Jacob", age: 27},
-                        {name: "Nephi", age: 29},
-                        {name: "Enos", age: 34}];
-                    $scope.columns = [
-                        { title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } },
-                        { title: 'Age', field: 'age', visible: true }
-                    ];
+                    $scope.rows = [{name: "Moroni", age: 50, role: 'Administrator', date: '00/00/01'},
+                        {name: "Tiancum", age: 43, role: 'Administrator', date: '00/00/01'},
+                        {name: "Jacob", age: 27, role: 'Administrator', date: '00/00/01'},
+                        {name: "Nephi", age: 29, role: 'Moderator', date: '00/00/01'},
+                        {name: "Enos", age: 34, role: 'User', date: '00/00/01'},
+                        {name: "Tiancum", age: 43, role: 'User', date: '00/00/01'},
+                        {name: "Jacob", age: 27, role: 'User', date: '00/00/01'},
+                        {name: "Nephi", age: 29, role: 'Moderator', date: '00/00/01'},
+                        {name: "Enos", age: 34, role: 'User', date: '00/00/01'},
+                        {name: "Tiancum", age: 43, role: 'Moderator', date: '00/00/01'},
+                        {name: "Jacob", age: 27, role: 'User', date: '00/00/01'},
+                        {name: "Nephi", age: 29, role: 'User', date: '00/00/01'},
+                        {name: "Enos", age: 34, role: 'Moderator', date: '00/00/01'},
+                        {name: "Tiancum", age: 43, role: 'User', date: '00/00/01'},
+                        {name: "Jacob", age: 27, role: 'User', date: '00/00/01'},
+                        {name: "Nephi", age: 29, role: 'User', date: '00/00/01'},
+                        {name: "Enos", age: 34, role: 'User', date: '00/00/01'},
+                        {name: "Micah", age: 29, role: 'Moderator', date: '00/00/01'},
+                        {name: "Viviane", age: 34, role: 'Moderator', date: '00/00/01'},
+                        {name: "Marconi", age: 43, role: 'User', date: '00/00/01'},
+                        {name: "Leonan", age: 27, role: 'Administrator', date: '00/00/02'},
+                        {name: "Arnaldo", age: 29, role: 'User', date: '00/00/02'},
+                        {name: "Zuleide", age: 34, role: 'Moderator', date: '00/00/02'}];
+
+                    $scope.groupby = 'role'; //Default order IF null get table without groups(not possible ?)
+
+                    //dinamic grouping
                     $scope.tableParams = new ngTableParams({
                         page: 1,            // show first page
-                        count: 10,          // count per page
-                        filter: {
-                            name: 'M'       // initial filter
-                        }
+                        count: 100          // count per page
                     }, {
-                        total: data.length, // length of data
+                        groupBy: $scope.groupby,
+                        total: function () { return $scope.rows.length; }, // length of data
                         getData: function($defer, params) {
-                            // use build-in angular filter
                             var orderedData = params.sorting() ?
-                                    $filter('orderBy')(data, params.orderBy()) :
-                                    data;
+                                    $filter('orderBy')($scope.rows, $scope.tableParams.orderBy()) :   $scope.rows;
 
                             $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                         }
                     });
+
+                    $scope.$watch('groupby', function(value){
+                        $scope.tableParams.settings().groupBy = value;
+                        console.log('Scope Value', $scope.groupby);
+                        console.log('Watch value', this.last);
+                        console.log('new table',$scope.tableParams);
+                        $scope.tableParams.reload();
+                    });
                 })
     </script>
 

+ + + {{ group.value }} + +
- {{user[column.field]}} +
+ {{user.name}} +	+ {{user.age}} +	+ {{user.role}} +	+ {{user.date}}