Data Table Client Side Basic Data Binding

Client side data binding allows the users to bind static data sets to the data table when the full data collection is available in the client side. It can be configured via setting an array of data objects to items input property or by setting a RxJS Observable stream to dataSource input property.

In this data binding technique, data table operations such as Filtering, Dynamic Row Span, Sorting, Pagination etc. are performed in client side via a built-in data source manager service.

However, it might affect the overall site performance, if the data set is significantly large. Consider using Server Side Basic Data Binding in such cases where all the computation heavy operations are handled in server side and only page level data is sent to the client side for on demand data binding.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
Select
Select
Select
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1 -10of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';
import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-items-usage',
  templateUrl: './items-usage.component.html'
})
export class ItemsUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    // This line of code is fetching 20 dummy data items collection from a local data service.
    // Replace this with your own data source.
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Basic Usage

Client side data binding can be configured by using either of the approaches described below. Data emitted/bound after initial data binding will re-initialize the data table with the new data set and drop previously bound data item collection or stream.

  1. Bind via Items

    items: any[]   Default Value: undefinedTarget Component: <ng-data-table>

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

    This approach can be used to bind a static data array. The complete code snippets for the data binding via items input property can be found in What You Will See section example. Data table component reflect the data changes when items reference is updated hence, it is not sensitive to data source mutations.

  2. Bind via Data Source

    dataSource: Observable<any[]>   Default Value: undefinedTarget Component: <ng-data-table>

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

    This approach can be used to bind an Observable data stream. Refer following example code snippet for complete usage of the dataSource property in the client side data binding. The last emitted data collection via the data source stream is reflected in data table.

    Sales Products

    IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
    Select
    Select
    Select
    10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
    15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
    20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
    25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
    30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
    35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
    40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
    45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
    50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
    55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
    Results: 1 -10of20
    / 2
    import { Component } from '@angular/core';
    
    import { Observable, of } from 'rxjs';
    
    import { ExampleData } from 'helper-models';
    import { DataFetchService } from 'helper-services';
    
    @Component({
      selector: 'app-data-source-usage',
      templateUrl: './data-source-usage.component.html'
    })
    export class DataSourceUsageComponent {
      public dataSource: Observable<ExampleData[]>;
    
      constructor(private dataFetchService: DataFetchService) {
        // This line of code is fetching 20 dummy data items collection from a local data service.
        // Replace this with your own data source.
        this.dataSource = of(this.dataFetchService.fetchStaticData(0, 20));
      }
    }
    
Client Site Stream Data Binding
Server Side Basic Data Binding
Server Side Web Socket Data Binding
Custom Data Provider
API Doc - Items Input