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
ID | Order Method Type | Retailer Type | Product Line | Product Type | Revenue | Quantity | Gross Margin |
---|---|---|---|---|---|---|---|
Select | Select | Select | Select |
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>; }; }
<ng-data-table [id]="'sales_products_data_binding_02'" [title]="'Sales Products'" [minContentWidth]="1280" [limit]="10" [pageable]="true" [showHeader]="true" [showColumnSelector]="true" [onFilterValueExtract]="onFilterValueExtract" [onDataBind]="onDataBind"> <ng-data-table-column [field]="'id'" [title]="'ID'" [sortable]="true" [filterable]="true" [width]="90"> </ng-data-table-column> <ng-data-table-column [field]="'orderMethodType'" [title]="'Order Method Type'" [sortable]="true" [filterable]="true" [showDropdownFilter]="true" [dropDownFilterShowOptionSelectCheckbox]="true" [width]="150"> </ng-data-table-column> <ng-data-table-column [field]="'retailerType'" [title]="'Retailer Type'" [sortable]="true" [filterable]="true" [showDropdownFilter]="true" [dropDownFilterShowOptionSelectCheckbox]="true" [width]="120"> </ng-data-table-column> <ng-data-table-column [field]="'productLine'" [title]="'Product Line'" [sortable]="true" [filterable]="true" [showDropdownFilter]="true" [dropDownFilterShowOptionSelectCheckbox]="true" [width]="180"> </ng-data-table-column> <ng-data-table-column [field]="'productType'" [title]="'Product Type'" [sortable]="true" [filterable]="true" [showDropdownFilter]="true" [dropDownFilterShowOptionSelectCheckbox]="true" [width]="160"> </ng-data-table-column> <ng-data-table-column [field]="'revenue'" [title]="'Revenue'" [sortable]="true" [filterable]="true" [width]="150"> </ng-data-table-column> <ng-data-table-column [field]="'quantity'" [title]="'Quantity'" [sortable]="true" [filterable]="true" [width]="120"> </ng-data-table-column> <ng-data-table-column [field]="'grossMargin'" [title]="'Gross Margin'" [width]="150" [sortable]="true" [filterable]="true"> </ng-data-table-column> </ng-data-table>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from "@angular/common/http"; import { DataTableModule, DataTableResourceModule } from 'ornamentum'; import { CustomDataProviderUsageComponent } from './custom-data-provider-usage.component'; @NgModule({ bootstrap: [CustomDataProviderUsageComponent], declarations: [CustomDataProviderUsageComponent], imports: [ BrowserModule, 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 ] }) export class CustomDataProviderUsageModule {}
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.
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 ] })
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
ID Name Avatar Git Repository URL 60493101 coding-interview-university jwasham
https://github.com/jwasham/coding-interview-university 2862290 Android-Universal-Image-Loader nostra13
https://github.com/nostra13/Android-Universal-Image-Loader 31791381 Windows-universal-samples microsoft
https://github.com/microsoft/Windows-universal-samples 75566993 universe openai
https://github.com/openai/universe 92361502 UniversalProject XuYang8026
https://github.com/XuYang8026/UniversalProject Results: 1 -5 of 53929/ 10786import { 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>; } }
<ng-data-table [title]="'Github Global Repositories'" [id]="'git_repositories_data_binding_01'" [limit]="5" [showHeader]="true" [showColumnSelector]="true" [pageable]="true" [minContentWidth]="1280" [onDataBind]="onDataBind"> <ng-data-table-column [field]="'id'" [title]="'ID'" [width]="90"> </ng-data-table-column> <ng-data-table-column [field]="'name'" [title]="'Name'" [width]="200"> <ng-template #ngDataTableCell let-row="row"> <td style="vertical-align: middle"> <span [ngClass]="{'highlight': row.item.score > 100}">{{row.item.name}}</span> </td> </ng-template> </ng-data-table-column> <ng-data-table-column [field]="'login'" [title]="'Avatar'" [width]="200"> <ng-template #ngDataTableCell let-row="row"> <td style="vertical-align: middle"> <img style="width: 48px; height: 48px; border-radius: 50%; margin-right: 10px;" [src]="row.item.owner.avatar_url"/> <span>{{row.item.owner.login}}</span> </td> </ng-template> </ng-data-table-column> <ng-data-table-column [field]="'html_url'" [title]="'Git Repository URL'" [width]="200"> <ng-template #ngDataTableCell let-row="row"> <td style="vertical-align: middle"> <a class="link" [href]="row.item.html_url">{{row.item.html_url}}</a> </td> </ng-template> </ng-data-table-column> </ng-data-table>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from "@angular/common/http"; import { DataTableModule, DataTableResourceModule } from 'ornamentum'; import { CustomDataProviderMapperUsageComponent } from './custom-data-provider-mapper-usage.component'; @NgModule({ bootstrap: [CustomDataProviderMapperUsageComponent], declarations: [CustomDataProviderMapperUsageComponent], imports: [ BrowserModule, 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 ] }) export class CustomDataProviderMapperUsageModule {}
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.
Suggested Links
Client Side Basic Data BindingServer Side Web Socket Data Binding
API Doc for Server Side Basic Data Binding