diff --git a/README.md b/README.md index b20ed11..113e686 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ ## 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, +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.6 compliant. Demo Bootstrap: http://angular-data-grid.github.io/demo/bootstrap/ @@ -17,7 +17,7 @@ Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-rou - 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) - - 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. + - 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. ### Installation @@ -27,58 +27,56 @@ Using Bower: `bower install angular-data-grid` Using NPM: `npm install angular-data-grid` Direct download: get ZIP archive [from here](https://github.com/angular-data-grid/angular-data-grid.github.io/archive/master.zip) - + Then use files from *dist* folder (see below). ### Setup 1. Include scripts in you application: `angular.min.js`, `dataGrid.min.js` and `pagination.min.js` (include the second one only if you need pagination). - + ```javascript ``` - + 2. Inject dataGrid dependency in your module. ```javascript angular.module('myApp', ['dataGrid', 'pagination']) ``` - + 3. Initialize grid with additional options in your controller. To do that, add `grid-data` directive to element and pass 2 required parameters `grid-options` and `grid-actions`: ```HTML - -
- - - - - - - - - - - - - - - - - - -
- Order # - - Date Placed - - Purchase Order # - - Total -
-
- +
+ + + + + + + + + + + + + + + + + + +
+ Order # + + Date Placed + + Purchase Order # + + Total +
+
``` ```javascript @@ -97,25 +95,25 @@ NOTE: `grid-item` wrapper directive used in the example above, to make code more ### Basic API 1. `grid-options`: object in your controller with start options for grid. You must create this object with at least 1 required parameter - data. -2. `grid-actions`: object in your controller with functions for updating grid. You can pass string or create empty object in controller. +2. `grid-actions`: object in your controller with functions for updating grid. You can pass string or create empty object in controller. Use this object for calling methods of directive: `sort()`, `filter()`, `refresh()`. 3. Inside `grid-data` directive you can use `pagination` directive. 4. If you need get size of current displayed items you can use `{{filtered.length}}` value. - + ### Fetch Data - For client-side pagination/filtering to fetch all data at once: just assign `gridOptions.data` to any JSON array object. - + ```javascript $scope.gridOptions = { data: [], //required parameter - array with data }; ``` - + - For server side pagination/filtering to fetch data by page: 1. add attribute 'server-pagination'=true on element on which you applied directive 'grid-data' 2. assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter: - + ```javascript $scope.gridOptions = { getData: getServerData, @@ -127,9 +125,9 @@ Use this object for calling methods of directive: `sort()`, `filter()`, `refresh callback(data, totalItems); }; ``` - + ### Sorting -To enable sorting, just add attribute `sortable` to your table headers. This will specify the property name you want to sort by. +To enable sorting, just add attribute `sortable` to your table headers. This will specify the property name you want to sort by. Also you can add class `sortable` to display acs/decs arrows. ```HTML @@ -155,14 +153,14 @@ $scope.gridOptions = { ### Pagination You can optionally use `grid-pagination` directive to display paging with previous/next and first/last controls. -Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and shares extensive API: +Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and shares extensive API: ```HTML - ``` @@ -200,10 +198,10 @@ Settings can be provided as attributes in the or globally configure ```template-url``` (Default: 'template/pagination/pagination.html') : Override the template for the component with a custom provided template ### Filters -Data Grid supports 4 built-in types of filters: `text`, `select`, `dateFrom` and `dateTo`. -To use it, add attribute `filter-by` to any element and pass property name, which you want to be filtered. +Data Grid supports 4 built-in types of filters: `text`, `select`, `dateFrom` and `dateTo`. +To use it, add attribute `filter-by` to any element and pass property name, which you want to be filtered. Also you need add attribute `filter-type` with type of filter. -After that you need call `filter()` method in `ng-change` for text or select inputs and in `ng-blur/ng-focus` for datepickers. +After that you need call `filter()` method in `ng-change` for text or select inputs and in `ng-blur/ng-focus` for datepickers. Filters are synchronized with URL by `ng-model` value. ```HTML @@ -218,7 +216,7 @@ Filters are synchronized with URL by `ng-model` value. ``` ### Custom Filters -If you need to use some custom filters (e.g. filter by first letter), add `filter-by` to specify property name, which you want filtering and add `ng-model` property. +If you need to use some custom filters (e.g. filter by first letter), add `filter-by` to specify property name, which you want filtering and add `ng-model` property. Then create in `gridOptions.customFilters` variable named as `ng-model` with filtering function. Filtering function accepts items, value, predicate arguments and returns filtered array. ```javascript @@ -237,7 +235,7 @@ Then create in `gridOptions.customFilters` variable named as `ng-model` with fil ``` ### URL Synchronization -You can disable/enable URL synchronization for the whole grid or on a level of particular filter. +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.