Rocket Grid Datatable
AngularJS directive adds interaction controls as server side pagination, search and sorting to you tables.
Contributing
Everyone is more than welcome to contribute. Please do not forget on each change to recreate and commit dist folder.
To do that please run npm run build
.
How to build dist:
npm install
npm run build
Implementation
Implementation details are written for the project using typescript. You can use this directive also with the pure AngularJS project without any compiler. But typescript can save you a lot of time :)
For concrete implementation you can see demo application in demo folder.
Step 1:
Install the directive by bower
or npm
.
bower install --save rocket-grid-datatable
or npm install --save rocket-grid-datatable
Step 2:
Put it as dependency or to your build process:
... ...
Step 3:
Add directive as dependency:
let yourApp = angular;
Step 4:
Add presentation service extending from BasePresentationService
provided in ./dist
folder.
Responsibility of the service is:
- create dependency on you repository service (service which handles data read - from DB, cache or other storage)
- define limit per pagination
- define default sorting
Example:
'use strict'; ; const PAGINATION_LIMIT_PER_PAGE = 5; static $inject: string = 'UserService' // <-- this is dependent service ; { superPAGINATION_LIMIT_PER_PAGE; // <-- this is pagination limit thisservice = service; } public : rocketGridDatatableIGetAllSortingParameter return column: 'email' direction: 'asc' ; // <-- this is default sorting
Step 5:
Create a kind of repository service which implements rocketGridDatatable.IDataTableService
.
Example:
'use strict'; implements rocketGridDatatableIDataTableService static $inject: string = '$resource' ; {} public : ngIPromise<rocketGridDatatableIDataTableResponse<any>> let users = this; return users$promise;
Additional info:
You can listen in your controller and make other actions after each page change.
Example:
yourApp;