Data Table Custom Data Provider

Ornamentum data binding is handled via onDataBind callback function. Use this callback reference to hook into data bind workflow and provide custom data source. This callback function will get triggered upon the table initialization and on dynamic data table operations. It receives DataTableRequestParams argument and expect to return RxJS Observable query result DataTableQueryResult<T> object stream. Data returned from this callback function will be directly bound to table assuming that it matches the on demand request context.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
Select
Select
Select
Select

Whoops!

No data to display. Added data will appear here.

import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

import { Observable } from 'rxjs';

import { DataTableQueryResult } from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-custom-data-provider-usage',
  templateUrl: './custom-data-provider-usage.component.html'
})
export class CustomDataProviderUsageComponent {

  constructor(public http: HttpClient) {}

  /**
   * custom data provider need to return a function which is return an Observable out put
   * as long as your data return as observable you can use any data source
   * example : Firebase Realtime Database or Cloud Firestore
   */
  public onDataBind: () => Observable<DataTableQueryResult<ExampleData>> = (params?)
    : Observable<DataTableQueryResult<ExampleData>> => {
    let httpParams = new HttpParams();

    httpParams = httpParams
      .append('offset', params.offset)
      .append('limit', params.limit);

    return this.http.get('api/data', { params: httpParams }) as Observable<any>;
  };

  public onFilterValueExtract: (column: any) => Observable<any[]> = (params?: any): Observable<any[]> => {
    let httpParams = new HttpParams();
    httpParams = httpParams.append('field', params.field);

    return this.http.get('api/data/filter', { params: httpParams }) as Observable<any>;
  };

}

Basic Usage

onDataBind: DataTableDataBindCallback<any>   Default Value: undefinedTarget Component: <ng-data-table>

Ornamentum provides the capability to integrated server side data bind functionality via onDataBind callback function input property. Data source associated logic is decoupled from the Ornamentum core module to make the data source agnostic.

If you refer to Server Side Basic and Server Side Web Socket Data Binding basic usages, getResourceProvider in DataTableHttpResourceFactoryService provides an inbuilt method to take care of basic server data bind functionality. You can build your own data provider same as onDataBind internal data provider.

  1. Import DataTableResourceModule along with DataTableModule. 

    import { HttpClientModule } from "@angular/common/http";

import { DataTableModule, DataTableResourceModule } from 'ornamentum';

@NgModule({
 ...
 imports: [
    ...
    HttpClientModule, // Import http client module which is required for server side basic data binding
    DataTableModule.forRoot(), // Import data table module
    DataTableResourceModule.forRoot() // Import data table resource module
  ]
})

  2. The custom data provider needs to return a function which is supposed to be returned object as an Observable.

    As long as your data returns as observable, you can use any data source, such as Firebase Realtime Database or Cloud Fire store.

    Github Global Repositories

    IDNameGit Repository URL
    60493101coding-interview-universityjwashamhttps://github.com/jwasham/coding-interview-university
    2862290Android-Universal-Image-Loadernostra13https://github.com/nostra13/Android-Universal-Image-Loader
    31791381Windows-universal-samplesmicrosofthttps://github.com/microsoft/Windows-universal-samples
    75566993universeopenaihttps://github.com/openai/universe
    92361502UniversalProjectXuYang8026https://github.com/XuYang8026/UniversalProject
    Results: 1 -5of37432
    / 7487
    import { HttpClient, HttpParams } from '@angular/common/http';
import { Component } from '@angular/core';

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { DataTableQueryResult, DataTableRequestParams } from 'ornamentum';

@Component({
  selector: 'app-custom-data-provider-mapper-usage',
  templateUrl: './custom-data-provider-mapper-usage.component.html',
  styles: ['.highlight { font-weight: bold; color: #4fc1e9 }', '.link { color: #ffce54 }']
})
export class CustomDataProviderMapperUsageComponent {

  constructor(public http: HttpClient) {}

  /**
   * custom data provider need to return a function which is return an Observable out put
   * as long as your data return as observable you can use any data source
   * example : Firebase Realtime Database or Cloud Firestore
   */
  public onDataBind = (params: DataTableRequestParams): Observable<DataTableQueryResult<any>> => {
    const page = (params.offset + params.limit) / params.limit;
    const perPage = params.limit;

    let httpParams = new HttpParams();
    httpParams = httpParams
      .append('q', 'univers')
      .append('page', '' + page)
      .append('per_page', '' + perPage);

    return this.http.get('https://api.github.com/search/repositories', { params: httpParams })
      .pipe(map((res: any) => {
          /**
           * Items collection
           * items: T[];
           * Item count
           * count: number;
           */
          return {
            items: res.items,
            count: res.total_count
          };
        })) as Observable<any>;
  }
}

  3. Set the obtained data bind callback function reference to onDataBind input property of data table. 

    <ng-data-table
  ...
  [onDataBind]="onDataBind">
</ng-data-table>

You can inspect network traffic of this page (Github Repositories) in browser developer tools to understand how backend service request/response and behaviors for the above example.

Client Side Basic Data Binding
Server Side Web Socket Data Binding
API Doc for Server Side Basic Data Binding