Client Side Basic Data Binding

Client side data binding allow users to bind static data sets to data table when 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 via setting a RxJS Observable stream to dataSource input property.

In this data binding technique, data table operations such as Filtering, Row Grouping, Sorting, Pagination etc. are performed in client side via an internal data source manager service.

However, it might affect the overall site performance if the data set is significantly larger. 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 client side for on demand data binding.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
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 two approaches described below. Data emitted after initial data binding will re-initialize data table with the new data set and drop previously bound data items collection or stream.

  <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 example section above. Mutations to the item collections will automatically get reflected in data table.

or

  <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. Latest data collection emitted via data source stream will get reflected in data table.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
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));
  }
}
Row Selection
Column Filtering
API Doc for Client Side Data Binding