rocket-grid-datatable
v1.0.0
Published
Grid datatable for AngularJS.
Downloads
7
Readme
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 installnpm 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:
...
<link rel="stylesheet" type="text/css" href="__PATH__/dist/rocket-grid-datatable.min.css">
</head>
<body>
...
<script src="__PATH__/dist/rocket-grid-datatable.min.js"></script>
</body>Step 3:
Add directive as dependency:
let yourApp = angular.module('YOUR_APP_NAME', [
...
'rocket-grid-datatable',
]);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';
import { BasePresentationService } from '__PATH_TO_DIRECTIVE__/dist/basePresentationService';
const PAGINATION_LIMIT_PER_PAGE = 5;
export default class UserPresentationService extends BasePresentationService {
static $inject: string[] = [
'UserService', // <-- this is dependent service
];
constructor (service: rocketGridDatatable.IDataTableService) {
super(PAGINATION_LIMIT_PER_PAGE); // <-- this is pagination limit
this.service = service;
}
public getDefaultSorting (): rocketGridDatatable.IGetAllSortingParameter {
return [{ column: 'email', direction: 'asc' }]; // <-- this is default sorting
}
}Step 5:
Create a kind of repository service which implements rocketGridDatatable.IDataTableService.
Example:
'use strict';
export default class UserService implements rocketGridDatatable.IDataTableService {
static $inject: string[] = [
'$resource',
];
constructor(private $resource: ng.IResourceService) {}
public getAll (
sorting: rocketGridDatatable.IGetAllSortingParameter,
limit: number,
offset: number,
search: string,
additionalQueryParameters: {}
): ng.IPromise<rocketGridDatatable.IDataTableResponse<any>> {
let users = this.$resource('api_url').get(
angular.extend({
limit: limit,
offset: offset,
search: search,
'sort[]': sorting,
}, additionalQueryParameters)
);
return users.$promise;
}
}Additional info:
You can listen in your controller and make other actions after each page change.
Example:
yourApp.controller('DemoCtrl', ($scope: ng.IScope) => {
$scope.$on(EVENT_PAGE_CHANGED_DATA_TABLE, () => console.log('Ctrl: data in datatable were changed.'));
});