Added DataTable page

Added a copy of table to make it data table.

Author: hi

src/app/components/services/NavService.js

@@ -23,6 +23,11 @@
         name: 'Table',
         icon: 'view_module',
         sref: '.table'
+      },
+      {
+        name: 'Data Table',
+        icon: 'view_module',
+        sref: '.data-table'
       }
     ];
 

src/app/controllers/DataTableController.js

@@ -0,0 +1,22 @@
+(function(){
+
+  angular
+    .module('app')
+    .controller('DataTableController', [
+      'tableService',
+      TableController
+    ]);
+
+  function TableController(tableService) {
+    var vm = this;
+
+    vm.tableData = [];
+
+    tableService
+      .loadAllItems()
+      .then(function(tableData) {
+        vm.tableData = [].concat(tableData);
+      });
+  }
+
+})();

src/app/index.js

@@ -37,6 +37,15 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
         data: {
           title: 'Table'
         }
+      })
+      .state('home.data-table', {
+        url: '/data-table',
+        controller: 'DataTableController',
+        controllerAs: 'vm',
+        templateUrl: 'app/views/data-table.html',
+        data: {
+          title: 'Table'
+        }
       });
 
     $urlRouterProvider.otherwise('/dashboard');

src/app/views/data-table.html

@@ -0,0 +1,26 @@
+<!-- TODO: Replace table to table component when https://github.com/angular/material/issues/796 will closed -->
+<div class="table-responsive-vertical md-whiteframe-z1">
+    <table id="table" class="table table-hover table-bordered">
+        <thead>
+        <tr>
+            <th>#</th>
+            <th>Issue</th>
+            <th>Status</th>
+            <th>Progress</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="data in vm.tableData track by $index">
+            <td data-title="ID">{{$index + 1}}</td>
+            <td data-title="Issue">{{data.issue}}</td>
+            <td data-title="Status">{{data.status}}</td>
+            <td data-title="Progress">
+                <md-progress-linear class="table-progress {{data.class}}"
+                                    md-mode="determinate"
+                                    value={{data.progress}}>
+                </md-progress-linear>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>