Events

Set of events introduced to the data table to track different user interactions and to maintain and manage events perform on top of the data table. All the events are triggers based on predefined events hierarchical order.

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
Results: 1-5of10
/ 2

[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[ROW BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[ROW BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[ROW BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[ROW BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[ROW BIND] event is called for row ID - 10
[DATA BOUND] event is called
[INIT] event is called
[COLUMN BIND] event is called for column - Gross Margin
[COLUMN BIND] event is called for column - Quantity
[COLUMN BIND] event is called for column - Revenue
[COLUMN BIND] event is called for column - Product Type
[COLUMN BIND] event is called for column - Product Line
[COLUMN BIND] event is called for column - Retailer Type
[COLUMN BIND] event is called for column - Order Method Type
[COLUMN BIND] event is called for column - ID

import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';

import {
  DataTableCellBindEventArgs,
  DataTableCellClickEventArgs,
  DataTableColumnComponent,
  DataTableComponent,
  DataTableDoubleClickEventArgs,
  DataTableHeaderClickEventArgs,
  DataTableRow,
  DataTableRowClickEventArgs
} from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-usage',
  templateUrl: './events-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsUsageComponent implements AfterViewInit {
  public items: ExampleData[];
  public allEventsData: string[] = [];

  constructor(private dataFetchService: DataFetchService, private cd: ChangeDetectorRef) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public ngAfterViewInit(): void {
    this.cd.detectChanges();
  }

  public onDataTableInit(dataTable: DataTableComponent): void {
    this.allEventsData.push('[INIT] event is called');
  }

  public onAllRowSelectChange(allRowSelectedChanged: boolean): void {
    this.allEventsData.push(`[SELECT ALL] Checkbox Status: ${allRowSelectedChanged}`);
  }

  public onRowBind(dataRow: DataTableRow<ExampleData>): void {
    this.allEventsData.push(`[ROW BIND] event is called for row ID - ${dataRow.item.id}`);
  }

  public onRowSelectChange(selectedData: ExampleData | ExampleData[]): void {
    this.allEventsData.push(`[SELECTED ROW VALUES] ${JSON.stringify(selectedData)}`);
  }

  public onCellBind(cellBindEventArgs: DataTableCellBindEventArgs<any>): void {
    this.allEventsData.push(`[CELL BIND] event is called for row ID - ${cellBindEventArgs.row.item.id}`);
  }

  public onCellClick(cellClickEventArgs: DataTableCellClickEventArgs<any>): void {
    this.allEventsData.push(`[SELECTED COLUMN] is ${cellClickEventArgs.column.title} & [ROW ID] is - ${cellClickEventArgs.row.item.id}`);
  }

  public onColumnBind(dataTableColumnComponent: DataTableColumnComponent): void {
    this.allEventsData.push(`[COLUMN BIND] event is called for column - ${dataTableColumnComponent.title}`);
  }

  public onDataBound(): void {
    this.allEventsData.push('[DATA BOUND] event is called');
  }

  public onHeaderClick(headerClickEventArgs: DataTableHeaderClickEventArgs): void {
    this.allEventsData.push(`[COLUMN HEADER] ${headerClickEventArgs.column.title} is clicked`);
  }

  public onRowClick(clickEventArgs: DataTableRowClickEventArgs<any>): void {
    this.allEventsData.push(`[SINGLE CLICK] perform on row ID - ${clickEventArgs.row.item.id}`);
  }

  public onRowDoubleClick(doubleClickEventArgs: DataTableDoubleClickEventArgs<any>): void {
    this.allEventsData.push(`[DOUBLE CLICK] perform on row ID - ${doubleClickEventArgs.row.item.id}`);
  }

  public getAllEventsData(): string[] {
    if (this.allEventsData.length) {
      return this.allEventsData.slice().reverse();
    }
  }
}

Events Hierarchy

All available data table events are initialize as the following sequence depends on it's invoking behaviour (Automatic/Manual).

    |__ Ornamentum Events
       |
       |___ Data Table Events
       |     |
       |     |___ Automatically Triggers
       |     |     |
       |     |     |-- Column Bind // triggers for each column data binding.
       |     |     |-- Init // trigger data table initialization.
       |     |     |-- Data Bound // triggers after data binding completion.
       |     |     |-- Row Bind // triggers for each row data binding in current view.
       |     |     |-- Cell Bind // triggers when binding data for cell.
       |     |
       |     |___ Manually Triggers
       |           |
       |           |-- Row Select Change // triggers row select state changes.
       |           |-- All Row Select Change // trigger all row select state changes.
       |           |-- Row Click // triggers single each row click events.
       |           |-- Row Double Click  // triggers each row double click events.
       |           |-- Cell Click // triggers when click on specific cell.
       |           |-- Header Click // triggers when on column header mouse click.
       |
       |___ Dropdown Events
       |
      \/
  

As mention in the above, all available events can be bind to the data table as follows try by yourself to get familiar. For individual event usage details refer Useful Events section.

  <ng-data-table
    ...
      (init)="onDataTableInit($event)"
      (allRowSelectChange)="onAllRowSelectChange($event)"
      (rowBind)="onRowBind($event)"
      (rowSelectChange)="onRowSelectChange($event)"
      (cellBind)="onCellBind($event)"
      (cellClick)="onCellClick($event)"
      (columnBind)="onColumnBind($event)"
      (dataBound)="onDataBound()"
      (headerClick)="onHeaderClick($event)"
      (rowClick)="onRowClick($event)"
      (rowDoubleClick)="onRowDoubleClick($event)">
  </ng-data-table>

Useful Events

All the available data table events can be detailed as follows. In here, the above What You Will See section example will separate into individual sections and discuss in detail with examples.

Column Bind

columnBind: EventEmitter<DataTableColumnComponent>   Target Component: <ng-data-table>

Triggers for each column before all other event configurations and emit DataTableColumnComponent. As mentioned earlier, this is the first event which called before all the other events.

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
Results: 1-5of10
/ 2

Column bind event is called for column - Gross Margin
Column bind event is called for column - Quantity
Column bind event is called for column - Revenue
Column bind event is called for column - Product Type
Column bind event is called for column - Product Line
Column bind event is called for column - Retailer Type
Column bind event is called for column - Order Method Type
Column bind event is called for column - ID

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

import { DataTableColumnComponent } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-column-bind-usage',
  templateUrl: './events-column-bind-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsColumnBindUsageComponent {
  public items: ExampleData[];

  public columnBindEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onColumnBind(dataTableColumnComponent: DataTableColumnComponent): void {
    this.columnBindEventData.push(`Column bind event is called for column - ${dataTableColumnComponent.title}`);
  }
}

Init

init: EventEmitter <DataTableComponent>   Target Component: <ng-data-table>

Init event emits a DataTableComponent after the grid initialization. It can track by binding a event to init property. below example and code snippet will demonstrate a sample usage.

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
Results: 1-5of10
/ 2

Data table init event is called

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

import { DataTableComponent } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-init-usage',
  templateUrl: './events-init-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsInitUsageComponent {
  public items: ExampleData[];

  public dataTableInitData: string = null;

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onDataTableInit(dataTable: DataTableComponent): void {
    this.dataTableInitData = 'Data table init event is called';
  }
}

Data Bound

dataBound: EventEmitter<void>   Target Component: <ng-data-table>

Data bound property will trigger the completion of data binding operations. This event will be called right after the columnBind and init events respectively.

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
Results: 1-5of10
/ 2

Data bound event is called

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-data-bound-usage',
  templateUrl: './events-data-bound-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsDataBoundUsageComponent {
  public items: ExampleData[];
  public dataBoundEventData: string = null;

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onDataBound(): void {
    this.dataBoundEventData = 'Data bound event is called';
  }
}

Row Bind

rowBind: EventEmitter<DataTableRow<any>>   Target Component: <ng-data-table>

For each row data binding operations in the current view, this event will be triggered and emits a DataTableRow generic type of data set. Please note row bind event will be called after the columnBind, init and dataBound events respectively.

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
Results: 1-5of10
/ 2

Row bind event is called for row ID - 30
Row bind event is called for row ID - 25
Row bind event is called for row ID - 20
Row bind event is called for row ID - 15
Row bind event is called for row ID - 10

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

import { DataTableRow } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-row-bind-usage',
  templateUrl: './events-row-bind-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsRowBindUsageComponent {
  public items: ExampleData[];

  public rowBindEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onRowBind(dataRow: DataTableRow<ExampleData>): void {
    this.rowBindEventData.push(`Row bind event is called for row ID - ${dataRow.item.id}`);
  }
}

Cell Bind

cellBind: EventEmitter<DataTableCellBindEventArgs<any>>   Target Component: <ng-data-table>

After each table row cell data binding operations, this will be triggered and emits a DataTableCellBindEventArgs generic type of data set. That means after a each rowBind event, this event will be called recursively for all the available cells in a given row. That's why following output shows the same output (eg: Cell bind event is called for row ID - 10).

If Pageable is enabled, cell binding will perform on the current table view only. For rest of the pages, cell binding will triggers if the user paginates into them only. Fore more details refer data table Pagination section.

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
Results: 1-5of10
/ 2

Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10

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

import { DataTableCellBindEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-cell-bind-usage',
  templateUrl: './events-cell-bind-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsCellBindUsageComponent {
  public items: ExampleData[];

  public cellBindEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onCellBind(cellBindEventArgs: DataTableCellBindEventArgs<any>): void {
    this.cellBindEventData.push(`Cell bind event is called for row ID - ${cellBindEventArgs.row.item.id}`);
  }
}

Row Select Change

rowSelectChange: EventEmitter<any | any[]>   Target Component: <ng-data-table>

Triggers when row select state changed and emits the selected Select Track By field value or values depending on the row Select Mode. To make this event work it is mandatory to define Row Selectable and selectTrackBy properties. According to this example selectTrackBy property is id field.

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
Results: 1-5of10
/ 2

Select on any row check box to see the output

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-row-select-change-usage',
  templateUrl: './events-row-select-change-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsRowSelectChangeUsageComponent {
  public items: ExampleData[];

  public rowSelectChangeEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onRowSelectChange(selectedData: ExampleData | ExampleData[]): void {
    this.rowSelectChangeEventData.push(JSON.stringify(selectedData));
  }
}

All Row Select Change

allRowSelectChange: EventEmitter<boolean>   Target Component: <ng-data-table>

Triggers when Row Select Change is perform on all the rows in current page or clicking on the select all checkbox will triggers the event. This event emits a boolean with the current state of the selection status.

Please note, Select all checkbox will only selects the rows on current page. each paginated page views have separate select all check boxes. For more details refer the Pagination and Show Row Select All Checkbox sections.

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
Results: 1-5of10
/ 2

Click on the row select all check box or select all checkboxes on current view one by one

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-all-row-select-change-usage',
  templateUrl: './events-all-row-select-change-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsAllRowSelectChangeUsageComponent {
  public items: ExampleData[];

  public allRowSelectChangeEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onAllRowSelectChange(allRowSelectedChanged: boolean): void {
    this.allRowSelectChangeEventData.push(`Select All Rows Checkbox Status: ${allRowSelectedChanged}`);
  }
}

Row Click

rowClick: EventEmitter<DataTableRowClickEventArgs<any>>   Target Component: <ng-data-table>

This property can be uses to trigger user single click event perform on specific data row and emits a DataTableRowClickEventArgs generic type of data set.

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
Results: 1-5of10
/ 2

Click on any row to see the output

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

import { DataTableRowClickEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-row-click-usage',
  templateUrl: './events-row-click-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsRowClickUsageComponent {
  public items: ExampleData[];
  public rowClickEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onRowClick(clickEventArgs: DataTableRowClickEventArgs<any>): void {
    this.rowClickEventData.push(`Single click event perform on row ID - ${clickEventArgs.row.item.id}`);
  }
}

Row Double Click

rowDoubleClick: EventEmitter<DataTableDoubleClickEventArgs<any>>   Target Component: <ng-data-table>

This property can be uses to trigger user double click event perform on specific data row and emits a DataTableDoubleClickEventArgs generic type of data set.

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
Results: 1-5of10
/ 2

Double click on any row to see the output

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

import { DataTableDoubleClickEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-row-double-click-usage',
  templateUrl: './events-row-double-click-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsRowDoubleClickUsageComponent {
  public items: ExampleData[];
  public rowDoubleClickEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onRowDoubleClick(doubleClickEventArgs: DataTableDoubleClickEventArgs<any>): void {
    this.rowDoubleClickEventData.push(`Double click event perform on row ID - ${doubleClickEventArgs.row.item.id}`);
  }
}

Cell Click

cellClick: EventEmitter<DataTableCellClickEventArgs<any>>   Target Component: <ng-data-table>

This event can be uses to trigger user click events perform on specific cell and emits a DataTableCellClickEventArgs type of data set. For sample demonstration refer the below example.

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
Results: 1-5of10
/ 2

Click on any cell to see the output

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

import { DataTableCellClickEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-cell-click-usage',
  templateUrl: './events-cell-click-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsCellClickUsageComponent {
  public items: ExampleData[];

  public cellClickEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onCellClick(cellClickEventArgs: DataTableCellClickEventArgs<any>): void {
    this.cellClickEventData.push(`Selected Column is ${cellClickEventArgs.column.title} & Row ID is - ${cellClickEventArgs.row.item.id}`);
  }
}

Header Click

headerClick: EventEmitter<DataTableHeaderClickEventArgs>   Target Component: <ng-data-table>

This event can be uses to trigger user click events perform on specific column headers and emits a DataTableHeaderClickEventArgs type of data set.

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
Results: 1-5of10
/ 2

Click on any column header to see the output

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

import { DataTableHeaderClickEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-header-click-usage',
  templateUrl: './events-header-click-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsHeaderClickUsageComponent {
  public items: ExampleData[];
  public headerClickEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onHeaderClick(headerClickEventArgs: DataTableHeaderClickEventArgs): void {
    this.headerClickEventData.push(`${headerClickEventArgs.column.title} column header clicked`);
  }
}
Client Side Basic Data Binding
Column Binding
Row Selection
Themes
API Doc for Data Table Events