diff --git a/README.md b/README.md index 30c62b2..b1dc410 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ -##Angular Data Grid +## Angular Data Grid + Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, -seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.5 compliant. +seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant. Demo Bootstrap: http://angular-data-grid.github.io/demo/bootstrap/ @@ -8,10 +9,15 @@ Demo Material: http://angular-data-grid.github.io/demo/material/ Demo 100k: http://angular-data-grid.github.io/demo/100k/ +Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-router.html + ### Features - Does not have any hard-coded template so you can choose any mark-up you need, from basic `` layout to any `
` structure. - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes. - - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. + - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. [See details](#url-synchronization) + - Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation. + - Optional support of fixed header table: [Bootstrap Demo](http://angular-data-grid.github.io/demo/fixed-header/bootstrap-grid.html) [Material Design Demo](http://angular-data-grid.github.io/demo/fixed-header/angular-md-grid.html) + - Optional support of CSV data exports: [Demo](http://angular-data-grid.github.io/demo/bootstrap/) - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. NOTE! With great power comes great responsibility, so use non-isolated API wisely. @@ -87,7 +93,7 @@ angular.module('myApp', ['dataGrid', 'pagination']) }; ``` -NOTE: `grid-item` wrapper directive used in the example above, to make code more concise - you can use regular `ng-repeat` instead if needed. +NOTE: `grid-item` wrapper directive used in the example above, to make code more concise, but you can always use regular `ng-repeat` instead, like: `ng-repeat="item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"` ### Basic API @@ -231,7 +237,18 @@ Then create in `gridOptions.customFilters` variable named as `ng-model` with fil ``` -### Others -All filters have optional parameter `disable-url`. If you set it to **true**, URL-synchronization for this filter will be disabled. +### URL Synchronization +You can disable/enable URL synchronization for the whole grid or on a level of particular filter. + +Global parameter `gridOptions.urlSync` (boolean, default is 'false') works for the whole grid. +Each filter has optional parameter `disable-url` (boolean, default is 'false'). If you set it to **true**, URL-synchronization for this particular filter will be disabled. + + +### Multiple grids on page If you need to use 2 or more grids on page, please add `id` to grids, and then use `grid-id` attribute on filters to specify their corresponding grid. [Example](http://angular-data-grid.github.io/demo/bootstrap/multiple.html) + +### Next / Future + - Migrate to Heroku + - Cover with unit / e2e tests + - Port to Angular2? diff --git a/demo/100k/index.html b/demo/100k/index.html index d16ea35..4ce1f28 100644 --- a/demo/100k/index.html +++ b/demo/100k/index.html @@ -207,14 +207,14 @@

Angular Data Grid 100k Example

- - - - - + + + + + - + \ No newline at end of file diff --git a/demo/100k/js/demoApp.js b/demo/100k/js/demoApp.js index 34bc386..47d6e5c 100644 --- a/demo/100k/js/demoApp.js +++ b/demo/100k/js/demoApp.js @@ -6,7 +6,10 @@ $scope.gridOptions = { data: [], - urlSync: true + urlSync: true, + pagination: { + itemsPerPage: '10' + } }; $http({ diff --git a/demo/bootstrap/css/loading-bar.min.css b/demo/bootstrap/css/loading-bar.min.css new file mode 100644 index 0000000..db06f19 --- /dev/null +++ b/demo/bootstrap/css/loading-bar.min.css @@ -0,0 +1 @@ +#loading-bar,#loading-bar-spinner{-webkit-transition:350ms linear all;-moz-transition:350ms linear all;-o-transition:350ms linear all;transition:350ms linear all}#loading-bar .ng-enter,#loading-bar .ng-leave.ng-leave-active,#loading-bar-spinner .ng-enter,#loading-bar-spinner .ng-leave.ng-leave-active{opacity:0}#loading-bar .ng-enter.ng-enter-active,#loading-bar .ng-leave,#loading-bar-spinner .ng-enter.ng-enter-active,#loading-bar-spinner .ng-leave{opacity:1}#loading-bar{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.25);z-index:11002}#loading-bar .bar{-webkit-transition:width 350ms;-moz-transition:width 350ms;-o-transition:width 350ms;transition:width 350ms;background:#29d;position:fixed;z-index:11002;top:0;left:0;width:100%;height:2px;border-bottom-right-radius:1px;border-top-right-radius:1px}#loading-bar .peg{position:absolute;width:70px;right:0;top:0;height:2px}#loading-bar-spinner{display:block;position:fixed;z-index:11002;top:50%;left:50%;margin-left:-15px;margin-right:-15px}#loading-bar-spinner .spinner-icon{width:34px;height:34px;border:solid 2px transparent;border-top-color:#fff;border-left-color:#fff;-webkit-border-radius:17px;-moz-border-radius:17px;border-radius:17px;-webkit-animation:loading-bar-spinner .8s linear infinite;-moz-animation:loading-bar-spinner .8s linear infinite;-ms-animation:loading-bar-spinner .8s linear infinite;-o-animation:loading-bar-spinner .8s linear infinite;animation:loading-bar-spinner .8s linear infinite}@-webkit-keyframes loading-bar-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loading-bar-spinner{0%{-moz-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loading-bar-spinner{0%{-o-transform:rotate(0);transform:rotate(0)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loading-bar-spinner{0%{-ms-transform:rotate(0);transform:rotate(0)}100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-bar-spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} \ No newline at end of file diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html index 90b9860..ab4b483 100644 --- a/demo/bootstrap/index.html +++ b/demo/bootstrap/index.html @@ -16,7 +16,7 @@ - + @@ -94,6 +106,7 @@

First Grid

+
Date Of Birth + +
@@ -182,6 +195,18 @@

Second Grid

Date Of Birth + + + @@ -190,6 +215,7 @@

Second Grid

+ @@ -221,13 +247,13 @@

Second Grid

- - - - - + + + + + - + \ No newline at end of file diff --git a/demo/bootstrap/server-pagination.html b/demo/bootstrap/server-pagination.html index f9b25a8..50990cb 100644 --- a/demo/bootstrap/server-pagination.html +++ b/demo/bootstrap/server-pagination.html @@ -23,6 +23,7 @@ +