Data Table 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 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 data binding 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
Select
Select
Select

Whoops!

No data to display. Added data will appear here.

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

import {
  DataTableHttpResourceFactoryService,
  DataTableDataBindCallback,
  DataTableFilterValueExtractCallback
} 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>;
  public onFilterValueExtract: DataTableFilterValueExtractCallback;

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

Basic Usage

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

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 and easy to customize.

  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. 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');
        this.onFilterValueExtract = exampleDataResource.onFilterValueExtract('/api/data/filter');
      }
    }
    

    or else you can write your own custom data provider without using getResourceProvider in DataTableHttpResourceFactoryService service. Please refer Custom Data Provider documentation for more information.

  3. Set the obtained data bind and filter value extract callback function references to onDataBind and onFilterValueExtract input properties of data table accordingly.

    <ng-data-table
      ...
      [onDataBind]="onDataBind"
      [onFilterValueExtract]="onFilterValueExtract">
    </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 10.

    • offset - Number of records you wish to skip before selecting records with specified limit. For example, if offset is 10 and limit is 5 it should return 5 items starting from 10th index. Note that offset is zero index based.

    Usage scenarios and examples

    1. Page 1 request when limit is 5:

      https://yourapi/resource/path?limit=5&offset=0

    2. Page 2 request when limit is 10:

      https://yourapi/resource/path?limit=10&offset=10

  2. Sorting and Filtering query parameters - Sortable and/or filterable columns field names will get appended as query parameters. The format of these field query parameters are as follows.

    <field name>=[<filter value>][|<sort order>|<sort priority>]

    • field name - Sortable and/or filterable column field name. These fields are appended as query parameters only when filtering and/or sorting is applied on target column which is sortable or filterable.

    • filter value - Filter value is available only when filter is applied. Multi filter values are passed as a comma separated value.

    • sort order - Sort order is appended only when field sort order is 'asc' or 'desc'

    • sort priority - Sort priority is passed as an index incrementer starting from value 1. This property is useful when multi column sorting is enabled to identify the sortable field order.

    The target field is ignored if no filtering or sorting is applied on the target column to reduce the data fetch request URL length by avoiding appendage of empty valued query param. The filter and sort field values are separated by pipe | character when both sorting and filtering is applied on the same field. The sort order and sort priority properties are also separated by pipe character.

    Usage scenarios and examples

    1. filtering applied and sorting applied - both filter and sort order values are appended to the request URL via a query parameter with target field name.

      i.e: data GET request URL generated when Product Line column is sorted in ascending order and filtered by 'equipment' keyword.

      https://yourapi/resource/path?limit=10&offset=0&productLine=equipment|asc|1

    2. filtering applied and sorting not applied - filter value is appended to the request URL via a query parameter with target field name.

      i.e: data GET request URL generated when Product Line column is filtered by 'equipment' keyword.

      https://yourapi/resource/path?limit=10&offset=0&productLine=equipment

    3. filtering not applied and sorting applied - sort order value is appended to the request URL via a query parameter with target field name.

      i.e: data GET request URL generated when Product Line column is sorted in ascending order.

      https://yourapi/resource/path?limit=10&offset=0&productLine=|asc|1

    4. filtering not applied and sorting not applied - field name is not appended to the request URL as a query parameter.

      i.e: data GET request URL generated when Product Line column is not sorted or filtered.

      https://yourapi/resource/path?limit=10&offset=0

    Refer Sorting and Filtering documentation for more information and how to enable sorting and filtering.

  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 of above example.

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

Custom Data Provider

Server side and client side data binding can be implemented via a custom data provider as Ornamentum data sources are fully decoupled from component logic. Please refer Custom Data Provider for more information.

Client Side Basic Data Binding
Client Side Stream Data Binding
Server Side Web Socket Data Binding
Custom Data Provider
API Doc - Data Source Input