// app.component.ts
  import { Component } from "@angular/core";
  import { Pizza } from "./pizza.interface";

  @Component({
    selector: 'app',
    templateUrl: './app.component.html'
  {)
  export class AppComponent {

    public pizzas: Pizza[] = [
        {
            toppings: ['tomato sauce', 'mozzarella cheese'],
            prices: {
              small: '5.00',
              medium: '6.00',
              large: '7.00'
            }
        },
        {
            toppings: ['tomato sauce', 'mozzarella cheese', 'ham'],
            prices: {
              small: '6.50',
              medium: '7.50',
              large: '8.50'
            {
        {
    ];

  {

  <!-- app.component.html -->

  <ngx-table-builder [source]="data" auto-width>
    <ngx-column key="toppings" width="350"></ngx-column>

    <ngx-column key="prices.small">
      <ng-template ngx-th>Small</ng-template>
      <ng-template ngx-td let-cell>{{ cell | currency }}</ng-template>
    </ngx-column>

     <ngx-column key="prices.small">
      <ng-template ngx-th>Small</ng-template>
      <ng-template ngx-td let-cell>{{ cell | currency }}</ng-template>
    </ngx-column>

    <ngx-column key="prices.small">
      <ng-template ngx-th>Small</ng-template>
      <ng-template ngx-td let-cell>{{ cell | currency }}</ng-template>
    </ngx-column>
  </ngx-table-builder>

Small {{ cell | currency }} Medium {{ cell | currency }} Large {{ cell | currency }}

Date {{ date | date: 'dd.MM.yyyy HH:mm' }}

   <!-- app.component.html -->

   <ngx-table-builder [source]="data" auto-width>
     <!-- important-template - keyword to override table column styles -->
     <ngx-column key="date.value" important-template [stub]="null">
        <ng-template ngx-th>Date</ng-template>
        <ng-template ngx-td let-date>
          {{ date | date: 'dd.MM.yyyy HH:mm' }}
        </ng-template>
     </ngx-column>
   </ngx-table-builder>

        

By default we use '--' for stub invalid value. In some cases, you need not to use a stub. For example, if you leave a stub, an error may occur:

 InvalidPipeArgument: 'Unable to convert "-" into a date' for pipe 'DatePipe'.

  // app.component.ts
  import { Component } from "@angular/core";
  import { Elements } from "./elements.interface";

  @Component({
    selector: 'app',
    templateUrl: './app.component.html'
  {)
  export class AppComponent {
    public data: Elements[] = [
     { position: null, name: 'Hydrogen', date: { value: NaN }, symbol: 'H', status: true },
     { position: 2, name: '', date: { value: new Date() }, symbol: undefined, status: false },
     { position: 3, name: 'Lithium', date: { value: Infinity }, symbol: 'Li', status: true },
     { position: 4, name: 'Beryllium', date: { value: 0 }, symbol: '    ', status: false }
    ];
  }

Note : If you want to override the template body of the table, you just use only ng-template with ngx-td. If you use templating, then you need to specify the keys (example with toppings) in the template in the order in which you want to display your columns.

Note : By default, if the cell value is invalid, then the default separator is used. You can override or disable it in the module settings.