Merge branch 'new_widgets' into v2

bower.json

@@ -51,7 +51,8 @@
     "ionrangeslider": "~2.1.2",
     "angular-bootstrap": "~0.14.3",
     "angular-animate": "~1.4.8",
-    "textAngular": "~1.4.6"
+    "textAngular": "~1.4.6",
+    "angular-xeditable": "~0.1.9"
   },
   "overrides": {
     "amcharts": {

src/app/app.js

@@ -8,6 +8,7 @@ angular.module('BlurAdmin', [
   'ngTouch',
   'toastr',
   'smart-table',
+  "xeditable",
   'ui.slimscroll',
 
   'BlurAdmin.theme',

src/app/pages/form/inputs/widgets/select/selectpicker.directive.js

@@ -17,4 +17,6 @@
       }
     };
   }
+
+  
 })();

src/app/pages/tables/TablesPageCtrl.js

@@ -9,7 +9,10 @@
       .controller('TablesPageCtrl', TablesPageCtrl);
 
   /** @ngInject */
-  function TablesPageCtrl($scope) {
+  function TablesPageCtrl($scope, $filter) {
+
+    $scope.smartTablePageSize = 12;
+
     $scope.smartTableData = [
       {
         id: 1,
@@ -130,9 +133,371 @@
         username: '@krikor',
         email: 'krikor@yandex.ru',
         age: '32'
+      },
+      {
+        "id": 16,
+        "firstName": "Francisca",
+        "lastName": "Brady",
+        "username": "@Gibson",
+        "email": "franciscagibson@comtours.com",
+        "age": 11
+      },
+      {
+        "id": 17,
+        "firstName": "Tillman",
+        "lastName": "Figueroa",
+        "username": "@Snow",
+        "email": "tillmansnow@comtours.com",
+        "age": 34
+      },
+      {
+        "id": 18,
+        "firstName": "Jimenez",
+        "lastName": "Morris",
+        "username": "@Bryant",
+        "email": "jimenezbryant@comtours.com",
+        "age": 45
+      },
+      {
+        "id": 19,
+        "firstName": "Sandoval",
+        "lastName": "Jacobson",
+        "username": "@Mcbride",
+        "email": "sandovalmcbride@comtours.com",
+        "age": 32
+      },
+      {
+        "id": 20,
+        "firstName": "Griffin",
+        "lastName": "Torres",
+        "username": "@Charles",
+        "email": "griffincharles@comtours.com",
+        "age": 19
+      },
+      {
+        "id": 21,
+        "firstName": "Cora",
+        "lastName": "Parker",
+        "username": "@Caldwell",
+        "email": "coracaldwell@comtours.com",
+        "age": 27
+      },
+      {
+        "id": 22,
+        "firstName": "Cindy",
+        "lastName": "Bond",
+        "username": "@Velez",
+        "email": "cindyvelez@comtours.com",
+        "age": 24
+      },
+      {
+        "id": 23,
+        "firstName": "Frieda",
+        "lastName": "Tyson",
+        "username": "@Craig",
+        "email": "friedacraig@comtours.com",
+        "age": 45
+      },
+      {
+        "id": 24,
+        "firstName": "Cote",
+        "lastName": "Holcomb",
+        "username": "@Rowe",
+        "email": "coterowe@comtours.com",
+        "age": 20
+      },
+      {
+        "id": 25,
+        "firstName": "Trujillo",
+        "lastName": "Mejia",
+        "username": "@Valenzuela",
+        "email": "trujillovalenzuela@comtours.com",
+        "age": 16
+      },
+      {
+        "id": 26,
+        "firstName": "Pruitt",
+        "lastName": "Shepard",
+        "username": "@Sloan",
+        "email": "pruittsloan@comtours.com",
+        "age": 44
+      },
+      {
+        "id": 27,
+        "firstName": "Sutton",
+        "lastName": "Ortega",
+        "username": "@Black",
+        "email": "suttonblack@comtours.com",
+        "age": 42
+      },
+      {
+        "id": 28,
+        "firstName": "Marion",
+        "lastName": "Heath",
+        "username": "@Espinoza",
+        "email": "marionespinoza@comtours.com",
+        "age": 47
+      },
+      {
+        "id": 29,
+        "firstName": "Newman",
+        "lastName": "Hicks",
+        "username": "@Keith",
+        "email": "newmankeith@comtours.com",
+        "age": 15
+      },
+      {
+        "id": 30,
+        "firstName": "Boyle",
+        "lastName": "Larson",
+        "username": "@Summers",
+        "email": "boylesummers@comtours.com",
+        "age": 32
+      },
+      {
+        "id": 31,
+        "firstName": "Haynes",
+        "lastName": "Vinson",
+        "username": "@Mckenzie",
+        "email": "haynesmckenzie@comtours.com",
+        "age": 15
+      },
+      {
+        "id": 32,
+        "firstName": "Miller",
+        "lastName": "Acosta",
+        "username": "@Young",
+        "email": "milleryoung@comtours.com",
+        "age": 55
+      },
+      {
+        "id": 33,
+        "firstName": "Johnston",
+        "lastName": "Brown",
+        "username": "@Knight",
+        "email": "johnstonknight@comtours.com",
+        "age": 29
+      },
+      {
+        "id": 34,
+        "firstName": "Lena",
+        "lastName": "Pitts",
+        "username": "@Forbes",
+        "email": "lenaforbes@comtours.com",
+        "age": 25
+      },
+      {
+        "id": 35,
+        "firstName": "Terrie",
+        "lastName": "Kennedy",
+        "username": "@Branch",
+        "email": "terriebranch@comtours.com",
+        "age": 37
+      },
+      {
+        "id": 36,
+        "firstName": "Louise",
+        "lastName": "Aguirre",
+        "username": "@Kirby",
+        "email": "louisekirby@comtours.com",
+        "age": 44
+      },
+      {
+        "id": 37,
+        "firstName": "David",
+        "lastName": "Patton",
+        "username": "@Sanders",
+        "email": "davidsanders@comtours.com",
+        "age": 26
+      },
+      {
+        "id": 38,
+        "firstName": "Holden",
+        "lastName": "Barlow",
+        "username": "@Mckinney",
+        "email": "holdenmckinney@comtours.com",
+        "age": 11
+      },
+      {
+        "id": 39,
+        "firstName": "Baker",
+        "lastName": "Rivera",
+        "username": "@Montoya",
+        "email": "bakermontoya@comtours.com",
+        "age": 47
+      },
+      {
+        "id": 40,
+        "firstName": "Belinda",
+        "lastName": "Lloyd",
+        "username": "@Calderon",
+        "email": "belindacalderon@comtours.com",
+        "age": 21
+      },
+      {
+        "id": 41,
+        "firstName": "Pearson",
+        "lastName": "Patrick",
+        "username": "@Clements",
+        "email": "pearsonclements@comtours.com",
+        "age": 42
+      },
+      {
+        "id": 42,
+        "firstName": "Alyce",
+        "lastName": "Mckee",
+        "username": "@Daugherty",
+        "email": "alycedaugherty@comtours.com",
+        "age": 55
+      },
+      {
+        "id": 43,
+        "firstName": "Valencia",
+        "lastName": "Spence",
+        "username": "@Olsen",
+        "email": "valenciaolsen@comtours.com",
+        "age": 20
+      },
+      {
+        "id": 44,
+        "firstName": "Leach",
+        "lastName": "Holcomb",
+        "username": "@Humphrey",
+        "email": "leachhumphrey@comtours.com",
+        "age": 28
+      },
+      {
+        "id": 45,
+        "firstName": "Moss",
+        "lastName": "Baxter",
+        "username": "@Fitzpatrick",
+        "email": "mossfitzpatrick@comtours.com",
+        "age": 51
+      },
+      {
+        "id": 46,
+        "firstName": "Jeanne",
+        "lastName": "Cooke",
+        "username": "@Ward",
+        "email": "jeanneward@comtours.com",
+        "age": 59
+      },
+      {
+        "id": 47,
+        "firstName": "Wilma",
+        "lastName": "Briggs",
+        "username": "@Kidd",
+        "email": "wilmakidd@comtours.com",
+        "age": 53
+      },
+      {
+        "id": 48,
+        "firstName": "Beatrice",
+        "lastName": "Perry",
+        "username": "@Gilbert",
+        "email": "beatricegilbert@comtours.com",
+        "age": 39
+      },
+      {
+        "id": 49,
+        "firstName": "Whitaker",
+        "lastName": "Hyde",
+        "username": "@Mcdonald",
+        "email": "whitakermcdonald@comtours.com",
+        "age": 35
+      },
+      {
+        "id": 50,
+        "firstName": "Rebekah",
+        "lastName": "Duran",
+        "username": "@Gross",
+        "email": "rebekahgross@comtours.com",
+        "age": 40
+      },
+      {
+        "id": 51,
+        "firstName": "Earline",
+        "lastName": "Mayer",
+        "username": "@Woodward",
+        "email": "earlinewoodward@comtours.com",
+        "age": 52
+      },
+      {
+        "id": 52,
+        "firstName": "Moran",
+        "lastName": "Baxter",
+        "username": "@Johns",
+        "email": "moranjohns@comtours.com",
+        "age": 20
+      },
+      {
+        "id": 53,
+        "firstName": "Nanette",
+        "lastName": "Hubbard",
+        "username": "@Cooke",
+        "email": "nanettecooke@comtours.com",
+        "age": 55
+      },
+      {
+        "id": 54,
+        "firstName": "Dalton",
+        "lastName": "Walker",
+        "username": "@Hendricks",
+        "email": "daltonhendricks@comtours.com",
+        "age": 25
+      },
+      {
+        "id": 55,
+        "firstName": "Bennett",
+        "lastName": "Blake",
+        "username": "@Pena",
+        "email": "bennettpena@comtours.com",
+        "age": 13
+      },
+      {
+        "id": 56,
+        "firstName": "Kellie",
+        "lastName": "Horton",
+        "username": "@Weiss",
+        "email": "kellieweiss@comtours.com",
+        "age": 48
+      },
+      {
+        "id": 57,
+        "firstName": "Hobbs",
+        "lastName": "Talley",
+        "username": "@Sanford",
+        "email": "hobbssanford@comtours.com",
+        "age": 28
+      },
+      {
+        "id": 58,
+        "firstName": "Mcguire",
+        "lastName": "Donaldson",
+        "username": "@Roman",
+        "email": "mcguireroman@comtours.com",
+        "age": 38
+      },
+      {
+        "id": 59,
+        "firstName": "Rodriquez",
+        "lastName": "Saunders",
+        "username": "@Harper",
+        "email": "rodriquezharper@comtours.com",
+        "age": 20
+      },
+      {
+        "id": 60,
+        "firstName": "Lou",
+        "lastName": "Conner",
+        "username": "@Sanchez",
+        "email": "lousanchez@comtours.com",
+        "age": 16
       }
     ];
 
+    $scope.editableTableData = $scope.smartTableData.slice(0, 36);
+
     $scope.peopleTableData = [
       {
         id: 1,
@@ -228,6 +593,82 @@
         isPercentUp: false
       }
     ];
+
+    $scope.users = [
+      {
+        "id": 1,
+        "name": "Esther Vang",
+        "status": 4,
+        "group": 3
+      },
+      {
+        "id": 2,
+        "name": "Leah Freeman",
+        "status": 3,
+        "group": 1
+      },
+      {
+        "id": 3,
+        "name": "Mathews Simpson",
+        "status": 3,
+        "group": 2
+      },
+      {
+        "id": 4,
+        "name": "Buckley Hopkins",
+        "group": 4
+      },
+      {
+        "id": 5,
+        "name": "Cheryl Schwartz",
+        "status": 4,
+        "group": 2
+      }
+    ];
+
+    $scope.statuses = [
+      {value: 1, text: 'Good'},
+      {value: 2, text: 'Awesome'},
+      {value: 3, text: 'Excellent'},
+    ];
+
+    $scope.groups = [
+      {id: 1, text: 'user'},
+      {id: 2, text: 'customer'},
+      {id: 3, text: 'vip'},
+      {id: 4, text: 'admin'}
+    ];
+
+    $scope.showGroup = function(user) {
+      if(user.group && $scope.groups.length) {
+        var selected = $filter('filter')($scope.groups, {id: user.group});
+        return selected.length ? selected[0].text : 'Not set';
+      } else return 'Not set'
+    };
+
+    $scope.showStatus = function(user) {
+      var selected = [];
+      if(user.status) {
+        selected = $filter('filter')($scope.statuses, {value: user.status});
+      }
+      return selected.length ? selected[0].text : 'Not set';
+    };
+
+
+    $scope.removeUser = function(index) {
+      $scope.users.splice(index, 1);
+    };
+
+    $scope.addUser = function() {
+      $scope.inserted = {
+        id: $scope.users.length+1,
+        name: '',
+        status: null,
+        group: null
+      };
+      $scope.users.push($scope.inserted);
+    };
+
   }
 
 })();

src/app/pages/tables/basic/tables.html

@@ -0,0 +1,40 @@
+<div class="widgets">
+
+  <div class="row">
+    <div class="col-lg-6 col-md-12">
+      <blur-panel title="Hover Rows" class-container="with-scroll table-panel">
+        <div include-with-scope="app/pages/tables/widgets/hoverRows.html"></div>
+      </blur-panel>
+    </div>
+    <div class="col-lg-6 col-md-12">
+      <blur-panel title="Bordered Table" class-container="with-scroll table-panel">
+        <div include-with-scope="app/pages/tables/widgets/borderedTable.html"></div>
+      </blur-panel>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6 col-md-12">
+      <blur-panel title="Condensed Table" class-container="with-scroll table-panel">
+        <div include-with-scope="app/pages/tables/widgets/condensedTable.html"></div>
+      </blur-panel>
+    </div>
+    <div class="col-lg-6 col-md-12">
+      <blur-panel title="Striped Rows" class-container="with-scroll table-panel">
+        <div include-with-scope="app/pages/tables/widgets/stripedRows.html"></div>
+      </blur-panel>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6 col-md-12">
+      <blur-panel title="Contextual Table" class-container="with-scroll table-panel">
+        <div include-with-scope="app/pages/tables/widgets/contextualTable.html"></div>
+      </blur-panel>
+    </div>
+    <div class="col-lg-6 col-md-12">
+      <blur-panel title="Responsive Table" class-container="with-scroll table-panel">
+        <div include-with-scope="app/pages/tables/widgets/responsiveTable.html"></div>
+      </blur-panel>
+    </div>
+  </div>
+
+</div>

src/app/pages/tables/smart/tables.html

@@ -0,0 +1,27 @@
+<div class="widgets">
+
+  <div class="row">
+    <div class="col-md-12">
+      <blur-panel title="Smart Table With Filtering, Sorting And Pagination" class-container="with-scroll">
+        <div include-with-scope="app/pages/tables/widgets/smartTable.html"></div>
+      </blur-panel>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-12">
+      <blur-panel title="Editable Cells" class-container="with-scroll">
+        <div include-with-scope="app/pages/tables/widgets/editableTable.html"></div>
+      </blur-panel>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-12">
+      <blur-panel title="Editable Rows" class-container="with-scroll">
+        <div include-with-scope="app/pages/tables/widgets/editableRowTable.html"></div>
+      </blur-panel>
+    </div>
+  </div>
+
+</div>

src/app/pages/tables/tables.module.js

@@ -6,16 +6,24 @@
   'use strict';
 
   angular.module('BlurAdmin.pages.tables', [])
-      .config(routeConfig);
+    .config(routeConfig);
 
   /** @ngInject */
-  function routeConfig($stateProvider) {
+  function routeConfig($stateProvider, $urlRouterProvider) {
     $stateProvider
-        .state('tables', {
-          url: '/tables',
-          templateUrl: 'app/pages/tables/tables.html',
-          controller: 'TablesPageCtrl'
-        });
+      .state('tables', {
+        url: '/tables',
+        template : '<ui-view></ui-view>',
+        abstract: true,
+        controller: 'TablesPageCtrl'
+      }).state('tables.basic', {
+        url: '/basic',
+        templateUrl: 'app/pages/tables/basic/tables.html'
+      }).state('tables.smart', {
+        url: '/smart',
+        templateUrl: 'app/pages/tables/smart/tables.html'
+      });
+      $urlRouterProvider.when('/tables','/tables/basic');
   }
 
 })();

src/app/pages/tables/widgets/contextualTable.html

@@ -0,0 +1,51 @@
+<table class="table table-bordered">
+  <tr>
+    <th>#</th>
+    <th>First Name</th>
+    <th>Last Name</th>
+    <th>Username</th>
+    <th>Email</th>
+    <th>Age</th>
+  </tr>
+  <tr class="active">
+    <td>1</td>
+    <td>Mark</td>
+    <td>Otto</td>
+    <td>@mdo</td>
+    <td><a class="email-link " ng-href="mailto:mdo@gmail.com" href="mailto:mdo@gmail.com">mdo@gmail.com</a></td>
+    <td>28</td>
+  </tr>
+  <tr class="success">
+    <td>2</td>
+    <td>Jacob</td>
+    <td>Thornton</td>
+    <td>@fat</td>
+    <td><a class="email-link " ng-href="mailto:fat@yandex.ru" href="mailto:fat@yandex.ru">fat@yandex.ru</a></td>
+    <td>45</td>
+  </tr>
+  <tr class="warning">
+    <td>3</td>
+    <td>Larry</td>
+    <td>Bird</td>
+    <td>@twitter</td>
+    <td><a class="email-link " ng-href="mailto:twitter@outlook.com" href="mailto:twitter@outlook.com">twitter@outlook.com</a>
+    </td>
+    <td>18</td>
+  </tr>
+  <tr class="danger">
+    <td>4</td>
+    <td>John</td>
+    <td>Snow</td>
+    <td>@snow</td>
+    <td><a class="email-link" ng-href="mailto:snow@gmail.com" href="mailto:snow@gmail.com">snow@gmail.com</a></td>
+    <td>20</td>
+  </tr>
+  <tr class="info">
+    <td>5</td>
+    <td>Jack</td>
+    <td>Sparrow</td>
+    <td>@jack</td>
+    <td><a class="email-link" ng-href="mailto:jack@yandex.ru" href="mailto:jack@yandex.ru">jack@yandex.ru</a></td>
+    <td>30</td>
+  </tr>
+</table>

src/app/pages/tables/widgets/editableRowTable.html

@@ -0,0 +1,45 @@
+<div class="add-row-editable-table">
+  <button class="btn btn-primary" ng-click="addUser()">Add row</button>
+</div>
+<table class="table table-bordered table-hover table-condensed">
+  <tr>
+    <td>Name</td>
+    <td>Status</td>
+    <td>Group</td>
+    <td>Edit</td>
+  </tr>
+  <tr ng-repeat="user in users" class="editable-row">
+    <td>
+        <span editable-text="user.name" e-name="name" e-form="rowform" e-required>
+          {{ user.name || 'empty' }}
+        </span>
+    </td>
+    <td class="select-td">
+        <span editable-select="user.status" e-name="status" e-form="rowform" e-selectpicker
+              e-ng-options="s.value as s.text for s in statuses">
+          {{ showStatus(user) }}
+        </span>
+    </td>
+    <td class="select-td">
+        <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-selectpicker
+              e-ng-options="g.id as g.text for g in groups">
+          {{ showGroup(user) }}
+        </span>
+    </td>
+    <td>
+      <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline text-center"
+            shown="inserted == user">
+        <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary editable-table-button btn-xs">
+          Save
+        </button>
+        <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default editable-table-button btn-xs">
+          Cancel
+        </button>
+      </form>
+      <div class="buttons text-center" ng-show="!rowform.$visible">
+        <button class="btn btn-primary editable-table-button btn-xs" ng-click="rowform.$show()">Edit</button>
+        <button class="btn btn-danger editable-table-button btn-xs" ng-click="removeUser($index)">Delete</button>
+      </div>
+    </td>
+  </tr>
+</table>

src/app/pages/tables/widgets/editableTable.html

@@ -0,0 +1,27 @@
+<div class="horizontal-scroll">
+  <table class="table table-hover" st-table="editableTableData">
+    <tr class="sortable header-row">
+      <th class="table-id" st-sort="id" st-sort-default="true">#</th>
+      <th st-sort="firstName">First Name</th>
+      <th st-sort="lastName">Last Name</th>
+      <th st-sort="username">Username</th>
+      <th st-sort="email">Email</th>
+      <th st-sort="age">Age</th>
+    </tr>
+    <tr ng-repeat="item in editableTableData" class="editable-tr-wrap">
+      <td class="table-id">{{item.id}}</td>
+      <td><span editable-text="item.firstName" blur="cancel">{{item.firstName}}</span></td>
+      <td><span editable-text="item.lastName" blur="cancel">{{item.lastName}}</span></td>
+      <td><span editable-text="item.username" blur="cancel">{{item.username}}</span></td>
+      <td><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></td>
+      <td><span editable-text="item.age" blur="cancel">{{item.age}}</span></td>
+    </tr>
+    <tfoot>
+    <tr>
+      <td colspan="6" class="text-center">
+        <div st-pagination="" st-items-by-page="12" st-displayed-pages="5"></div>
+      </td>
+    </tr>
+    </tfoot>
+  </table>
+</div>

src/app/pages/tables/widgets/responsiveTable.html

@@ -0,0 +1,53 @@
+<div class="table-responsive">
+  <table class="table">
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+      <th>Email</th>
+      <th>Age</th>
+    </tr>
+    <tr>
+      <td>1</td>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+      <td><a class="email-link " ng-href="mailto:mdo@gmail.com" href="mailto:mdo@gmail.com">mdo@gmail.com</a></td>
+      <td>28</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+      <td><a class="email-link " ng-href="mailto:fat@yandex.ru" href="mailto:fat@yandex.ru">fat@yandex.ru</a></td>
+      <td>45</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Larry</td>
+      <td>Bird</td>
+      <td>@twitter</td>
+      <td><a class="email-link " ng-href="mailto:twitter@outlook.com" href="mailto:twitter@outlook.com">twitter@outlook.com</a>
+      </td>
+      <td>18</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>John</td>
+      <td>Snow</td>
+      <td>@snow</td>
+      <td><a class="email-link" ng-href="mailto:snow@gmail.com" href="mailto:snow@gmail.com">snow@gmail.com</a></td>
+      <td>20</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Jack</td>
+      <td>Sparrow</td>
+      <td>@jack</td>
+      <td><a class="email-link" ng-href="mailto:jack@yandex.ru" href="mailto:jack@yandex.ru">jack@yandex.ru</a></td>
+      <td>30</td>
+    </tr>
+  </table>
+</div>

src/app/pages/tables/widgets/smartTable.html

@@ -1,8 +1,17 @@
 <div class="horizontal-scroll">
+  <div class="form-group select-page-size-wrap ">
+    <select class="form-control" data-live-search="true"  title="Rows on page" selectpicker>
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
   <table class="table" st-table="smartTableData">
     <thead>
-    <tr class="sortable">
-      <th class="table-id" st-sort="id">#</th>
+    <tr class="sortable ">
+      <th class="table-id" st-sort="id" st-sort-default="true">#</th>
       <th st-sort="firstName">First Name</th>
       <th st-sort="lastName">Last Name</th>
       <th st-sort="username">Username</th>
@@ -11,11 +20,16 @@
     </tr>
     <tr>
       <th></th>
-      <th><input st-search="firstName" placeholder="Search First Name" class="input-sm form-control search-input" type="search"/></th>
-      <th><input st-search="lastName" placeholder="Search Last Name" class="input-sm form-control search-input" type="search"/></th>
-      <th><input st-search="username" placeholder="Search Username" class="input-sm form-control search-input" type="search"/></th>
-      <th><input st-search="email" placeholder="Search Email" class="input-sm form-control search-input" type="search"/></th>
-      <th><input st-search="age" placeholder="Search Age" class="input-sm form-control search-input" type="search"/></th>
+      <th><input st-search="firstName" placeholder="Search First Name" class="input-sm form-control search-input"
+                 type="search"/></th>
+      <th><input st-search="lastName" placeholder="Search Last Name" class="input-sm form-control search-input"
+                 type="search"/></th>
+      <th><input st-search="username" placeholder="Search Username" class="input-sm form-control search-input"
+                 type="search"/></th>
+      <th><input st-search="email" placeholder="Search Email" class="input-sm form-control search-input" type="search"/>
+      </th>
+      <th><input st-search="age" placeholder="Search Age" class="input-sm form-control search-input" type="search"/>
+      </th>
     </tr>
     </thead>
     <tbody>
@@ -31,7 +45,7 @@
     <tfoot>
     <tr>
       <td colspan="6" class="text-center">
-        <div st-pagination="" st-items-by-page="5" st-displayed-pages="5"></div>
+        <div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="5"></div>
       </td>
     </tr>
     </tfoot>

src/app/theme/components/contentTop/contentTop.directive.js

@@ -33,7 +33,8 @@
           '/mail': 'Mail Box',
           '/modals': 'Modals',
           '/profile': 'User Profile',
-          '/tables': 'Tables',
+          '/tables/basic': 'Basic Tables',
+          '/tables/smart': 'Smart Tables',
           '/tree': 'Tree View',
           '/slider': 'Sliders',
           '/typography': 'Typography',

src/app/theme/components/sidebar/SidebarCtrl.js

@@ -6,7 +6,7 @@
   'use strict';
 
   angular.module('BlurAdmin.theme.components')
-      .controller('SidebarCtrl', SidebarCtrl);
+    .controller('SidebarCtrl', SidebarCtrl);
 
   /** @ngInject */
   function SidebarCtrl($scope, $timeout, $location, $rootScope, layoutSizes) {
@@ -41,7 +41,16 @@
       {
         title: 'Tables',
         icon: 'ion-grid',
-        root: '#/tables'
+        subMenu: [
+          {
+            title: "Basic Tables",
+            root: '#/tables/basic'
+          },
+          {
+            title: "Smart Tables",
+            root: '#/tables/smart'
+          }
+        ]
       },
       {
         title: 'Form Elements',
@@ -155,16 +164,16 @@
       },
       {
         title: 'Menu Level 1',
-        icon : 'ion-ios-more',
+        icon: 'ion-ios-more',
         subMenu: [
           {
-            title : 'Menu Level 1.1'
+            title: 'Menu Level 1.1'
           },
           {
-            title : 'Menu Level 1.2',
+            title: 'Menu Level 1.2',
             subMenu: [
               {
-                title : 'Menu Level 1.2.1'
+                title: 'Menu Level 1.2.1'
               }
             ]
           }
@@ -213,7 +222,7 @@
       $rootScope.$isMenuCollapsed = true;
     };
 
-    $rootScope.$watch('$isMenuCollapsed', function(newValue) {
+    $rootScope.$watch('$isMenuCollapsed', function (newValue) {
       if (!newValue && !$scope.selectElemTop) {
         changeSelectElemTopValue();
       }

src/app/theme/theme.run.js

@@ -9,7 +9,7 @@
       .run(themeRun);
 
   /** @ngInject */
-  function themeRun($timeout, $rootScope, layoutSizes) {
+  function themeRun($timeout, $rootScope, layoutSizes, editableOptions) {
     $timeout(function () {
       $rootScope.$pageFinishedLoading = true;
     }, 1000);
@@ -19,6 +19,8 @@
     }, 4000);
 
     $rootScope.$isMenuCollapsed = window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
+
+    editableOptions.theme = 'bs3';
   }
 
 })();

src/sass/theme/_table.scss

@@ -54,6 +54,57 @@
   }
 }
 
+.table-panel {
+  height: 280px;
+}
+
+.editable-tr-wrap {
+  .editable-wrap {
+    vertical-align: super;
+  }
+  input.editable-input {
+    width: 110px;
+  }
+  td {
+    width: 20%;
+  }
+}
+
+.editable-table-button {
+  width: 70px;
+}
+
+.add-row-editable-table {
+  margin-bottom: 10px;
+}
+
+.select-page-size-wrap{
+  width: 150px;
+}
+
+.table .header-row th {
+  vertical-align: middle;
+  padding: 0 8px;
+}
+
+tr.editable-row {
+  input.form-control {
+    vertical-align: middle;
+  }
+}
+
+.select-td .editable-select {
+  margin-bottom: 1px;
+}
+
+@media screen and (max-width: 1199px) {
+  .editable-tr-wrap {
+    .editable-wrap {
+      vertical-align: middle;
+    }
+  }
+}
+
 .browser-icons {
   width: 41px;
 }
@@ -61,6 +112,7 @@
 .st-sort-ascent, .st-sort-descent {
   position: relative;
 }
+
 .st-sort-ascent:after, .st-sort-descent:after {
   width: 0;
   height: 0;
@@ -72,7 +124,7 @@
 }
 
 .st-sort-descent:after {
-  transform:rotate(-180deg);
+  transform: rotate(-180deg);
   margin-bottom: -2px;
 }
 
@@ -111,15 +163,16 @@ input.search-input {
   max-height: 214px;
 }
 
-.pagination>li>a, .pagination>li>span {
+.pagination > li > a, .pagination > li > span {
   background: transparent;
 }
-.pagination>li:first-child>a, .pagination>li:first-child>span {
-   border-top-left-radius: 0px;
-   border-bottom-left-radius: 0px;
+
+.pagination > li:first-child > a, .pagination > li:first-child > span {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
 }
 
-.pagination>li:last-child>a, .pagination>li:last-child>span {
+.pagination > li:last-child > a, .pagination > li:last-child > span {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }