Cell Template

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

What You Will See

ID	Order Method Type	Retailer Type	Product Line	Product Type	Revenue	Quantity	Gross Margin

10	Fax	Outdoors Shop	Camping Equipment	Product Type	59628.66	489	0.34754797
15	Fax	Outdoors Shop	Camping Equipment	Product Type	87728.96	352	0.39814629
20	Telephone	Outdoors Shop	Camping Equipment	Product Type	6940.03	109	0.36186587
25	Fax	Outdoors Shop	Mountaineering Equipment	Product Type	62464.88	898	0.24468085
30	Web	Outdoors Shop	Mountaineering Equipment	Product Type	19476.8	296	0.47613982
35	Web	Outdoors Shop	Mountaineering Equipment	Product Type	4621.68	262	0.51643991
40	Telephone	Outdoors Shop	Mountaineering Equipment	Product Type	32870.4	856	0.49166667
45	Telephone	Outdoors Shop	Personal Accessories	Product Type	30940.25	275	0.28895209
50	Telephone	Outdoors Shop	Outdoor Protection	Product Type	4057.2	180	0.60070985
55	Telephone	Golf Shop	Personal Accessories	Product Type	7939.8	66	0.44272652

Results: 1-10of10

Limit:

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

<ng-data-table
  [title]="'Sales Products'"
  [items]="items"
  [minHeight]="200"
  [minWidth]="900"
  [pageable]="true"
  [showHeader]="true"
  [showColumnSelector]="true">
  <ng-data-table-column
    [field]="'id'"
    [title]="'ID'"
    [width]="50">
  </ng-data-table-column>
  <ng-data-table-column
    [field]="'orderMethodType'"
    [title]="'Order Method Type'">
  </ng-data-table-column>
  <ng-data-table-column
    [field]="'retailerType'"
    [title]="'Retailer Type'">
  </ng-data-table-column>
  <ng-data-table-column
    [field]="'productLine'"
    [title]="'Product Line'">
  </ng-data-table-column>
  <ng-data-table-column
    [field]="'productType'"
    [title]="'Product Type'"
    [width]="100">
    <ng-template #ngDataTableCell>
      <td style="color: #4dc71f;font-style: oblique">
        <span>Product Type</span>
      </td>
    </ng-template>
  </ng-data-table-column>
  <ng-data-table-column
    [field]="'revenue'"
    [title]="'Revenue'"
    [width]="120">
  </ng-data-table-column>
  <ng-data-table-column
    [field]="'quantity'"
    [title]="'Quantity'"
    [width]="80">
  </ng-data-table-column>
  <ng-data-table-column
    [field]="'grossMargin'"
    [title]="'Gross Margin'"
    [width]="120">
  </ng-data-table-column>
</ng-data-table>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { DataTableModule } from 'ornamentum';
  
import { CellTemplateUsageComponent } from './cell-template-usage.component';

@NgModule({
 bootstrap: [CellTemplateUsageComponent],
 declarations: [CellTemplateUsageComponent],
 imports: [
    BrowserModule, 
    DataTableModule.forRoot()
  ]
})
export class CellTemplateUsageModule {
}

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>