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";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
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