ng-pure-datatable
Version:
This is a Angular datatable for tables which is not dependent on jquery. This is fully written with typescript and it uses observables to communicate events across the user defined table. This is inspired by previous libraries I wrote for `Larang-Paginato
261 lines (195 loc) • 9.07 kB
Markdown
# NgPureDatatable (Angular 4^ & ^5...)
This is a Angular datatable for tables which is not dependent on jquery. This is fully written with typescript and it uses observables to communicate events across the user defined table. This is inspired by previous libraries I wrote for `Larang-Paginator` && `Angular-Table-Searcher`
For other backend language to use this library. Please make sure your success response conforms with this response:
Note: the "data" key holding the payload can either be 'resource' || 'resources' || 'content' || 'contents' || 'items' || 'list' || no key specified holding the payload in response
data: {
"total": 50, // total count of all paginated data
"per_page": 15,
"current_page": 1,
"last_page": 4,
"next_page_url": "http://laravel.app?page=2",
"prev_page_url": null,
"path": "http://laravel.app",
"from": 1,
"to": 15,
"data":[
{
// Result Object
},
{
// Result Object
}
]
}
## Release Note
Due to compatibility issues in Angular 4 & 5, we will maintain all:
````
Angular 4 from 4.0.0 and above.
Angular 5 from 5.0.0 and above.
````
## Installation
`npm install --save ng-pure-datatable`
## Sample Image in use
## Usage in Application
Follow the instruction below to use ng-pure-datatable.
`import {NgPureDatatableModule} from 'ng-pure-datatable';`
Add `NgPureDatatableModule.forRoot()` in AppModule or Other Modules using `NgPureDatatableModule`
# Notice for pagination Settings:
````
path: full path of the api url to call for data.
data: (paginated response): Object related to laravel response, this must be the first data rendered from the component which information are picked to generate the pagination.
limit: (optional) paginated data per page, default is 50.
perNav: (optional) navigation bar to show at a time: defualt is 5.
viewPage:(optional) string value to hold the Integer value for the next page. default is 'page'
paginate: (optional) string value to hold the Integer value for limit in a view page. defualt is 'paginate'.
textColor: (optional) this color will be applied to text for page information.
Note that the query string in (next_page_url & prev_page_url) must be thesame to what is passed down in viewPage & paginate for paginator to work with.
````
A sample NgPureDatatableModule pagination built url for paginating will be `http://localhost:8088/api/organizations?page=1&paginate=5`
# Notice for search settings:
````
path: full path of the api url to call for search option.
data: (paginated response list ): array, this must be the first data rendered from the component which information are picked to enable searching.
searchKeys: Keys to tell the NgPureDatatable Search to use to filter data but can be empty array to search all through object and its child.
searchType: We have three search types which can be from backend, table, table not found with backend. (Import NgSearchTypesEnum)
placeholder: What to display in the input field as a message
buttonColor: The background color of the table seacher.
borderColor: (optional) The border-bottom color of the table seacher.
queryField: The field name to pass search value into. such as search will be search='value entered'
width: (optional) The width of the search,
position: (optional) The position of the search (accept 'right' or 'left'),
positionStyle: (optional) The position style is an object of top and right integer value only (eg {top: 35, right: 20}) but if position is set to left, the style right will be applied on the left position
````
#### Notice for table mapping key and Id to communicate with your defined table
````
key: The unique key per table to enable event broadcasting
id: The table unique id generated to allow search injection
disableSearch: This is used to disable the search option by passing true (default is false)
disablePaging: This is used to disable the pagination option by passing true (default is false)
````
## *.component.ts
Add/refactor the following code to the appropriate places in your component.ts
````
import {Component, OnInit} from '@angular/core';
import {Http} from "@angular/http";
import {NgSearchTypesEnum, NgPureDataTableEventService} from "ng-pure-datatable";
export class AppComponent implements OnInit {
title = 'app';
key = 'app_component';
public paginator = {
path: 'http://localhost:8088/api/organizations',
limit: 20,
perNav: 5,
data: null
};
public searchSettings = {
path: 'http://localhost:8088/api/organizations',
searchType: NgSearchTypesEnum.EMPTY_TABLE_APPLY_BACKEND,
searchKeys: ['name', 'email'], // can be empty array to enable deep searching
borderColor: '',
buttonColor: '',
width: 50,
position: 'right',
positionStyle: {
right: 0,
top: -50
},
queryField: 'search',
data: null,
placeholder: 'Filter information...'
};
constructor(private ngPureDataTableEventService: NgPureDataTableEventService, private http: HttpClient) {
this.ngPureDataTableEventService.on(this.key, (res) => {
if (res['type'] && res['type'] === 'search') {
console.log('search=', res);
if (res['error']) {
return alert('Error Encountered');
}
this.searchSettings.data = (res['result'].constructor === Array) ? res['result'] : res['result'].data['data']; // update table data in view
this.paginator.data['data'] = this.searchSettings.data; // updating list of the paginated data
return;
}
if (res['type'] && res['type'] === 'paging') {
if (res['error']) {
return alert('Error Encountered');
}
console.log('paging=', res);
this.paginator.data = res.data; // the full laravel object structure
this.searchSettings.data = res.data['data']; // the list of the paginated table information
}
});
}
private getTransactions() {
this.http.get(this.paginator.path + `?page=1&paginate=${this.paginator.limit}`).subscribe(
(res) => {
this.paginator.data = res['data'];
this.searchSettings.data = res['data']['data'];
},
(err) => {
}
);
}
ngOnInit() {
this.getTransactions();
}
}
````
## *.component.html
Add this below the table you want it to paginate data from backend.
````
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center;">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<div class="col-sm-12 content" *ngIf="paginator.data">
<div style="display: block">
<table id="userTable" width="100%" class="table table-striped table-responsive">
<tr>
<td>#</td>
<td>Name</td>
<td>Email</td>
</tr>
<tr *ngFor="let page of paginator.data['data']; let i = index;">
<td>{{((paginator.data['current_page'] - 1) * paginator.limit + i + 1) || (i + 1)}}</td>
<td>{{page?.name}}</td>
<td>{{page?.email}}</td>
</tr>
</table>
</div>
<ng-pure-datatable [id]="'userTable'" [key]="key" [searchSettings]="searchSettings"
[paginateSettings]="paginator"></ng-pure-datatable>
</div>
````
## .component.css
````
.content {
margin: 30px;
position: relative;
background: #fff;
color: #000;
}
````
## Backend expected request
Your backend for pagination will expect
````
viewPage: integer to determine next page
paginate: integer to determine limit of data per view page.
````
Your backend for search will expect
````
queryField: query name to hold search value
````
## Build as a package
`npm run pack-build`
## Publish to npm
`npm publish dist`