Server Side Basic Data Binding

Server side data binding allow users to bind large data sets that are not directly accessible as a full collection in client side due to various reasons. Server side data binding can improve performance drastically for large data sets but integration is fairly complex compared to Client Side Basic Data Binding and Client Side Stream Data Binding techniques. This data binding technique can be used to fetch data via HTTP GET requests on demand.

Unlike in Client-side Basic Data Binding, server side rendering will request for data on table initialization and whenever user performs Filtering, Sorting, Pagination etc. operations. Ornamentum has provided an optional opinionated service to integrate external data sources. However, you can build a custom data provider depending on your requirement.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

Whoops!

No data to display. Added data will appear here.

import { Component } from '@angular/core';

import { DataTableHttpResourceFactoryService, DataTableDataBindCallback } from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-server-side-basic-usage',
  templateUrl: './server-side-basic-usage.component.html'
})
export class ServerSideBasicUsageComponent {
  public onDataBind: DataTableDataBindCallback<ExampleData>;

  constructor(private resourceFactory: DataTableHttpResourceFactoryService) {
    const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>();
    this.onDataBind = exampleDataResource.onDataBind('/api/data');
  }
}

Basic Usage

Server side data bind functionality can be integrated via onDataBind callback function input property. Data source associated logic is decoupled from Ornamentum core module to make it data source agnostic.

  1. Import DataTableResourceModule along with DataTableModule.

    @NgModule({
     ...
     imports: [
        ...
        DataTableModule.forRoot(), // Import data table module
        DataTableResourceModule.forRoot() // Import data table resource module
      ]
    })
    
  2. Within the target component use DataTableHttpResourceFactoryService to construct an instance of DataTableHttpDataFetchService<T> class. Invoke onDataBind method with the API resource path to get the data bind callback function reference.

    @Component({
      ...
    })
    export class ServerSideBasicUsageComponent {
      public onDataBind: DataTableDataBindCallback<ExampleData>;
      
      constructor(private resourceFactory: DataTableHttpResourceFactoryService) {
        const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>();
        this.onDataBind = exampleDataResource.onDataBind('/api/resource/path');
      }
    }
    
  3. Set the obtained data bind callback function reference to onDataBind input property of data table.

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

Data fetch HTTP request (Your backend REST API) should support following

  1. Pagination query parameters
    • limit - The limit parameter controls the maximum number of items that may be returned for a single request. This parameter reflects the current page size. If limit is not specified, it will default to 15.
    • offset - The offset parameter controls the starting point within the collection of resource results. For example, if you have a collection of 15 items to be retrieved from a resource and you specify limit=5, you can retrieve the entire set of results in 3 successive requests by varying the offset value: offset=0, offset=5, and offset=10. Note that the first item in the collection is retrieved by setting a zero offset.
  2. Sorting and Filtering query parameters - query parameter with field name will get appended when sort or filter action are triggered. Refer Server Side Sorting and Server Side Filtering sections for more information.
  3. Service should respond follow DataTableQueryResult<T> schema. However, you can pass a custom response mapper callback function to onDataBind and map the response to DataTableQueryResult<T> schema without making changes in backend API response.

You can inspect network traffic of this page with "/api/data" filter in browser developer tools to understand backend service requests and behaviors for above example.

  Request URL: https://ornamentum.app/api/data?limit=10&offset=0
  Request Method: GET

Custom Data Provider

Server side 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 on 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.

Refer DataTableHttpDataFetchService<T> documentation for more details.

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