Cell Template

Cell template will allow users to customize table cells based on their personalized and detailed preference.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentProduct Type59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentProduct Type87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentProduct Type6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentProduct Type62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentProduct Type19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentProduct Type4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentProduct Type32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesProduct Type30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionProduct Type4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesProduct Type7939.8660.44272652
Results: 1-10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@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();
  }
}

Basic Usage

Initially you can set your own cell template all configuration as follows.

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

Once the template configuring is done, You can apply one or more columns In the above data table, the following template is applied values in Retailer Type column.

  <ng-template #ngDataTableCell>
    <td style="color: #4dc71f;font-style: oblique">
       <span>Product Type</span>
    </td>
  </ng-template>

Useful Properties

There are few more configurations available which affects the cell templating behaviours.

Column

column: DataTableColumnComponent

Cell responsible column can be accessed as follows and Data table column component contains all column properties that required.

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

Row

row: DataTableRow

Cell responsible specific data table row field can be accessed as follows.

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

Span Index

spanIndex: number

Cell responsible specific data table row span index can be accessed as follows.

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

Row Span

rowSpan: number

Row span count can be accessed as follows.

  <ng-template #ngDataTableCell let-rowSpan="rowSpan">
    {{<--rowSpan property can be accessed in here when providing custom template-->}}
  </ng-template>
API Doc for Data Table Cell Template