Data Table Cell Template

Ornamentum allows flexible customization of the table cells of the Grid (excluding the header and footer sections) or to format the data the table cells display.

If the user uses cell templating for more than one column, the user has to handel rowspan on that cell manually by involving both rowSpan and spanIndex Please refer Product Type and Revenue column in Row Span example.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59,628.664890.34754797
Cooking Gear59,628.66
Cooking Gear59,628.66
15FaxOutdoors ShopCamping EquipmentSleeping Bags87,728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6,940.031090.36186587
Lanterns6,940.03
25FaxOutdoors ShopMountaineering EquipmentSafety62,464.888980.24468085
Safety62,464.88
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19,476.802960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4,621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32,870.408560.49166667
Tools32,870.40
45TelephoneOutdoors ShopPersonal AccessoriesKnives30,940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4,057.201800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7,939.80660.44272652
Results: 1 -10 of 10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';
import { DataTableRow } from 'ornamentum';

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


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

  public onDynamicRowSpanExtract(row: DataTableRow<ExampleData>): number {
    if (row.item.availableStores && row.item.availableStores.length) {
      return row.item.availableStores.length;
    }

    return 1;
  }

  public getStoreName(item: ExampleData, index: number, field: string) {
    return item.availableStores && item.availableStores[index] ? item.availableStores[index][field] : '-';
  }

}

Basic Usage

Following code snippet depicts the integration of cell template. To define the cell template, nest an <ng-template> tag with the ngDataTableCell directive inside a <ng-data-table-column> tag. The template context is set to the current data item and the following additional fields are passed.
let-column="column" let-row="row" let-spanIndex="spanIndex" let-rowSpan="rowSpan"

  <ng-template #ngDataTableCell let-column="column" let-row="row" let-spanIndex="spanIndex" let-rowSpan="rowSpan">
    // your template goes here
  </ng-template>

<ng-template #ngDataTableCell let-row="row">
  <td style="color: #4dc71f;font-style: oblique">
    <span>{{row.item.productType}}</span>
  </td>
</ng-template>

Useful Properties

There are few more configurations available that affect the cell templating behaviours.

Column

column: DataTableColumnComponentTarget Component: <ng-data-table-column>

To define the cell template, nest an <ng-template> tag with the ngDataTableCell directive inside a <ng-data-table-column> tag.

The current column instance contains all column properties. Users can use it as an alias for a template variable by utilizing the let-column="column" syntax. 

  <ng-template #ngDataTableCell let-column="column">
    {{<--column properties can be accessed in here when providing custom template-->}}
  </ng-template>

Row

row: DataTableRowTarget Component: <ng-data-table-column>

To define the cell template, nest an <ng-template> tag with the ngDataTableCell directive inside a <ng-data-table-column> tag.

The current row instance contains all the row data. Users can use it as an alias for a template variable by utilizing the let-row="row" syntax. 

  <ng-template #ngDataTableCell let-row="row">
    {{<--row properties can be accessed in here when providing custom template-->}}
  </ng-template>
Usage of row property

Hall of Fame

IDGit Profile URL
5279079yohangzhttps://github.com/yohangz
6312524lahiruzhttps://github.com/lahiruz
29842949aravindakr95https://github.com/aravindakr95
35022498samudithawhttps://github.com/samudithaw
6813939caglinehttps://github.com/cagline
43087732thaveeshagamagehttps://github.com/thaveeshagamage
24251976sanuradhaghttps://github.com/sanuradhag
3881403Arty26https://github.com/Arty26
Results: 1 -8 of 8
/ 1
import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { DataTableRequestParams, DataTableQueryResult } from 'ornamentum';

@Component({
  selector: 'app-cell-template-avatar-usage',
  templateUrl: './cell-template-avatar-usage.component.html',
  styles: ['.highlight { color: lightblue; font-weight: bold;}']
})
export class CellTemplateAvatarUsageComponent {

  constructor(public http: HttpClient) {
  }

  /**
   * custom data provider need to return a function which is return an Observable out put
   * as long as your data return as observable you can use any data source
   * example : Firebase Realtime Database or Cloud Firestore
   */
  public onDataBind = (params: DataTableRequestParams): Observable<DataTableQueryResult<any>> => {
    const page = (params.offset + params.limit) / params.limit;
    const perPage = params.limit;
    let httpParams = new HttpParams();

    httpParams = httpParams
      .append('page', '' + page)
      .append('perPage', '' + perPage);

    return this.http.get('https://api.github.com/repos/yohangz/ornamentum/contributors', { params: httpParams })
      .pipe(map((res: any) => {

          /**
           * Items collection
           * items: T[];
           * Item count
           * count: number;
           */
          return {
            items: res,
            count: res.length
          };
        })
      ) as Observable<any>;
  };

}

Span Index

spanIndex: numberTarget Component: <ng-data-table-column>

To define the cell template, nest an <ng-template> tag with the ngDataTableCell directive inside a <ng-data-table-column> tag.

The span index of the current row is useful when using row spanning. Users can use it as an alias for a template variable by utilizing the let-spanIndex="spanIndex" syntax. 

  <ng-template #ngDataTableCell let-spanIndex="spanIndex">
    {{<--spanIndex property can be accessed in here when providing custom template-->}}
  </ng-template>

Users will need this when using the Cell Templating for more than one column with row span. Users can find such a scenario in Row Span example for the usage of span index.

Row Span

rowSpan: numberTarget Component: <ng-data-table-column>

To define the cell template, nest an <ng-template> tag with the ngDataTableCell directive inside a <ng-data-table-column> tag.

Row Span of the current row is useful when using row span. Users can use it as an alias for a template variable by utilizing the let-rowSpan="rowSpan" syntax. 

  <ng-template #ngDataTableCell let-rowSpan="rowSpan">
    {{<--rowSpan property can be accessed in here when providing custom template-->}}
  </ng-template>

If the user is going to use cell templates for more than one column user has to handel rowspan on that cell manually, with involving both rowSpan and spanIndex

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

import { DataTableRow } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';


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


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

  public onDynamicRowSpanExtract(row: DataTableRow<ExampleData>): number {
    if (row.item.availableStores && row.item.availableStores.length) {
      return row.item.availableStores.length;
    }

    return 1;
  }

  public getStoreName(item: ExampleData, index: number, field: string) {
    return item.availableStores && item.availableStores[index] ? item.availableStores[index][field] : '-';
  }

}
Dynamic Row Span
API Doc for Data Table Cell Template