angular-data-grid · AlexanderZhukCoherent · Dec 28, 2015 · Dec 28, 2015 · Dec 28, 2015
diff --git a/README.md b/README.md
@@ -1,8 +1,14 @@
 #Angular Data Grid
 
+
 Light and flexible Data Grid for AngularJS applications. 
 
-You can use Data Grid module to easily display data in grids with built-in sorting, outer filters and url-synchronization. To use it, you must add grid-data directive to element and pass 2 required parameters grid-options and grid-actions.
+```
+var s = "JavaScript syntax highlighting";
+alert(s);
+```
+
+You can use ```data-trigger``` Data Grid module to easily display data in grids with built-in sorting, outer filters and url-synchronization. To use it, you must add grid-data directive to element and pass 2 required parameters grid-options and grid-actions.
 
 grid-options : Name of object in your controller with start options for grid. You must create this object with at least 1 required parameter - data
 

diff --git a/demo/demo.css b/demo/demo.css
@@ -1,3 +1,7 @@
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
 :focus {
   outline: none; }
 
@@ -25,19 +29,6 @@
   .pagination a .md-ripple-container {
     border-radius: 2px; }
 
-.pagination-prev a,
-.pagination-next a,
-.pagination-first a,
-.pagination-last a {
-  padding: 3px 5px; }
-
-.pagination-prev svg,
-.pagination-next svg,
-.pagination-first svg,
-.pagination-last svg {
-  width: 24px;
-  height: 24px; }
-
 .pagination-none-svg svg {
   display: none !important; }
 
@@ -63,12 +54,12 @@
     .pagination .active a {
       color: #fff; }
 
-.grid-data-table td {
+.table td {
   border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
   padding: 12px; }
 
-.grid-data-table th {
-  padding: 0 12px;
+.table th {
+  padding: 12px;
   border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
 
 th.sortable {

diff --git a/demo/demoApp.js b/demo/demoApp.js
@@ -1,4 +1,4 @@
-angular.module('myApp', ['dataGrid', 'ui.bootstrap.pagination'])
+angular.module('myApp', ['dataGrid', 'pagination'])
     .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
 
         $scope.getData = function () {

diff --git a/dist/dataGrid.css b/dist/dataGrid.css
@@ -1,3 +1,7 @@
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
 :focus {
   outline: none; }
 
@@ -25,19 +29,6 @@
   .pagination a .md-ripple-container {
     border-radius: 2px; }
 
-.pagination-prev a,
-.pagination-next a,
-.pagination-first a,
-.pagination-last a {
-  padding: 3px 5px; }
-
-.pagination-prev svg,
-.pagination-next svg,
-.pagination-first svg,
-.pagination-last svg {
-  width: 24px;
-  height: 24px; }
-
 .pagination-none-svg svg {
   display: none !important; }
 
@@ -63,12 +54,12 @@
     .pagination .active a {
       color: #fff; }
 
-.grid-data-table td {
+.table td {
   border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
   padding: 12px; }
 
-.grid-data-table th {
-  padding: 0 12px;
+.table th {
+  padding: 12px;
   border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
 
 th.sortable {

diff --git a/dist/dataGrid.js b/dist/dataGrid.js
@@ -1,4 +1,5 @@
-angular.module('dataGrid', [])
+angular
+    .module('dataGrid', [])
     .filter('startFrom', function () {
         return function (input, start) {
             if (input) {
@@ -403,7 +404,6 @@ angular.module('dataGrid', [])
         }
     });
 
-
 function deepFind(obj, path) {
     var paths = path.split('.'),
         current = obj,

diff --git a/dist/pagination.js b/dist/pagination.js
@@ -1,9 +1,6 @@
-angular.module('ui.bootstrap.paging', [])
-    /**
-     * Helper internal service for generating common controller code between the
-     * pager and pagination components
-     */
-    .factory('uibPaging', ['$parse', function ($parse) {
+angular
+    .module('paging', [])
+    .factory('paging', ['$parse', function ($parse) {
         return {
             create: function (ctrl, $scope, $attrs) {
                 ctrl.setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
@@ -84,18 +81,19 @@ angular.module('ui.bootstrap.paging', [])
         };
     }]);
 
-angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
-    .controller('UibPaginationController', ['$scope', '$attrs', '$parse', 'uibPaging', 'uibPaginationConfig', function ($scope, $attrs, $parse, uibPaging, uibPaginationConfig) {
+angular
+    .module('pagination', ['paging'])
+    .controller('PaginationController', ['$scope', '$attrs', '$parse', 'paging', 'paginationConfig', function ($scope, $attrs, $parse, paging, paginationConfig) {
         var ctrl = this;
         // Setup configuration parameters
-        var maxSize = angular.isDefined($attrs.maxSize) ? $scope.$parent.$eval($attrs.maxSize) : uibPaginationConfig.maxSize,
-            rotate = angular.isDefined($attrs.rotate) ? $scope.$parent.$eval($attrs.rotate) : uibPaginationConfig.rotate,
-            forceEllipses = angular.isDefined($attrs.forceEllipses) ? $scope.$parent.$eval($attrs.forceEllipses) : uibPaginationConfig.forceEllipses,
-            boundaryLinkNumbers = angular.isDefined($attrs.boundaryLinkNumbers) ? $scope.$parent.$eval($attrs.boundaryLinkNumbers) : uibPaginationConfig.boundaryLinkNumbers;
-        $scope.boundaryLinks = angular.isDefined($attrs.boundaryLinks) ? $scope.$parent.$eval($attrs.boundaryLinks) : uibPaginationConfig.boundaryLinks;
-        $scope.directionLinks = angular.isDefined($attrs.directionLinks) ? $scope.$parent.$eval($attrs.directionLinks) : uibPaginationConfig.directionLinks;
+        var maxSize = angular.isDefined($attrs.maxSize) ? $scope.$parent.$eval($attrs.maxSize) : paginationConfig.maxSize,
+            rotate = angular.isDefined($attrs.rotate) ? $scope.$parent.$eval($attrs.rotate) : paginationConfig.rotate,
+            forceEllipses = angular.isDefined($attrs.forceEllipses) ? $scope.$parent.$eval($attrs.forceEllipses) : paginationConfig.forceEllipses,
+            boundaryLinkNumbers = angular.isDefined($attrs.boundaryLinkNumbers) ? $scope.$parent.$eval($attrs.boundaryLinkNumbers) : paginationConfig.boundaryLinkNumbers;
+        $scope.boundaryLinks = angular.isDefined($attrs.boundaryLinks) ? $scope.$parent.$eval($attrs.boundaryLinks) : paginationConfig.boundaryLinks;
+        $scope.directionLinks = angular.isDefined($attrs.directionLinks) ? $scope.$parent.$eval($attrs.directionLinks) : paginationConfig.directionLinks;
 
-        uibPaging.create(this, $scope, $attrs);
+        paging.create(this, $scope, $attrs);
 
         if ($attrs.maxSize) {
             $scope.$parent.$watch($parse($attrs.maxSize), function (value) {
@@ -193,7 +191,7 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
         };
     }])
 
-    .constant('uibPaginationConfig', {
+    .constant('paginationConfig', {
         itemsPerPage: 10,
         boundaryLinks: false,
         boundaryLinkNumbers: false,
@@ -206,7 +204,7 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
         forceEllipses: false
     })
 
-    .directive('uibPagination', ['$parse', 'uibPaginationConfig', function ($parse, uibPaginationConfig) {
+    .directive('pagination', ['$parse', 'paginationConfig', function ($parse, paginationConfig) {
         return {
             scope: {
                 totalItems: '=',
@@ -216,8 +214,8 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
                 lastText: '@',
                 ngDisabled: '='
             },
-            require: ['uibPagination', '?ngModel'],
-            controller: 'UibPaginationController',
+            require: ['pagination', '?ngModel'],
+            controller: 'PaginationController',
             controllerAs: 'pagination',
             templateUrl: function (element, attrs) {
                 return attrs.templateUrl || 'src/template/pagination/pagination.html';
@@ -230,15 +228,13 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
                     return; // do nothing if no ng-model
                 }
 
-                paginationCtrl.init(ngModelCtrl, uibPaginationConfig);
+                paginationCtrl.init(ngModelCtrl, paginationConfig);
             }
         };
     }])
 
     .run(['$templateCache', function ($templateCache) {
-
         $templateCache.put('src/template/pagination/pagination.html',
             "<ul class='pagination'><li ng-if='::boundaryLinks' ng-class='{disabled: noPrevious()||ngDisabled}' class='pagination-first'><a href ng-click='selectPage(1, $event)'>{{::getText('first')}}</a></li> <li ng-if='::directionLinks' ng-class='{disabled: noPrevious()||ngDisabled}' class='pagination-prev'><a href ng-click='selectPage(page - 1, $event)'>{{::getText('previous')}}</a></li> <li ng-repeat='page in pages track by $index' ng-class='{active: page.active,disabled: ngDisabled&&!page.active}' class='pagination-page'><a href ng-click='selectPage(page.number, $event)'>{{page.text}}</a></li> <li ng-if='::directionLinks' ng-class='{disabled: noNext()||ngDisabled}' class='pagination-next'><a href ng-click='selectPage(page + 1, $event)'>{{::getText('next')}}</a></li> <li ng-if='::boundaryLinks' ng-class='{disabled: noNext()||ngDisabled}' class='pagination-last'><a href ng-click='selectPage(totalPages, $event)'>{{::getText('last')}}</a></li> </ul>"
         );
-
     }]);
diff --git a/dist/pagination.min.js b/dist/pagination.min.js
diff --git a/src/css/dataGrid.scss b/src/css/dataGrid.scss
@@ -1,3 +1,8 @@
+@import 'variables';
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 :focus {
   outline: none;
 }
@@ -15,7 +20,7 @@
   box-sizing: border-box;
 }
 .pagination a {
-  color: #444;
+  color: $textColor;
   font-size: 16px;
   padding: 0 10px;
   line-height: 30px;
@@ -26,18 +31,6 @@
     border-radius: 2px;
   }
 }
-.pagination-prev,
-.pagination-next,
-.pagination-first,
-.pagination-last {
-  a {
-    padding: 3px 5px;
-  }
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-}
 .pagination-none-svg {
   svg {
     display: none !important;
@@ -56,28 +49,28 @@
 .pagination-page {
   transition: background .1s ease-out, color .1s ease-out;
   &.active {
-    background: rgb(16,108,200);
+    background: $activeBg;
     a {
-      color: #fff;
+      color: $activeText;
     }
   }
 }
 .pagination {
   transition: background .1s ease-out, color .1s ease-out;
   .active {
-    background: rgb(16,108,200);
+    background: $activeBg;
     a {
-      color: #fff;
+      color: $activeText;
     }
   }
 }
-.grid-data-table {
+.table {
   td {
     border-bottom: 1px rgba(0,0,0,.12) solid;
     padding: 12px;
   }
   th {
-    padding: 0 12px;
+    padding: 12px;
     border-bottom: 1px rgba(0,0,0,.12) solid;
   }
 }
@@ -111,9 +104,9 @@ th.sortable {
 
 .items-per-page {
   .active {
-    background: rgb(16,108,200);
+    background: $activeBg;
     a {
-      color: #fff;
+      color: $activeText;
     }
   }
   a {

diff --git a/src/css/variables.scss b/src/css/variables.scss
@@ -0,0 +1,3 @@
+$activeBg = rgb(16,108,200);
+$activeText = #fff;
+$textColor = #444;
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
@@ -1,4 +1,5 @@
-angular.module('dataGrid', [])
+angular
+    .module('dataGrid', [])
     .filter('startFrom', function () {
         return function (input, start) {
             if (input) {
@@ -403,7 +404,6 @@ angular.module('dataGrid', [])
         }
     });
 
-
 function deepFind(obj, path) {
     var paths = path.split('.'),
         current = obj,

diff --git a/src/js/demoApp.js b/src/js/demoApp.js
@@ -1,4 +1,4 @@
-angular.module('myApp', ['dataGrid', 'ui.bootstrap.pagination'])
+angular.module('myApp', ['dataGrid', 'pagination'])
     .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
 
         $scope.getData = function () {