Example nested models

      // 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.